From 5974244c46ddcd8ce1d183b4246bfce3793aa382 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Mon, 13 Mar 2023 11:41:35 +0800 Subject: [PATCH] Update docs (14831) Signed-off-by: ester.zhou --- .../notification/progress-bar-notification.md | 2 +- .../reference/apis/js-apis-webview.md | 100 ++- .../arkui-ts/ts-basic-components-web.md | 670 +++++++++--------- 3 files changed, 434 insertions(+), 338 deletions(-) diff --git a/en/application-dev/notification/progress-bar-notification.md b/en/application-dev/notification/progress-bar-notification.md index de430008e3..76e3292d79 100644 --- a/en/application-dev/notification/progress-bar-notification.md +++ b/en/application-dev/notification/progress-bar-notification.md @@ -28,7 +28,7 @@ In the [NotificationTemplate](../reference/apis/js-apis-notificationManager.md#n ```ts notificationManager.isSupportTemplate('downloadTemplate').then((data) => { console.info(`[ANS] isSupportTemplate success`); - let isSupportTpl: boolean = data; // The value **true** means that the template of the **downloadTemplate** type is supported; and false means the opposite. + let isSupportTpl: boolean = data; // The value true means that the template of the downloadTemplate type is supported, and false means the opposite. // ... }).catch((err) => { console.error(`[ANS] isSupportTemplate failed, error[${err}]`); diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md index 7afafbc7cb..43c92a8522 100644 --- a/en/application-dev/reference/apis/js-apis-webview.md +++ b/en/application-dev/reference/apis/js-apis-webview.md @@ -2,7 +2,7 @@ # @ohos.web.webview (Webview) -The **Webview** module provides APIs for web control. +The **Webview** module provides APIs for web control. It can be used with the **[](../arkui-ts/ts-basic-components-web.md)** component, which can be used to display web pages. > **NOTE** > @@ -20,7 +20,7 @@ The **Webview** module provides APIs for web control. import web_webview from '@ohos.web.webview'; ``` -### once +## once once(type: string, callback: Callback\): void @@ -43,7 +43,7 @@ import web_webview from '@ohos.web.webview' web_webview.once("webInited", () => { console.log("setCookie") - web_webview.WebCookieManager.setCookie("www.example.com", "a=b") + web_webview.WebCookieManager.setCookie("https://www.example.com", "a=b") }) @Entry @@ -232,15 +232,15 @@ The following code snippet exemplifies calling this API after the MainAbility is ```ts // xxx.ts -import Ability from '@ohos.application.Ability' -import web_webview from '@ohos.web.webview' +import UIAbility from '@ohos.app.ability.UIAbility'; +import web_webview from '@ohos.web.webview'; -export default class MainAbility extends Ability { +export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { - console.log("MainAbility onCreate") + console.log("EntryAbility onCreate") web_webview.WebviewController.initializeWebEngine() globalThis.abilityWant = want - console.log("MainAbility onCreate done") + console.log("EntryAbility onCreate done") } } ``` @@ -264,6 +264,46 @@ struct WebComponent { } ``` +### setWebDebuggingAccess + +static setWebDebuggingAccess(webDebuggingAccess: boolean): void + +Sets whether to enable web debugging. + +**System capability**: SystemCapability.Web.Webview.Core + +**Parameters** + +| Name | Type | Mandatory | Description| +| ------------------ | ------- | ---- | ------------- | +| webDebuggingAccess | boolean | Yes | Whether to enable web debugging.| + + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview'; + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + aboutToAppear():void { + try { + web_webview.WebviewController.setWebDebuggingAccess(true); + } catch(error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + } + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + ### loadUrl loadUrl(url: string | Resource, headers?: Array\): void @@ -338,7 +378,6 @@ struct WebComponent { } }) Web({ src: 'www.example.com', controller: this.controller }) - .webDebuggingAccess(true) } } } @@ -438,7 +477,34 @@ struct WebComponent { } ``` -### accessforward +Example of loading local resource: +```ts +// xxx.ets +import web_webview from '@ohos.web.webview' + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + updataContent: string = '
image -- end
' + + build() { + Column() { + Button('loadData') + .onClick(() => { + try { + this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " "); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + +### accessForward accessForward(): boolean @@ -1565,7 +1631,7 @@ struct WebComponent { .onClick(() => { try { if (this.ports && this.ports[1]) { - this.ports[1].postMessageEvent("this.sendFromEts"); + this.ports[1].postMessageEvent(this.sendFromEts); } else { console.error(`ports is null, Please initialize first`); } @@ -1607,7 +1673,7 @@ var output = document.querySelector('.output'); window.addEventListener('message', function (event) { if (event.data == '__init_port__') { if (event.ports[0] != null) { - The h5Port = event.ports[0]; // 1. Save the port number sent from the eTS side. + h5Port = event.ports[0]; // 1. Save the port number sent from the eTS side. h5Port.onmessage = function (event) { // 2. Receive the message sent from the eTS side. var msg = 'Got message from ets:'; @@ -3174,7 +3240,7 @@ struct WebComponent { Button('getCookie') .onClick(() => { try { - let value = web_webview.WebCookieManager.getCookie('www.example.com'); + let value = web_webview.WebCookieManager.getCookie('https://www.example.com'); console.log("value: " + value); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -3226,7 +3292,7 @@ struct WebComponent { Button('setCookie') .onClick(() => { try { - web_webview.WebCookieManager.setCookie('www.example.com', 'a=b'); + web_webview.WebCookieManager.setCookie('https://www.example.com', 'a=b'); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -4094,9 +4160,6 @@ struct WebComponent { try { this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm); console.log('num: ' + this.username_password.length); - ForEach(this.username_password, (item) => { - console.log('username_password: ' + item); - }, item => item) } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -4165,7 +4228,7 @@ Checks whether any saved HTTP authentication credentials exist. This API returns | Type | Description | | ------- | ------------------------------------------------------------ | -| boolean | Whether any saved HTTP authentication credentials exist. Returns **true** if any saved HTTP authentication credentials exist; returns **false** otherwise. | +| boolean | Whether any saved HTTP authentication credentials exist. Returns **true** if any saved HTTP authentication credentials exist; returns **false** otherwise.| **Example** @@ -4730,3 +4793,4 @@ Defines a custom URL scheme. | schemeName | string | Yes | Yes | Name of the custom URL scheme. The value can contain a maximum of 32 characters and include only lowercase letters, digits, periods (.), plus signs (+), and hyphens (-). | | isSupportCORS | boolean | Yes | Yes | Whether to support cross-origin resource sharing (CORS). | | isSupportFetch | boolean | Yes | Yes | Whether to support fetch requests. | + diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md index 842bcfe96d..4c003aae10 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -1,6 +1,6 @@ # Web -The **** component can be used to display web pages. +The **** component can be used to display web pages. It can be used with the [@ohos.web.webview](../apis/js-apis-webview.md) module, which provides APIs for web control. > **NOTE** > @@ -16,38 +16,26 @@ Not supported ## APIs -Web(options: { src: ResourceStr, controller: WebController | WebviewController}) +Web(options: { src: ResourceStr, controller: WebviewController | WebController}) > **NOTE** > > Transition animation is not supported. -> Different **\** components on the same page must be bound to different **WebController**s. +> +> **\** components on a page must be bound to different **WebviewController**s. **Parameters** | Name | Type | Mandatory | Description | | ---------- | ---------------------------------------- | ---- | ------- | | src | [ResourceStr](ts-types.md) | Yes | Address of a web page resource.| -| controller | [WebController](#webcontroller) \| [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) | Yes | Controller. | +| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.| **Example** Example of loading online web pages: ```ts // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ```ts - // xxx.ets import web_webview from '@ohos.web.webview' @Entry @@ -65,10 +53,12 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController}) Example of loading local web pages: ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: $rawfile("index.html"), controller: this.controller }) @@ -107,10 +97,12 @@ Sets whether to enable the DOM Storage API. By default, this feature is disabled ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -136,10 +128,12 @@ Sets whether to enable access to the file system in the application. This settin ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -164,10 +158,12 @@ Sets whether to enable automatic image loading. By default, this feature is enab **Example** ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -180,7 +176,7 @@ Sets whether to enable automatic image loading. By default, this feature is enab ### javaScriptProxy javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array\, - controller: WebController | WebviewController}) + controller: WebviewController | WebController}) Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. The parameters cannot be updated. @@ -191,41 +187,10 @@ Registers a JavaScript object with the window. APIs of this object can then be i | object | object | Yes | - | Object to be registered. Methods can be declared, but attributes cannot. | | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window.| | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | -| controller | [WebController](#webcontroller) or [WebviewController](../apis/js-apis-webview.md#webviewcontroller) | Yes | - | Controller. | +| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | - | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.| **Example** - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - testObj = { - test: (data1, data2, data3) => { - console.log("data1:" + data1) - console.log("data2:" + data2) - console.log("data3:" + data3) - return "AceString" - }, - toString: () => { - console.log('toString' + "interface instead.") - } - } - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - .javaScriptAccess(true) - .javaScriptProxy({ - object: this.testObj, - name: "objName", - methodList: ["test", "toString"], - controller: this.controller, - }) - } - } - } - ``` ```ts // xxx.ets import web_webview from '@ohos.web.webview' @@ -276,10 +241,12 @@ Sets whether JavaScript scripts can be executed. By default, JavaScript scripts ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -305,10 +272,12 @@ Sets whether to enable loading of HTTP and HTTPS hybrid content can be loaded. B ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: MixedMode = MixedMode.All build() { Column() { @@ -335,10 +304,12 @@ Sets whether to enable access to online images through HTTP and HTTPS. By defaul ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -364,10 +335,12 @@ Sets whether to enable zoom gestures. By default, this feature is enabled. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -393,10 +366,12 @@ Sets whether to load web pages by using the overview mode. By default, this feat ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -422,10 +397,12 @@ Sets whether to enable database access. By default, this feature is disabled. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -451,10 +428,12 @@ Sets whether to enable geolocation access. By default, this feature is enabled. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -480,10 +459,12 @@ Sets whether video playback must be started by user gestures. This API is not ap ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() @State access: boolean = true build() { Column() { @@ -510,10 +491,12 @@ Sets whether to enable the multi-window permission. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -539,10 +522,12 @@ Sets whether to display the horizontal scrollbar, including the default system s ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -590,10 +575,12 @@ Sets whether to display the vertical scrollbar, including the default system scr ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -642,10 +629,12 @@ Sets the cache mode. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() @State mode: CacheMode = CacheMode.None build() { Column() { @@ -672,10 +661,12 @@ Sets the text zoom ratio of the page. The default value is **100**, which indica ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() @State atio: number = 150 build() { Column() { @@ -702,10 +693,12 @@ Sets the scale factor of the entire page. The default value is 100%. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() @State percent: number = 100 build() { Column() { @@ -732,10 +725,12 @@ Sets the user agent. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36' build() { Column() { @@ -1211,10 +1206,12 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1269,10 +1266,12 @@ Called when this page is about to exit after the user refreshes or closes the pa ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1330,10 +1329,12 @@ Called when **confirm()** is invoked by the web page. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1390,10 +1391,12 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1450,10 +1453,12 @@ Called to notify the host application of a JavaScript console message. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1487,10 +1492,12 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1524,10 +1531,12 @@ Called when an error occurs during web page loading. For better results, simplif ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1568,10 +1577,12 @@ Called when an HTTP error (the response code is greater than or equal to 400) oc ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1619,10 +1630,12 @@ Called when the web page starts to be loaded. This API is called only for the ma ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1652,10 +1665,12 @@ Called when the web page loading is complete. This API takes effect only for the ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1684,10 +1699,12 @@ Called when the web page loading progress changes. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1716,10 +1733,12 @@ Called when the document title of the web page is changed. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1749,10 +1768,12 @@ Called when loading of the web page is complete. This API is used by an applicat ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1781,10 +1802,12 @@ Called when the rendering process exits abnormally. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1820,10 +1843,12 @@ Called to process an HTML form whose input type is **file**, in response to the ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1869,10 +1894,12 @@ Called to notify the **\** component of the URL of the loaded resource file ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1902,10 +1929,12 @@ Called when the display ratio of this page changes. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1940,10 +1969,12 @@ Called when the **\** component is about to access a URL. This API is used ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -1979,10 +2010,12 @@ Called when the **\** component is about to access a URL. This API is used ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() responseweb: WebResourceResponse = new WebResourceResponse() heads:Header[] = new Array() @State webdata: string = "\n" + @@ -2050,7 +2083,7 @@ Called when an HTTP authentication request is received. @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() httpAuth: boolean = false build() { @@ -2112,7 +2145,7 @@ Called when an SSL error occurs during resource loading. @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -2167,7 +2200,7 @@ Called when an SSL client certificate request is received. @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -2215,10 +2248,12 @@ Called when a permission request is received. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2271,10 +2306,12 @@ Shows a context menu after the user clicks the right mouse button or long presse ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2305,10 +2342,12 @@ Called when the scrollbar of the page scrolls. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2338,10 +2377,12 @@ Registers a callback for receiving a request to obtain the geolocation informati ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller:WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src:'www.example.com', controller:this.controller }) @@ -2382,10 +2423,12 @@ Called to notify the user that the request for obtaining the geolocation informa ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller:WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src:'www.example.com', controller:this.controller }) @@ -2414,10 +2457,12 @@ Called when the component enters full screen mode. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller:WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() handler: FullScreenExitHandler = null build() { Column() { @@ -2447,10 +2492,12 @@ Called when the component exits full screen mode. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller:WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() handler: FullScreenExitHandler = null build() { Column() { @@ -2480,7 +2527,7 @@ Registers a callback for window creation. | isAlert | boolean | Whether to open the target URL in a new window. The value **true** means to open the target URL in a new window, and **false** means to open the target URL in a new tab.| | isUserTrigger | boolean | Whether the creation is triggered by the user. The value **true** means that the creation is triggered by the user, and **false** means the opposite. | | targetUrl | string | Target URL. | -| handler | [ControllerHandler](#controllerhandler9) | **WebController** instance for setting the new window. | +| handler | [ControllerHandler](#controllerhandler9) | **WebviewController** instance for setting the new window. | **Example** @@ -2521,10 +2568,12 @@ Registers a callback for window closure. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller:WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { Web({ src:'www.example.com', controller: this.controller }) @@ -2554,10 +2603,12 @@ Called to notify the caller of the search result on the web page. ```ts // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry @Component struct WebComponent { - controller: WebController = new WebController() + controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { @@ -3134,6 +3185,18 @@ Instructs the **\** component to select a file. Implements the **FileSelectorParam** object. For the sample code, see [onShowFileSelector](#onshowfileselector9). +### getTitle9+ + +getTitle(): string + +Obtains the title of this file selector. + +**Return value** + +| Type | Description | +| ------ | -------- | +| string | Title of the file selector.| + ### getMode9+ getMode(): FileSelectorMode @@ -3543,18 +3606,192 @@ Sets the geolocation permission status of a web page. | allow | boolean | Yes | - | Geolocation permission status. | | retain | boolean | Yes | - | Whether the geolocation permission status can be saved to the system. You can manage the geolocation permissions saved to the system through [GeolocationPermissions9+](../apis/js-apis-webview.md#geolocationpermissions).| -## WebController +## MessageLevel -Implements a **WebController** to control the behavior of the **\** component. A **WebController** can control only one **\** component, and the APIs in the **WebController** can be invoked only after it has been bound to the target **\** component. +| Name | Description | +| ----- | :---- | +| Debug | Debug level.| +| Error | Error level.| +| Info | Information level.| +| Log | Log level.| +| Warn | Warning level. | -This API is deprecated since API version 9. You are advised to use [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller). +## RenderExitReason -### Creating an Object +Enumerates the reasons why the rendering process exits. + +| Name | Description | +| -------------------------- | ----------------- | +| ProcessAbnormalTermination | The rendering process exits abnormally. | +| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.| +| ProcessCrashed | The rendering process crashes due to segmentation or other errors. | +| ProcessOom | The program memory is running low. | +| ProcessExitUnknown | Other reason. | + +## MixedMode + +| Name | Description | +| ---------- | ---------------------------------- | +| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.| +| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. | +| None | HTTP and HTTPS hybrid content cannot be loaded. | + +## CacheMode +| Name | Description | +| ------- | ------------------------------------ | +| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.| +| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | +| Online | The cache is not used to load the resources. All resources are obtained from the Internet. | +| Only | The cache alone is used to load the resources. | + +## FileSelectorMode +| Name | Description | +| -------------------- | ---------- | +| FileOpenMode | Open and upload a file. | +| FileOpenMultipleMode | Open and upload multiple files. | +| FileOpenFolderMode | Open and upload a folder.| +| FileSaveMode | Save a file. | + + ## HitTestType + +| Name | Description | +| ------------- | ------------------------ | +| EditText | Editable area. | +| Email | Email address. | +| HttpAnchor | Hyperlink whose **src** is **http**. | +| HttpAnchorImg | Image with a hyperlink, where **src** is **http**.| +| Img | HTML::img tag. | +| Map | Geographical address. | +| Phone | Phone number. | +| Unknown | Unknown content. | + +## SslError9+ + +Enumerates the error codes returned by **onSslErrorEventReceive** API. + +| Name | Description | +| ------------ | ----------- | +| Invalid | Minor error. | +| HostMismatch | The host name does not match. | +| DateInvalid | The certificate has an invalid date. | +| Untrusted | The certificate issuer is not trusted.| + +## ProtectedResourceType9+ + +| Name | Description | Remarks | +| --------- | ------------- | -------------------------- | +| MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.| + +## WebDarkMode9+ +| Name | Description | +| ------- | ------------------------------------ | +| Off | The web dark mode is disabled. | +| On | The web dark mode is enabled. | +| Auto | The web dark mode setting follows the system settings. | + +## DataResubmissionHandler9+ + +Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data. + +### resend9+ + +resend(): void + +Resends the web form data. + +**Example** + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + build() { + Column() { + Web({ src:'www.example.com', controller: this.controller }) + .onDataResubmitted((event) => { + console.log('onDataResubmitted') + event.handler.resend(); + }) + } + } + } + ``` + +### cancel9+ + +cancel(): void + +Cancels the resending of web form data. + +**Example** + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + build() { + Column() { + Web({ src:'www.example.com', controller: this.controller }) + .onDataResubmitted((event) => { + console.log('onDataResubmitted') + event.handler.cancel(); + }) + } + } + } + ``` + + ## WebController + +Implements a **WebController** to control the behavior of the **\** component. A **WebController** can control only one **\** component, and the APIs in the **WebController** can be invoked only after it has been bound to the target **\** component. + +This API is deprecated since API version 9. You are advised to use [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller). + +### Creating an Object ``` webController: WebController = new WebController() ``` +### getCookieManager9+ + +getCookieManager(): WebCookie + +Obtains the cookie management object of the **\** component. + +**Return value** + +| Type | Description | +| --------- | ---------------------------------------- | +| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).| + +**Example** + + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController() + + build() { + Column() { + Button('getCookieManager') + .onClick(() => { + let cookieManager = this.controller.getCookieManager() + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### requestFocus(deprecated) requestFocus() @@ -3829,39 +4066,6 @@ This API is deprecated since API version 9. You are advised to use [getHitTest9+ -getTitle(): string - -Obtains the title of the current web page. - -**Return value** - -| Type | Description | -| ------ | -------- | -| string | Title of the current web page.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getTitle') - .onClick(() => { - let title = this.controller.getTitle() - console.log("title: " + title) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### loadData(deprecated) loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) @@ -4258,47 +4462,15 @@ This API is deprecated since API version 9. You are advised to use [clearHistory } ``` -### getCookieManager9+ - -getCookieManager(): WebCookie - -Obtains the cookie management object of the **\** component. - -**Return value** - -| Type | Description | -| --------- | ---------------------------------------- | -| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getCookieManager') - .onClick(() => { - let cookieManager = this.controller.getCookieManager() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -## WebCookie +## WebCookie(deprecated) Manages behavior of cookies in **\** components. All **\** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management. -### setCookie9+ +### setCookie(deprecated) setCookie(url: string, value: string): boolean Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise. +This API is deprecated since API version 9. You are advised to use [setCookie9+](../apis/js-apis-webview.md#setcookie) instead. **Parameters** @@ -4326,7 +4498,7 @@ Sets the cookie. This API returns the result synchronously. Returns **true** if Column() { Button('setCookie') .onClick(() => { - let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b") + let result = this.controller.getCookieManager().setCookie("https://www.example.com", "a=b") console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller }) @@ -4334,10 +4506,11 @@ Sets the cookie. This API returns the result synchronously. Returns **true** if } } ``` -### saveCookieSync9+ -saveCookieSync(): boolean +### saveCookie(deprecated) +saveCookie(): boolean Saves the cookies in the memory to the drive. This API returns the result synchronously. +This API is deprecated since API version 9. You are advised to use [saveCookieAsync9+](../apis/js-apis-webview.md#savecookieasync) instead. **Return value** @@ -4356,9 +4529,9 @@ Saves the cookies in the memory to the drive. This API returns the result synchr build() { Column() { - Button('saveCookieSync') + Button('saveCookie') .onClick(() => { - let result = this.controller.getCookieManager().saveCookieSync() + let result = this.controller.getCookieManager().saveCookie() console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller }) @@ -4366,144 +4539,3 @@ Saves the cookies in the memory to the drive. This API returns the result synchr } } ``` - -## MessageLevel - -| Name | Description | -| ----- | :---- | -| Debug | Debug level.| -| Error | Error level.| -| Info | Information level.| -| Log | Log level.| -| Warn | Warning level. | - -## RenderExitReason - -Enumerates the reasons why the rendering process exits. - -| Name | Description | -| -------------------------- | ----------------- | -| ProcessAbnormalTermination | The rendering process exits abnormally. | -| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.| -| ProcessCrashed | The rendering process crashes due to segmentation or other errors. | -| ProcessOom | The program memory is running low. | -| ProcessExitUnknown | Other reason. | - -## MixedMode - -| Name | Description | -| ---------- | ---------------------------------- | -| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.| -| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. | -| None | HTTP and HTTPS hybrid content cannot be loaded. | - -## CacheMode -| Name | Description | -| ------- | ------------------------------------ | -| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.| -| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | -| Online | The cache is not used to load the resources. All resources are obtained from the Internet. | -| Only | The cache alone is used to load the resources. | - -## FileSelectorMode -| Name | Description | -| -------------------- | ---------- | -| FileOpenMode | Open and upload a file. | -| FileOpenMultipleMode | Open and upload multiple files. | -| FileOpenFolderMode | Open and upload a folder.| -| FileSaveMode | Save a file. | - - ## HitTestType - -| Name | Description | -| ------------- | ------------------------ | -| EditText | Editable area. | -| Email | Email address. | -| HttpAnchor | Hyperlink whose **src** is **http**. | -| HttpAnchorImg | Image with a hyperlink, where **src** is **http**.| -| Img | HTML::img tag. | -| Map | Geographical address. | -| Phone | Phone number. | -| Unknown | Unknown content. | - -## SslError9+ - -Enumerates the error codes returned by **onSslErrorEventReceive** API. - -| Name | Description | -| ------------ | ----------- | -| Invalid | Minor error. | -| HostMismatch | The host name does not match. | -| DateInvalid | The certificate has an invalid date. | -| Untrusted | The certificate issuer is not trusted.| - -## ProtectedResourceType9+ - -| Name | Description | Remarks | -| --------- | ------------- | -------------------------- | -| MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.| - -## WebDarkMode9+ -| Name | Description | -| ------- | ------------------------------------ | -| Off | The web dark mode is disabled. | -| On | The web dark mode is enabled. | -| Auto | The web dark mode setting follows the system settings. | - -## DataResubmissionHandler9+ - -Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data. - -### resend9+ - -resend(): void - -Resends the web form data. - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: web_webview.WebviewController = new web_webview.WebviewController() - build() { - Column() { - Web({ src:'www.example.com', controller: this.controller }) - .onDataResubmitted((event) => { - console.log('onDataResubmitted') - event.handler.resend(); - }) - } - } - } - ``` - -### cancel9+ - -cancel(): void - -Cancels the resending of web form data. - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: web_webview.WebviewController = new web_webview.WebviewController() - build() { - Column() { - Web({ src:'www.example.com', controller: this.controller }) - .onDataResubmitted((event) => { - console.log('onDataResubmitted') - event.handler.cancel(); - }) - } - } - } - ``` -- GitLab