diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md index 8c3ca939bdb5758f987780d94c7bb88837613b4d..7afafbc7cb0ec25bbfc02696b9dec8b66e75d86b 100644 --- a/en/application-dev/reference/apis/js-apis-webview.md +++ b/en/application-dev/reference/apis/js-apis-webview.md @@ -249,7 +249,7 @@ export default class MainAbility extends Ability { ```ts // xxx.ets -import web_webview from '@ohos.web.webview' +import web_webview from '@ohos.web.webview'; @Entry @Component @@ -266,7 +266,7 @@ struct WebComponent { ### loadUrl -loadUrl(url: string | Resource, headers?: Array\): void +loadUrl(url: string | Resource, headers?: Array\): void Loads a specified URL. @@ -277,7 +277,7 @@ Loads a specified URL. | Name | Type | Mandatory| Description | | ------- | ---------------- | ---- | :-------------------- | | url | string \| Resource | Yes | URL to load. | -| headers | Array\<[HeaderV9](#headerv9)> | No | Additional HTTP request header of the URL.| +| headers | Array\<[WebHeader](#webheader)> | No | Additional HTTP request header of the URL.| **Error codes** @@ -305,6 +305,7 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { + // The URL to be loaded is of the string type. this.controller.loadUrl('www.example.com'); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -316,6 +317,69 @@ struct WebComponent { } ``` +```ts +// xxx.ets +import web_webview from '@ohos.web.webview' + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('loadUrl') + .onClick(() => { + try { + // The headers parameter is carried. + this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + .webDebuggingAccess(true) + } + } +} +``` + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview' + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('loadUrl') + .onClick(() => { + try { + // The URL to be loaded is of the Resource type. + this.controller.loadUrl($rawfile('xxx.html')); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + +```html + + + + +

Hello World

+ + +``` + ### loadData loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void @@ -790,7 +854,7 @@ struct WebComponent { ### getHitTest -getHitTest(): HitTestTypeV9 +getHitTest(): WebHitTestType Obtains the element type of the area being clicked. @@ -800,7 +864,7 @@ Obtains the element type of the area being clicked. | Type | Description | | ------------------------------------------------------------ | ---------------------- | -| [HitTestTypeV9](#hittesttypev9)| Element type of the area being clicked.| +| [WebHitTestType](#webhittesttype)| Element type of the area being clicked.| **Error codes** @@ -987,7 +1051,7 @@ Executes a JavaScript script. This API uses a promise to return the script execu | Type | Description | | --------------- | --------------------------------------------------- | -| Promise\ | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed| +| Promise\ | Promise used to return the result. Returns **null** if the JavaScript script fails to be executed| **Error codes** @@ -1473,7 +1537,7 @@ struct WebComponent { this.ports = this.controller.createWebMessagePorts(); // 2. Register a callback on a message port (for example, port 1) on the application side. this.ports[1].onMessageEvent((result: web_webview.WebMessage) => { - var msg = 'Got msg from HTML:'; + let msg = 'Got msg from HTML:'; if (typeof(result) == "string") { console.log("received string message from html5, string is:" + result); msg = msg + result; @@ -1501,7 +1565,7 @@ struct WebComponent { .onClick(() => { try { if (this.ports && this.ports[1]) { - this.ports[1].postMessageEvent("post message from ets to HTML"); + this.ports[1].postMessageEvent("this.sendFromEts"); } else { console.error(`ports is null, Please initialize first`); } @@ -3540,7 +3604,7 @@ Deletes all data in the specified origin. | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------------------------ | -| origin | string | Yes | Index of the origin.| +| origin | string | Yes | Index of the origin, which is obtained through [getOrigins](#getorigins).| **Error codes** @@ -4101,7 +4165,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 exists; returns **false** otherwise.| +| boolean | Whether any saved HTTP authentication credentials exist. Returns **true** if any saved HTTP authentication credentials exist; returns **false** otherwise. | **Example** @@ -4165,133 +4229,6 @@ struct WebComponent { } ``` -## WebAsyncController - -Implements a **WebAsyncController** object, which can be used to control the behavior of a **\** component with asynchronous callbacks. A **WebAsyncController **object controls one **\** component. - -### Creating an Object - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController(); - webAsyncController: web_webview.WebAsyncController = new web_webview.WebAsyncController(this.controller) - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### constructor9+ - -constructor(controller: WebController) - -Implements a **WebAsyncController** by binding it with a [WebController](../arkui-ts/ts-basic-components-web.md#webcontroller) object. - -**System capability**: SystemCapability.Web.Webview.Core - -**Parameters** - -| Name| Type| Mandatory| Description| -| ----- | ---- | ---- | --- | -| controller | [WebController](../arkui-ts/ts-basic-components-web.md#webcontroller) | Yes| **WebviewController** to bind.| - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\): void - -Stores this web page. This API uses an asynchronous callback to return the result. - -**System capability**: SystemCapability.Web.Webview.Core - -**Parameters** - -| Name | Type | Mandatory | Description | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | Yes| Save path. The value cannot be null. | -| autoName | boolean | Yes| Whether to automatically generate a file name.
The value **false** means not to automatically generate a file name.
The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory. | -| callback | AsyncCallback\ | Yes | Callback used to return the save path if the operation is successful and null otherwise.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller) - webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean): Promise\ - -Stores this web page. This API uses a promise to return the result. - -**System capability**: SystemCapability.Web.Webview.Core - -**Parameters** - -| Name | Type | Mandatory | Description | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | Yes| Save path. The value cannot be null. | -| autoName | boolean | Yes| Whether to automatically generate a file name.
The value **false** means not to automatically generate a file name.
The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory. | - -**Return value** - -| Type | Description | -| ---------------- | ------------------------------------------------------------ | -| Promise\ | Promise used to return the save path if the operation is successful and null otherwise. | - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController(); - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller); - webAsyncController.storeWebArchive("/data/storage/el2/base/", true) - .then(filename => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ## GeolocationPermissions Implements a **GeolocationPermissions** object. @@ -4647,7 +4584,7 @@ struct WebComponent { } } ``` -## HeaderV9 +## WebHeader Describes the request/response header returned by the **\** component. **System capability**: SystemCapability.Web.Webview.Core @@ -4657,7 +4594,7 @@ Describes the request/response header returned by the **\** component. | headerKey | string | Yes| Yes| Key of the request/response header. | | headerValue | string | Yes| Yes| Value of the request/response header.| -## HitTestTypeV9 +## WebHitTestType **System capability**: SystemCapability.Web.Webview.Core @@ -4680,7 +4617,7 @@ Provides the element information of the area being clicked. For details about th | Name| Type| Readable| Writable| Description| | ---- | ---- | ---- | ---- |---- | -| type | [HitTestTypeV9](#hittesttypev9) | Yes| No| Element type of the area being clicked.| +| type | [WebHitTestType](#webhittesttype) | Yes| No| Element type of the area being clicked.| | extra | string | Yes| No|Extra information of the area being clicked. If the area being clicked is an image or a link, the extra information is the URL of the image or link.| ## WebMessage @@ -4749,7 +4686,7 @@ import image from "@ohos.multimedia.image" struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); @State icon: image.PixelMap = undefined; - + build() { Column() { Button('getBackForwardEntries') 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 52414cedbeda0334a2df1e126931fc4d2f4d20a2..842bcfe96d3c9b9f2bbd19287efbf2879468eda3 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 @@ -21,6 +21,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController}) > **NOTE** > > Transition animation is not supported. +> Different **\** components on the same page must be bound to different **WebController**s. **Parameters** @@ -526,7 +527,7 @@ Sets whether to enable the multi-window permission. horizontalScrollBarAccess(horizontalScrollBar: boolean) -Sets whether to display the horizontal scrollbar, including the system default scrollbar and custom scrollbar. By default, the horizontal scrollbar is displayed. +Sets whether to display the horizontal scrollbar, including the default system scrollbar and custom scrollbar. By default, the horizontal scrollbar is displayed. **Parameters** @@ -577,7 +578,7 @@ Sets whether to display the horizontal scrollbar, including the system default s verticalScrollBarAccess(verticalScrollBar: boolean) -Sets whether to display the vertical scrollbar, including the system default scrollbar and custom scrollbar. By default, the vertical scrollbar is displayed. +Sets whether to display the vertical scrollbar, including the default system scrollbar and custom scrollbar. By default, the vertical scrollbar is displayed. **Parameters** @@ -745,36 +746,6 @@ Sets the user agent. } ``` -### webDebuggingAccess9+ - -webDebuggingAccess(webDebuggingAccess: boolean) - -Sets whether to enable web debugging. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------------------ | ------- | ---- | ----- | ------------- | -| webDebuggingAccess | boolean | Yes | false | Whether to enable web debugging.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - @State webDebuggingAccess: boolean = true - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - .webDebuggingAccess(this.webDebuggingAccess) - } - } - } - ``` - ### blockNetwork9+ blockNetwork(block: boolean) @@ -1211,6 +1182,7 @@ struct WebComponent { } ``` + ## Events The universal events are not supported. @@ -1301,7 +1273,7 @@ Called when this page is about to exit after the user refreshes or closes the pa @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1362,7 +1334,7 @@ Called when **confirm()** is invoked by the web page. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1422,7 +1394,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1482,7 +1454,7 @@ Called to notify the host application of a JavaScript console message. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1519,7 +1491,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1539,7 +1511,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void) -Called when an error occurs during web page loading. For better results, simplify the implementation logic in the callback. +Called when an error occurs during web page loading. For better results, simplify the implementation logic in the callback. This API is called when there is no network connection. **Parameters** @@ -1556,7 +1528,7 @@ Called when an error occurs during web page loading. For better results, simplif @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1600,7 +1572,7 @@ Called when an HTTP error (the response code is greater than or equal to 400) oc @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1651,7 +1623,7 @@ Called when the web page starts to be loaded. This API is called only for the ma @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1684,7 +1656,7 @@ Called when the web page loading is complete. This API takes effect only for the @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1716,7 +1688,7 @@ Called when the web page loading progress changes. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1748,7 +1720,7 @@ Called when the document title of the web page is changed. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1764,7 +1736,7 @@ Called when the document title of the web page is changed. onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) -Called when loading of the web page is complete. This API is used by an application to update the historical link it accessed.. +Called when loading of the web page is complete. This API is used by an application to update the historical link it accessed. **Parameters** @@ -1781,7 +1753,7 @@ Called when loading of the web page is complete. This API is used by an applicat @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1813,7 +1785,7 @@ Called when the rendering process exits abnormally. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'chrome://crash/', controller: this.controller }) @@ -1901,7 +1873,7 @@ Called to notify the **\** component of the URL of the loaded resource file @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1934,7 +1906,7 @@ Called when the display ratio of this page changes. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1950,7 +1922,7 @@ Called when the display ratio of this page changes. onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) -Called when the **\** component is about to access a URL. This API is used to determine whether to block the access. +Called when the **\** component is about to access a URL. This API is used to determine whether to block the access, which is allowed by default. **Parameters** @@ -1972,7 +1944,7 @@ Called when the **\** component is about to access a URL. This API is used @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2080,7 +2052,7 @@ Called when an HTTP authentication request is received. struct WebComponent { controller: WebController = new WebController() httpAuth: boolean = false - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2141,7 +2113,7 @@ Called when an SSL error occurs during resource loading. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2326,8 +2298,8 @@ Called when the scrollbar of the page scrolls. | Name | Type | Description | | ------- | ------ | ------------ | -| xOffset | number | Position of the scrollbar on the x-axis.| -| yOffset | number | Position of the scrollbar on the y-axis.| +| xOffset | number | Position of the scrollbar on the x-axis relative to the leftmost of the web page.| +| yOffset | number | Position of the scrollbar on the y-axis relative to the top of the web page.| **Example** @@ -2668,7 +2640,7 @@ Called when the old page is not displayed and the new page is about to be visibl onInterceptKeyEvent(callback: (event: KeyEvent) => boolean) -Called when the key event is intercepted, before being consumed by the Webview. +Called when the key event is intercepted and before it is consumed by the Webview. **Parameters** @@ -2695,7 +2667,7 @@ Called when the key event is intercepted, before being consumed by the Webview. Column() { Web({ src:'www.example.com', controller: this.controller }) .onInterceptKeyEvent((event) => { - if (event.keyCode == 2017 || event.keyCode == 2018) { + if (event.keyCode == 2017 || event.keyCode == 2018) { console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`) return true; } @@ -3162,18 +3134,6 @@ 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 the file selector. - -**Return value** - -| Type | Description | -| ------ | ---------- | -| string | Title of the file selector.| - ### getMode9+ getMode(): FileSelectorMode @@ -3611,7 +3571,7 @@ This API is deprecated since API version 9. You are advised to use [requestFocus @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('requestFocus') @@ -3646,7 +3606,7 @@ This API is deprecated since API version 9. You are advised to use [accessBackwa @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('accessBackward') @@ -3682,7 +3642,7 @@ This API is deprecated since API version 9. You are advised to use [accessForwar @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('accessForward') @@ -3725,7 +3685,7 @@ This API is deprecated since API version 9. You are advised to use [accessStep @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('forward') @@ -3797,40 +3757,6 @@ This API is deprecated since API version 9. You are advised to use [forward } ``` -### backOrForward9+ - -backOrForward(step: number): void - -Performs a specific number of steps forward or backward on the current page based on the history stack. No redirection will be performed if the corresponding page does not exist in the history stack. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ---- | ------ | ---- | ---- | ----------- | -| step | number | Yes | - | Number of the steps to take.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - @State step: number = -2 - - build() { - Column() { - Button('backOrForward') - .onClick(() => { - this.controller.backOrForward(this.step) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### deleteJavaScriptRegister(deprecated) deleteJavaScriptRegister(name: string) @@ -3854,7 +3780,7 @@ This API is deprecated since API version 9. You are advised to use [deleteJavaSc struct WebComponent { controller: WebController = new WebController() @State name: string = 'Object' - + build() { Column() { Button('deleteJavaScriptRegister') @@ -3871,7 +3797,7 @@ This API is deprecated since API version 9. You are advised to use [deleteJavaSc getHitTest(): HitTestType -Obtains the element type of the area being clicked. +Obtains the element type of the area being clicked. This API is deprecated since API version 9. You are advised to use [getHitTest9+](../apis/js-apis-webview.md#gethittest). @@ -3889,7 +3815,7 @@ This API is deprecated since API version 9. You are advised to use [getHitTest9+ -getHitTestValue(): HitTestValue - -Obtains the element information of the area being clicked. - -**Return value** - -| Type | Description | -| ------------------------------ | ---------- | -| [HitTestValue](#hittestvalue9) | Element information of the area being clicked.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getHitTestValue') - .onClick(() => { - let hitValue = this.controller.getHitTestValue() - console.log("hitType: " + hitValue.getType()) - console.log("extra: " + hitValue.getExtra()) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getWebId9+ -getWebId(): number - -Obtains the index value of this **\** component, which can be used for **\** component management. - -**Return value** - -| Type | Description | -| ------ | ------------ | -| number | Index value of the current **\** component.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getWebId') - .onClick(() => { - let id = this.controller.getWebId() - console.log("id: " + id) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### getTitle9+ getTitle(): string @@ -3989,7 +3848,7 @@ Obtains the title of the current web page. @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('getTitle') @@ -4003,72 +3862,6 @@ Obtains the title of the current web page. } ``` -### getPageHeight9+ -getPageHeight(): number - -Obtains the height of the current web page. - -**Return value** - -| Type | Description | -| ------ | ---------- | -| number | Height of the current web page.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getPageHeight') - .onClick(() => { - let pageHeight = this.controller.getPageHeight() - console.log("pageHeight: " + pageHeight) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getDefaultUserAgent9+ -getDefaultUserAgent(): string - -Obtains the default user agent of the current web page. - -**Return value** - -| Type | Description | -| ------ | ------- | -| string | Default user agent.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getDefaultUserAgent') - .onClick(() => { - let userAgent = this.controller.getDefaultUserAgent() - console.log("userAgent: " + userAgent) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### loadData(deprecated) loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) @@ -4099,7 +3892,7 @@ This API is deprecated since API version 9. You are advised to use [loadData @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('loadUrl') @@ -4172,7 +3965,7 @@ This API is deprecated since API version 9. You are advised to use [onActive9+< struct WebComponent { controller: WebController = new WebController() @State factor: number = 1 - + build() { Column() { Button('zoom') @@ -4249,72 +4042,6 @@ This API is deprecated since API version 9. You are advised to use [zoom9+< } ``` -### zoomIn9+ -zoomIn(): boolean - -Zooms in on this web page by 20%. - -**Return value** - -| Type | Description | -| ------- | ----------- | -| boolean | Operation result.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('zoomIn') - .onClick(() => { - let result = this.controller.zoomIn() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### zoomOut9+ -zoomOut(): boolean - -Zooms out of this web page by 20%. - -**Return value** - -| Type | Description | -| ------- | ----------- | -| boolean | Operation result.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('zoomOut') - .onClick(() => { - let result = this.controller.zoomOut() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### refresh(deprecated) refresh() @@ -4331,7 +4058,7 @@ This API is deprecated since API version 9. You are advised to use [refresh @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('refresh') @@ -4409,7 +4136,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava } - + ``` ### runJavaScript(deprecated) @@ -4489,7 +4216,7 @@ This API is deprecated since API version 9. You are advised to use [stop9+< @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('stop') @@ -4518,7 +4245,7 @@ This API is deprecated since API version 9. You are advised to use [clearHistory @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('clearHistory') @@ -4531,11 +4258,17 @@ This API is deprecated since API version 9. You are advised to use [clearHistory } ``` -### clearSslCache +### getCookieManager9+ + +getCookieManager(): WebCookie + +Obtains the cookie management object of the **\** component. -clearSslCache(): void +**Return value** -Clears the user operation corresponding to the SSL certificate error event recorded by the **\** component. +| Type | Description | +| --------- | ---------------------------------------- | +| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).| **Example** @@ -4548,9 +4281,9 @@ Clears the user operation corresponding to the SSL certificate error event recor build() { Column() { - Button('clearSslCache') + Button('getCookieManager') .onClick(() => { - this.controller.clearSslCache() + let cookieManager = this.controller.getCookieManager() }) Web({ src: 'www.example.com', controller: this.controller }) } @@ -4558,769 +4291,42 @@ Clears the user operation corresponding to the SSL certificate error event recor } ``` -### clearClientAuthenticationCache +## WebCookie -clearClientAuthenticationCache(): void +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. -Clears the user operation corresponding to the client certificate request event recorded by the **\** component. +### setCookie9+ +setCookie(url: string, value: string): boolean -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('clearClientAuthenticationCache') - .onClick(() => { - this.controller.clearClientAuthenticationCache() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### 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 }) - } - } - } - ``` - -### createWebMessagePorts9+ - -createWebMessagePorts(): Array\ - -Creates web message ports. - -**Return value** - - -| Type | Description | -| ---------------------------------------- | ---------- | -| Array\<[WebMessagePort](#webmessageport9)\> | List of web message ports.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - build() { - Column() { - Button('createWebMessagePorts') - .onClick(() => { - this.ports = this.controller.createWebMessagePorts() - console.log("createWebMessagePorts size:" + this.ports.length) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### postMessage9+ - -postMessage(options: { message: WebMessageEvent, uri: string}): void - -Sends a web message to an HTML5 window. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------- | ------------------------------------ | ---- | ---- | ----------------- | -| message | [WebMessageEvent](#webmessageevent9) | Yes | - | Message to send, including the data and message port.| -| uri | string | Yes | - | URI for receiving the message. | - -**Example** - - ```ts - // index.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - @State sendFromEts: string = 'Send this message from ets to HTML' - @State receivedFromHtml: string = 'Display received message send from HTML' - - build() { - Column() { - // Display the received HTML content. - Text(this.receivedFromHtml) - // Send the content in the text box to an HTML window. - TextInput({placeholder: 'Send this message from ets to HTML'}) - .onChange((value: string) => { - this.sendFromEts = value - }) - - // 1. Create two message ports. - Button('1.CreateWebMessagePorts') - .onClick(() => { - this.ports = this.controller.createWebMessagePorts() - console.log("createWebMessagePorts size:" + this.ports.length) - }) - - // 2. Send one of the message ports to the HTML side, which can then save and use the port. - Button('2.PostMessagePort') - .onClick(() => { - var sendPortArray = new Array(this.ports[1]) - var msgEvent = new WebMessageEvent() - msgEvent.setData("__init_port__") - msgEvent.setPorts(sendPortArray) - this.controller.postMessage({message: msgEvent, uri: "*"}) - }) - - // 3. Register a callback for the other message port on the application side. - Button('3.RegisterCallback') - .onClick(() => { - this.ports[0].onMessageEvent((result: string) => { - var msg = 'Got msg from HTML: ' + result - this.receivedFromHtml = msg - }) - }) - - // 4. Use the port on the application side to send messages to the message port that has been sent to the HTML. - Button('4.SendDataToHtml5') - .onClick(() => { - var msg = new WebMessageEvent() - msg.setData(this.sendFromEts) - this.ports[0].postMessageEvent(msg) - }) - Web({ src: $rawfile("index.html"), controller: this.controller }) - .javaScriptAccess(true) - .fileAccess(true) - } - } - } - - // index.html - - - -

Web Message Port Demo

-
-
-
-
-

display received message send from ets

- - - - - // index.js - var h5Port; - var output = document.querySelector('.output'); - window.addEventListener('message', function(event) { - if (event.data == '__init_port__') { - if(event.ports[0] != null) { - 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:' + event.data; - output.innerHTML = msg; - } - } - } - }) - - // 3. Use h5Port to send messages to the eTS side. - function PostMsgToEts(data) { - h5Port.postMessage(data) - } - ``` - -### getUrl9+ - -getUrl(): string - -Obtains the URL of this page. - -**Return value** - -| Type | Description | -| ------ | ----------- | -| string | URL of the current page.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Button('getUrl') - .onClick(() => { - console.log("url: " + this.controller.getUrl()) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### searchAllAsync9+ - -searchAllAsync(searchString: string): void - -Searches the web page for content that matches the keyword specified by **'searchString'** and highlights the matches on the page. This API returns the result asynchronously through [onSearchResultReceive](#onsearchresultreceive9). - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------------ | ------ | ---- | ---- | ------- | -| searchString | string | Yes | - | Search keyword.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - @State searchString: string = "xxx" - - build() { - Column() { - Button('searchString') - .onClick(() => { - this.controller.searchAllAsync(this.searchString) - }) - Button('clearMatches') - .onClick(() => { - this.controller.clearMatches() - }) - Button('searchNext') - .onClick(() => { - this.controller.searchNext(true) - }) - Web({ src: 'www.example.com', controller: this.controller }) - .onSearchResultReceive(ret => { - console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + - "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting) - }) - } - } - } - ``` - -### clearMatches9+ - -clearMatches(): void - -Clears the matches found through [searchAllAsync](#searchallasync9). - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('clearMatches') - .onClick(() => { - this.controller.clearMatches() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### searchNext9+ - -searchNext(forward: boolean): void - -Searches for and highlights the next match. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------- | ------- | ---- | ---- | ----------- | -| forward | boolean | Yes | - | Whether to search forward.| - - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('searchNext') - .onClick(() => { - this.controller.searchNext(true) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -## HitTestValue9+ -Implements the **HitTestValue** object. For the sample code, see [getHitTestValue](#gethittestvalue9). - -### getType9+ -getType(): HitTestType - -Obtains the element type of the area being clicked. - -**Return value** - -| Type | Description | -| ------------------------------- | ------------- | -| [HitTestType](#hittesttype)| Element type of the area being clicked.| - -### getExtra9+ -getExtra(): string - -Obtains the extra information of the area being clicked. If the area being clicked is an image or a link, the extra information is the URL of the image or link. - -**Return value** - -| Type | Description | -| ------ | ------------ | -| string | Extra information of the area being clicked.| - - -## WebCookie - -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(url: string, value: string): boolean - -Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ----- | ------ | ---- | ---- | ----------------- | -| url | string | Yes | - | URL of the cookie to set.| -| value | string | Yes | - | Value of the cookie to set. | - -**Return value** - -| Type | Description | -| ------- | ------------- | -| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('setCookie') - .onClick(() => { - let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b") - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getCookie9+ -getCookie(url: string): string - -Obtains the cookie value corresponding to the specified URL. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ---- | ------ | ---- | ---- | ----------------- | -| url | string | Yes | - | URL of the cookie value to obtain.| - -**Return value** - -| Type | Description | -| ------ | ----------------- | -| string | Cookie value corresponding to the specified URL.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getCookie') - .onClick(() => { - let value = web_webview.WebCookieManager.getCookie('www.example.com') - console.log("value: " + value) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### setCookie9+ -setCookie(url: string, value: string): boolean - -Sets a cookie value for the specified URL. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ----- | ------ | ---- | ---- | ----------------- | -| url | string | Yes | - | URL of the cookie to set.| -| value | string | Yes | - | Cookie value to set. | - -**Return value** - -| Type | Description | -| ------- | ------------- | -| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('setCookie') - .onClick(() => { - let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b') - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### saveCookieSync9+ -saveCookieSync(): boolean - -Saves the cookies in the memory to the drive. This API returns the result synchronously. - -**Return value** - -| Type | Description | -| ------- | -------------------- | -| boolean | Operation result.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('saveCookieSync') - .onClick(() => { - let result = web_webview.WebCookieManager.saveCookieSync() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` -### saveCookieAsync9+ -saveCookieAsync(): Promise\ - -Saves the cookies in the memory to the drive. This API uses a promise to return the value. - -**Return value** - -| Type | Description | -| ----------------- | --------------------------- | -| Promise\ | Promise used to return the result.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('saveCookieAsync') - .onClick(() => { - web_webview.WebCookieManager.saveCookieAsync() - .then (function(result) { - console.log("result: " + result) - }) - .catch(function(error) { - console.error("error: " + error) - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### saveCookieAsync9+ -saveCookieAsync(callback: AsyncCallback\): void - -Saves the cookies in the memory to the drive. This API uses an asynchronous callback to return the result. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| -------- | ----------------------- | ---- | ---- | ---------------------------- | -| callback | AsyncCallback\ | Yes | - | Callback used to return the operation result.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('saveCookieAsync') - .onClick(() => { - web_webview.WebCookieManager.saveCookieAsync(function(result) { - console.log("result: " + result) - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### isCookieAllowed9+ -isCookieAllowed(): boolean - -Checks whether the **WebCookieManager** instance has the permission to send and receive cookies. - -**Return value** - -| Type | Description | -| ------- | ------------------- | -| boolean | Whether the **WebCookieManager** instance has the permission to send and receive cookies.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('isCookieAllowed') - .onClick(() => { - let result = web_webview.WebCookieManager.isCookieAllowed() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### putAcceptCookieEnabled9+ -putAcceptCookieEnabled(accept: boolean): void - -Sets whether the **WebCookieManager** instance has the permission to send and receive cookies. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------ | ------- | ---- | ---- | --------------------- | -| accept | boolean | Yes | - | Whether the **WebCookieManager** instance has the permission to send and receive cookies.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('putAcceptCookieEnabled') - .onClick(() => { - web_webview.WebCookieManager.putAcceptCookieEnabled(false) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### isThirdPartyCookieAllowed9+ -isThirdCookieAllowed(): boolean - -Checks whether the **WebCookieManager** instance has the permission to send and receive third-party cookies. - -**Return value** - -| Type | Description | -| ------- | ---------------------- | -| boolean | Whether the **WebCookieManager** instance has the permission to send and receive third-party cookies.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('isThirdPartyCookieAllowed') - .onClick(() => { - let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### putAcceptThirdPartyCookieEnabled9+ -putAcceptThirdPartyCookieEnabled(accept: boolean): void - -Sets whether the **WebCookieManager** instance has the permission to send and receive third-party cookies. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------ | ------- | ---- | ---- | ------------------------ | -| accept | boolean | Yes | - | Whether the **WebCookieManager** instance has the permission to send and receive third-party cookies.| - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('putAcceptThirdPartyCookieEnabled') - .onClick(() => { - web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` +Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise. -### existCookie9+ -existCookie(): boolean +**Parameters** -Checks whether cookies exist. +| Name | Type | Mandatory | Default Value | Description | +| ----- | ------ | ---- | ---- | ----------------- | +| url | string | Yes | - | URL of the cookie to set.| +| value | string | Yes | - | Value of the cookie to set. | **Return value** -| Type | Description | -| ------- | ----------- | -| boolean | Whether cookies exist.| +| Type | Description | +| ------- | ------------- | +| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| **Example** ```ts // xxx.ets - import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { - Button('existCookie') + Button('setCookie') .onClick(() => { - let result = web_webview.WebCookieManager.existCookie() + let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b") console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller }) @@ -5328,54 +4334,32 @@ Checks whether cookies exist. } } ``` +### saveCookieSync9+ +saveCookieSync(): boolean -### deleteEntireCookie9+ -deleteEntireCookie(): void - -Deletes all cookies. - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('deleteEntireCookie') - .onClick(() => { - web_webview.WebCookieManager.deleteEntireCookie() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` +Saves the cookies in the memory to the drive. This API returns the result synchronously. -### deleteSessionCookie9+ -deleteSessionCookie(): void +**Return value** -Deletes all session cookies. +| Type | Description | +| ------- | -------------------- | +| boolean | Operation result.| **Example** ```ts // xxx.ets - import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { - Button('deleteSessionCookie') + Button('saveCookieSync') .onClick(() => { - web_webview.WebCookieManager.deleteSessionCookie() + let result = this.controller.getCookieManager().saveCookieSync() + console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller }) } @@ -5466,324 +4450,6 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API. | On | The web dark mode is enabled. | | Auto | The web dark mode setting follows the system settings. | -## WebAsyncController - -Implements a **WebAsyncController** object, which can be used to control the behavior of a **\** component with asynchronous callbacks. A **WebAsyncController **object controls one **\** component. - -### Creating an Object - -``` -webController: WebController = new WebController(); -webAsyncController: WebAsyncController = new WebAsyncController(webController); -``` - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\): void - -Stores this web page. This API uses an asynchronous callback to return the result. - -**Parameters** - -| Name | Type | Mandatory | Description | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | Yes | Save path. The value cannot be null. | -| autoName | boolean | Yes | Whether to automatically generate a file name.
The value **false** means not to automatically generate a file name.
The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory. | -| callback | AsyncCallback\ | Yes | Callback used to return the save path if the operation is successful and null otherwise. | - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller) - webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean): Promise\ - -Stores this web page. This API uses a promise to return the result. - -**Parameters** - -| Name | Type | Mandatory | Description | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | Yes | Save path. The value cannot be null. | -| autoName | boolean | Yes | Whether to automatically generate a file name.
The value **false** means not to automatically generate a file name.
The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory. | - -**Return value** - -| Type | Description | -| --------------- | -------------------------------- | -| Promise\ | Promise used to return the save path if the operation is successful and null otherwise. | - -**Example** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController(); - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller); - webAsyncController.storeWebArchive("/data/storage/el2/base/", true) - .then(filename => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -## WebMessagePort9+ - -Implements a **WebMessagePort** instance, which can be used to send and receive messages. - -### close9+ -close(): void - -Disables this message port. - -### postMessageEvent9+ -postMessageEvent(message: WebMessageEvent): void - -Sends messages. For the complete sample code, see [postMessage](#postmessage9). - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------- | ------------------------------------ | ---- | ---- | ------- | -| message | [WebMessageEvent](#webmessageevent9) | Yes | - | Message to send.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('postMessageEvent') - .onClick(() => { - var msg = new WebMessageEvent() - msg.setData("post message from ets to html5") - this.ports[0].postMessageEvent(msg) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### onMessageEvent9+ -onMessageEvent(callback: (result: string) => void): void - -Registers a callback to receive messages from an HTML5 page. For the complete sample code, see [postMessage](#postmessage9). - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| -------- | -------- | ---- | ---- | ---------- | -| callback | function | Yes | - | Callback for receiving messages.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('onMessageEvent') - .onClick(() => { - this.ports[0].onMessageEvent((result: string) => { - console.log("received message from html5, on message:" + result); - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - - -## WebMessageEvent9+ - -Implements the **WebMessageEvent** object to encapsulate the message and port. - -### getData9+ -getData(): string - -Obtains the messages stored in this object. - -**Return value** - -| Type | Description | -| ------ | -------------- | -| string | Message stored in the object of this type.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - build() { - Column() { - Button('getPorts') - .onClick(() => { - var msgEvent = new WebMessageEvent(); - msgEvent.setData("message event data") - var messageData = msgEvent.getData() - console.log("message is:" + messageData) - }) - } - } - } - ``` - -### setData9+ -setData(data: string): void - -Sets the message in this object. For the complete sample code, see [postMessage](#postmessage9). - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ---- | ------ | ---- | ---- | ------- | -| data | string | Yes | - | Message to send.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('setData') - .onClick(() => { - var msg = new WebMessageEvent() - msg.setData("post message from ets to HTML5") - this.ports[0].postMessageEvent(msg) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` -### getPorts9+ -getPorts(): Array\ - -Obtains the message port stored in this object. - -**Return value** - -| Type | Description | -| ---------------------------------------- | ---------------- | -| Array\<[WebMessagePort](#webmessageport9)\> | Message port stored in the object of this type.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - ports: WebMessagePort[] = null - build() { - Column() { - Button('getPorts') - .onClick(() => { - var sendPortArray = new Array(this.ports[0]) - var msgEvent = new WebMessageEvent() - msgEvent.setPorts(sendPortArray) - var getPorts = msgEvent.getPorts() - console.log("Ports is:" + getPorts) - }) - } - } - } - ``` - -### setPorts9+ -setPorts(ports: Array\): void - -Sets the message port in this object. For the complete sample code, see [postMessage](#postmessage9). - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ----- | ---------------------------------------- | ---- | ---- | --------- | -| ports | Array\<[WebMessagePort](#webmessageport9)\> | Yes | - | Message port.| - -**Example** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('setPorts') - .onClick(() => { - var sendPortArray = new Array(this.ports[1]) - var msgEvent = new WebMessageEvent() - msgEvent.setData("__init_ports__") - msgEvent.setPorts(sendPortArray) - this.controller.postMessage({message: msgEvent, uri: "*"}) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ## DataResubmissionHandler9+ Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data. diff --git a/en/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md b/en/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md new file mode 100644 index 0000000000000000000000000000000000000000..806f1270619d8aec7e7efcf95f41b7a45cc602e8 --- /dev/null +++ b/en/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md @@ -0,0 +1,467 @@ +# Web Subsystem Changelog + +Compared with earlier versions, OpenHarmony 3.2.10.7 has the following API changes in its web subsystem: + +## cl.web.1 HitTestTypeV9 Name Change + +Renamed the enum class **HitTestTypeV9** **WebHitTestType** to meet the naming conventions. + +**Change Impact** + +The enum class **HitTestTypeV9** and APIs that use **HitTestTypeV9** as a parameter or return value cannot be used in OpenHarmony 3.2.10.7 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + enum HitTestTypeV9 + +- Before change: + + ```ts + enum HitTestTypeV9 + ``` + +- After change: + + ```ts + enum WebHitTestType + ``` + +**Adaptation Guide** + +Replace **HitTestTypeV9** with **WebHitTestType**. + +## cl.web.2 HeaderV9 Name Change + +Renamed the struct **HeaderV9** **WebHeader** to meet the naming conventions. + +**Change Impact** + +The struct **HeaderV9** and APIs that use **HeaderV9** as a parameter or return value cannot be used in OpenHarmony 3.2.10.7 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + interface HeaderV9 + +- Before change: + + ```ts + interface HeaderV9 + ``` + +- After change: + + ```ts + interface WebHeader + ``` + +**Adaptation Guide** + +Replace **HeaderV9** with **WebHeader**. + +## cl.web.3 Member Change of HitTestValue + +Rename the member variable **HitTestTypeV9** in the **HitTestValue** struct **WebHitTestType** to meet the naming conventions. + +**Change Impact** + +The struct **HitTestValue** and APIs that use **HitTestValue** as a parameter or return value cannot be used in OpenHarmony 3.2.10.7 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + interface HitTestValue + +- Before change: + + ```ts + interface HitTestValue { + + /** + * Get the hit test type. + * + * @since 9 + */ + type: HitTestTypeV9; + + /** + * Get the hit test extra data. + * + * @since 9 + */ + extra: string; + } + ``` + +- After change: + + ```ts + interface HitTestValue { + + /** + * Get the hit test type. + * + * @since 9 + */ + type: WebHitTestType; + + /** + * Get the hit test extra data. + * + * @since 9 + */ + extra: string; + } + ``` + +**Adaptation Guide** + +Replace **HitTestTypeV9** with **WebHitTestType**. + +## cl.web.4 Parameter Type Change of loadUrl + +Changed the type of the **headers** parameter in **loadUrl** to **WebHeader** to meet the naming conventions. + +**Change Impact** + +The **loadUrl** API that uses the **headers** parameter cannot be used in OpenHarmony 3.2.10.7 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + loadUrl(url: string | Resource, headers?: Array\): void + +- Before change: + + ```ts + loadUrl(url: string | Resource, headers?: Array): void + ``` + +- After change: + + ```ts + loadUrl(url: string | Resource, headers?: Array): void + ``` + +**Adaptation Guide** + +Change the type of the **headers** parameter in **loadUrl** from **HeaderV9** to **WebHeader**. + +## cl.web.5 Return Value Type Change of getHitTest + +Changed the return value type of the **getHitTest** API to **WebHitTest** to meet the naming conventions. + +**Change Impact** + +The **getHitTest** API cannot be used in OpenHarmony 3.2.10.7 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + getHitTest(): HitTestTypeV9 + +- Before change: + + ```ts + getHitTest(): HitTestTypeV9 + ``` + +- After change: + + ```ts + getHitTest(): WebHitTestType + ``` + +**Adaptation Guide** + +Change the return value type of the **getHitTest** API from **HitTestTypeV9** to **WebHitTestType**. + +## cl.web.6 Moving of the WebMessagePort Class + +Moved the **WebMessagePort** class to **@ohos.web.webview.d.ts** and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. In addition, be mindful of the error codes now that the APIs in the class support error code processing. + +**Key API/Component Changes** + +- Involved APIs: + + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + +- Before change: + + ```ts + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + ``` + +- After change: + + ```ts + postMessageEvent(message: WebMessage): void; + onMessageEvent(callback: (result: WebMessage) => void): void; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **WebMessagePort** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.7 Moving of the HitTestValue Class + +Moved the **HitTestValue** class to **@ohos.web.webview.d.ts**; changed **HitTestValue** from a class to an API; changed the **getType** and **getExtra** from APIs to attributes. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. + +**Key API/Component Changes** + +- Involved APIs: + + getType(): HitTestType; + getExtra(): string; + +- Before change: + + ```ts + getType(): HitTestType; + getExtra(): string; + ``` + +- After change: + + ```ts + type: WebHitTestType; + extra: string; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **HitTestValue** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.8 Moving of API Version 9 APIs Under WebCookie + +Moved APIs of API version 9 in the **WebCookie** class to **web.webview.webview.WebCookieManager** +and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. In addition, be mindful of the error codes now that the APIs in the class support error code processing. +The APIs in the class are static. + +**Key API/Component Changes** + +- Involved APIs: + + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + +- Before change: + + ```ts + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + ``` + +- After change: + + ```ts + static isCookieAllowed(): boolean; + static isThirdPartyCookieAllowed(): boolean; + static putAcceptCookieEnabled(accept: boolean): void; + static putAcceptThirdPartyCookieEnabled(accept: boolean): void; + static setCookie(url: string, value: string): void; + static saveCookieAsync(): Promise; + static saveCookieAsync(callback: AsyncCallback): void; + static getCookie(url: string): string; + static existCookie(): boolean; + static deleteEntireCookie(): void; + static deleteSessionCookie(): void; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **WebCookie** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.9 Moving of API Version 9 APIs Under WebController + +Moved APIs of API version 9 in the **WebController** class to **web.webview.webview.WebviewController** and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. In addition, be mindful of the error codes now that the APIs in the class support error code processing. +The **getDefaultUserAgent** API is renamed **getUserAgent**. + +**Key API/Component Changes** + +- Involved APIs: + + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array\; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + +- Before change: + + ```ts + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +- After change: + + ```ts + zoomIn(): void; + zoomOut(): void; + createWebMessagePorts(): Array; + postMessage(name: string, ports: Array, uri: string): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **WebController** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.10 Moving of the WebAsyncController Class + +Moved the APIs in the **WebAsyncController** class to the **web.webview.webview.WebviewController** class and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, pay attention to error code processing. + +**Key API/Component Changes** + +- Involved APIs: + + storeWebArchive(baseName: string, autoName: boolean): Promise\; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback\): void; + +- Before change: + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +- After change: + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +**Adaptation Guide** + +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() { + Button('saveWebArchive') + .onClick(() => { + try { + this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => { + if (error) { + console.info(`save web archive error: ` + JSON.stringify(error)) + return; + } + if (filename != null) { + console.info(`save web archive success: ${filename}`) + } + }); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` diff --git a/en/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md b/en/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md new file mode 100644 index 0000000000000000000000000000000000000000..44380d11950e3f018b719776edf08964d6b4c0af --- /dev/null +++ b/en/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md @@ -0,0 +1,467 @@ +# Web Subsystem Changelog + +Compared with earlier versions, OpenHarmony 4.0.3.2 has the following API changes in its web subsystem: + +## cl.web.1 HitTestTypeV9 Name Change + +Renamed the enum class **HitTestTypeV9** **WebHitTestType** to meet the naming conventions. + +**Change Impact** + +The enum class **HitTestTypeV9** and APIs that use **HitTestTypeV9** as a parameter or return value cannot be used in OpenHarmony 4.0.3.2 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + enum HitTestTypeV9 + +- Before change: + + ```ts + enum HitTestTypeV9 + ``` + +- After change: + + ```ts + enum WebHitTestType + ``` + +**Adaptation Guide** + +Replace **HitTestTypeV9** with **WebHitTestType**. + +## cl.web.2 HeaderV9 Name Change + +Renamed the struct **HeaderV9** **WebHeader** to meet the naming conventions. + +**Change Impact** + +The struct **HeaderV9** and APIs that use **HeaderV9** as a parameter or return value cannot be used in OpenHarmony 4.0.3.2 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + interface HeaderV9 + +- Before change: + + ```ts + interface HeaderV9 + ``` + +- After change: + + ```ts + interface WebHeader + ``` + +**Adaptation Guide** + +Replace **HeaderV9** with **WebHeader**. + +## cl.web.3 Member Change of HitTestValue + +Rename the member variable **HitTestTypeV9** in the **HitTestValue** struct **WebHitTestType** to meet the naming conventions. + +**Change Impact** + +The struct **HitTestValue** and APIs that use **HitTestValue** as a parameter or return value cannot be used in OpenHarmony 4.0.3.2 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + interface HitTestValue + +- Before change: + + ```ts + interface HitTestValue { + + /** + * Get the hit test type. + * + * @since 9 + */ + type: HitTestTypeV9; + + /** + * Get the hit test extra data. + * + * @since 9 + */ + extra: string; + } + ``` + +- After change: + + ```ts + interface HitTestValue { + + /** + * Get the hit test type. + * + * @since 9 + */ + type: WebHitTestType; + + /** + * Get the hit test extra data. + * + * @since 9 + */ + extra: string; + } + ``` + +**Adaptation Guide** + +Replace **HitTestTypeV9** with **WebHitTestType**. + +## cl.web.4 Parameter Type Change of loadUrl + +Changed the type of the **headers** parameter in **loadUrl** to **WebHeader** to meet the naming conventions. + +**Change Impact** + +The **loadUrl** API that uses the **headers** parameter cannot be used in OpenHarmony 4.0.3.2 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + loadUrl(url: string | Resource, headers?: Array\): void + +- Before change: + + ```ts + loadUrl(url: string | Resource, headers?: Array): void + ``` + +- After change: + + ```ts + loadUrl(url: string | Resource, headers?: Array): void + ``` + +**Adaptation Guide** + +Change the type of the **headers** parameter in **loadUrl** from **HeaderV9** to **WebHeader**. + +## cl.web.5 Return Value Type Change of getHitTest + +Changed the return value type of the **getHitTest** API to **WebHitTest** to meet the naming conventions. + +**Change Impact** + +The **getHitTest** API cannot be used in OpenHarmony 4.0.3.2 and later versions. + +**Key API/Component Changes** + +- Involved APIs: + + getHitTest(): HitTestTypeV9 + +- Before change: + + ```ts + getHitTest(): HitTestTypeV9 + ``` + +- After change: + + ```ts + getHitTest(): WebHitTestType + ``` + +**Adaptation Guide** + +Change the return value type of the **getHitTest** API from **HitTestTypeV9** to **WebHitTestType**. + +## cl.web.6 Moving of the WebMessagePort Class + +Moved the **WebMessagePort** class to **@ohos.web.webview.d.ts** and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. In addition, be mindful of the error codes now that the APIs in the class support error code processing. + +**Key API/Component Changes** + +- Involved APIs: + + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + +- Before change: + + ```ts + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + ``` + +- After change: + + ```ts + postMessageEvent(message: WebMessage): void; + onMessageEvent(callback: (result: WebMessage) => void): void; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **WebMessagePort** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.7 Moving of the HitTestValue Class + +Moved the **HitTestValue** class to **@ohos.web.webview.d.ts**; changed **HitTestValue** from a class to an API; changed the **getType** and **getExtra** from APIs to attributes. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. + +**Key API/Component Changes** + +- Involved APIs: + + getType(): HitTestType; + getExtra(): string; + +- Before change: + + ```ts + getType(): HitTestType; + getExtra(): string; + ``` + +- After change: + + ```ts + type: WebHitTestType; + extra: string; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **HitTestValue** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.8 Moving of API Version 9 APIs Under WebCookie + +Moved APIs of API version 9 in the **WebCookie** class to **web.webview.webview.WebCookieManager** +and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. In addition, be mindful of the error codes now that the APIs in the class support error code processing. +The APIs in the class are static. + +**Key API/Component Changes** + +- Involved APIs: + + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + +- Before change: + + ```ts + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + ``` + +- After change: + + ```ts + static isCookieAllowed(): boolean; + static isThirdPartyCookieAllowed(): boolean; + static putAcceptCookieEnabled(accept: boolean): void; + static putAcceptThirdPartyCookieEnabled(accept: boolean): void; + static setCookie(url: string, value: string): void; + static saveCookieAsync(): Promise; + static saveCookieAsync(callback: AsyncCallback): void; + static getCookie(url: string): string; + static existCookie(): boolean; + static deleteEntireCookie(): void; + static deleteSessionCookie(): void; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **WebCookie** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.9 Moving of API Version 9 APIs Under WebController + +Moved APIs of API version 9 in the **WebController** class to **web.webview.webview.WebviewController** and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, note that the **d.ts** file storage location and the name of the module to be imported are changed. In addition, be mindful of the error codes now that the APIs in the class support error code processing. +The **getDefaultUserAgent** API is renamed **getUserAgent**. + +**Key API/Component Changes** + +- Involved APIs: + + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array\; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + +- Before change: + + ```ts + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +- After change: + + ```ts + zoomIn(): void; + zoomOut(): void; + createWebMessagePorts(): Array; + postMessage(name: string, ports: Array, uri: string): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +**Adaptation Guide** + +Instead of importing APIs from the original **WebController** class, import APIs from **@ohos.web.webview** as follows: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.10 Moving of the WebAsyncController Class + +Moved the APIs in the **WebAsyncController** class to the **web.webview.webview.WebviewController** class and added error throwing. + +**Change Impact** + +If your application is developed based on earlier versions, pay attention to error code processing. + +**Key API/Component Changes** + +- Involved APIs: + + storeWebArchive(baseName: string, autoName: boolean): Promise\; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback\): void; + +- Before change: + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +- After change: + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +**Adaptation Guide** + +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() { + Button('saveWebArchive') + .onClick(() => { + try { + this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => { + if (error) { + console.info(`save web archive error: ` + JSON.stringify(error)) + return; + } + if (filename != null) { + console.info(`save web archive success: ${filename}`) + } + }); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ```