Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
You need to sign in or sign up before continuing.
提交 66d129cb 编写于 作者: E ester.zhou
浏览文件
操作

update docs (14561) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 8984c99c
隐藏空白更改
内联 并排
Showing with 1098 addition and 1561 deletion
en/application-dev/reference/apis/js-apis-webview.md
浏览文件 @ 66d129cb
...@@ -249,7 +249,7 @@ export default class MainAbility extends Ability { ...@@ -249,7 +249,7 @@ export default class MainAbility extends Ability {
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview';
@Entry @Entry
@Component @Component
...@@ -266,7 +266,7 @@ struct WebComponent { ...@@ -266,7 +266,7 @@ struct WebComponent {
### loadUrl ### loadUrl
loadUrl(url: string | Resource, headers?: Array\<HeaderV9>): void loadUrl(url: string | Resource, headers?: Array\<WebHeader>): void
Loads a specified URL. Loads a specified URL.
...@@ -277,7 +277,7 @@ Loads a specified URL. ...@@ -277,7 +277,7 @@ Loads a specified URL.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ------- | ---------------- | ---- | :-------------------- | | ------- | ---------------- | ---- | :-------------------- |
| url | string \| Resource | Yes | URL to load. | | 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** **Error codes**
...@@ -305,6 +305,7 @@ struct WebComponent { ...@@ -305,6 +305,7 @@ struct WebComponent {
Button('loadUrl') Button('loadUrl')
.onClick(() => { .onClick(() => {
try { try {
// The URL to be loaded is of the string type.
this.controller.loadUrl('www.example.com'); this.controller.loadUrl('www.example.com');
} catch (error) { } catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
...@@ -316,6 +317,69 @@ struct WebComponent { ...@@ -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
<!-- xxx.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
```
### loadData ### loadData
loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void
...@@ -790,7 +854,7 @@ struct WebComponent { ...@@ -790,7 +854,7 @@ struct WebComponent {
### getHitTest ### getHitTest
getHitTest(): HitTestTypeV9 getHitTest(): WebHitTestType
Obtains the element type of the area being clicked. Obtains the element type of the area being clicked.
...@@ -800,7 +864,7 @@ Obtains the element type of the area being clicked. ...@@ -800,7 +864,7 @@ Obtains the element type of the area being clicked.
| Type | Description | | Type | Description |
| ------------------------------------------------------------ | ---------------------- | | ------------------------------------------------------------ | ---------------------- |
| [HitTestTypeV9](#hittesttypev9)| Element type of the area being clicked.| | [WebHitTestType](#webhittesttype)| Element type of the area being clicked.|
**Error codes** **Error codes**
...@@ -987,7 +1051,7 @@ Executes a JavaScript script. This API uses a promise to return the script execu ...@@ -987,7 +1051,7 @@ Executes a JavaScript script. This API uses a promise to return the script execu
| Type | Description | | Type | Description |
| --------------- | --------------------------------------------------- | | --------------- | --------------------------------------------------- |
| Promise\<string> | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed| | Promise\<string> | Promise used to return the result. Returns **null** if the JavaScript script fails to be executed|
**Error codes** **Error codes**
...@@ -1473,7 +1537,7 @@ struct WebComponent { ...@@ -1473,7 +1537,7 @@ struct WebComponent {
this.ports = this.controller.createWebMessagePorts(); this.ports = this.controller.createWebMessagePorts();
// 2. Register a callback on a message port (for example, port 1) on the application side. // 2. Register a callback on a message port (for example, port 1) on the application side.
this.ports[1].onMessageEvent((result: web_webview.WebMessage) => { this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
var msg = 'Got msg from HTML:'; let msg = 'Got msg from HTML:';
if (typeof(result) == "string") { if (typeof(result) == "string") {
console.log("received string message from html5, string is:" + result); console.log("received string message from html5, string is:" + result);
msg = msg + result; msg = msg + result;
...@@ -1501,7 +1565,7 @@ struct WebComponent { ...@@ -1501,7 +1565,7 @@ struct WebComponent {
.onClick(() => { .onClick(() => {
try { try {
if (this.ports && this.ports[1]) { if (this.ports && this.ports[1]) {
this.ports[1].postMessageEvent("post message from ets to HTML"); this.ports[1].postMessageEvent("this.sendFromEts");
} else { } else {
console.error(`ports is null, Please initialize first`); console.error(`ports is null, Please initialize first`);
} }
...@@ -3540,7 +3604,7 @@ Deletes all data in the specified origin. ...@@ -3540,7 +3604,7 @@ Deletes all data in the specified origin.
| Name| Type | Mandatory| Description | | 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** **Error codes**
...@@ -4101,7 +4165,7 @@ Checks whether any saved HTTP authentication credentials exist. This API returns ...@@ -4101,7 +4165,7 @@ Checks whether any saved HTTP authentication credentials exist. This API returns
| Type | Description | | 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** **Example**
...@@ -4165,133 +4229,6 @@ struct WebComponent { ...@@ -4165,133 +4229,6 @@ struct WebComponent {
} }
``` ```
## WebAsyncController
Implements a **WebAsyncController** object, which can be used to control the behavior of a **\<Web>** component with asynchronous callbacks. A **WebAsyncController **object controls one **\<Web>** 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 })
}
}
}
```
### constructor<sup>9+</sup>
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.|
### storeWebArchive<sup>9+</sup>
storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\<string>): 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.<br>The value **false** means not to automatically generate a file name.<br>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\<string> | 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 })
}
}
}
```
### storeWebArchive<sup>9+</sup>
storeWebArchive(baseName: string, autoName: boolean): Promise\<string>
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.<br>The value **false** means not to automatically generate a file name.<br>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\<string> | 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 ## GeolocationPermissions
Implements a **GeolocationPermissions** object. Implements a **GeolocationPermissions** object.
...@@ -4647,7 +4584,7 @@ struct WebComponent { ...@@ -4647,7 +4584,7 @@ struct WebComponent {
} }
} }
``` ```
## HeaderV9 ## WebHeader
Describes the request/response header returned by the **\<Web>** component. Describes the request/response header returned by the **\<Web>** component.
**System capability**: SystemCapability.Web.Webview.Core **System capability**: SystemCapability.Web.Webview.Core
...@@ -4657,7 +4594,7 @@ Describes the request/response header returned by the **\<Web>** component. ...@@ -4657,7 +4594,7 @@ Describes the request/response header returned by the **\<Web>** component.
| headerKey | string | Yes| Yes| Key of the request/response header. | | headerKey | string | Yes| Yes| Key of the request/response header. |
| headerValue | string | Yes| Yes| Value of the request/response header.| | headerValue | string | Yes| Yes| Value of the request/response header.|
## HitTestTypeV9 ## WebHitTestType
**System capability**: SystemCapability.Web.Webview.Core **System capability**: SystemCapability.Web.Webview.Core
...@@ -4680,7 +4617,7 @@ Provides the element information of the area being clicked. For details about th ...@@ -4680,7 +4617,7 @@ Provides the element information of the area being clicked. For details about th
| Name| Type| Readable| Writable| Description| | 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.| | 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 ## WebMessage
...@@ -4749,7 +4686,7 @@ import image from "@ohos.multimedia.image" ...@@ -4749,7 +4686,7 @@ import image from "@ohos.multimedia.image"
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
@State icon: image.PixelMap = undefined; @State icon: image.PixelMap = undefined;
build() { build() {
Column() { Column() {
Button('getBackForwardEntries') Button('getBackForwardEntries')
......
en/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 66d129cb
...@@ -21,6 +21,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController}) ...@@ -21,6 +21,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
> **NOTE** > **NOTE**
> >
> Transition animation is not supported. > Transition animation is not supported.
> Different **\<Web>** components on the same page must be bound to different **WebController**s.
**Parameters** **Parameters**
...@@ -526,7 +527,7 @@ Sets whether to enable the multi-window permission. ...@@ -526,7 +527,7 @@ Sets whether to enable the multi-window permission.
horizontalScrollBarAccess(horizontalScrollBar: boolean) 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** **Parameters**
...@@ -577,7 +578,7 @@ Sets whether to display the horizontal scrollbar, including the system default s ...@@ -577,7 +578,7 @@ Sets whether to display the horizontal scrollbar, including the system default s
verticalScrollBarAccess(verticalScrollBar: boolean) 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** **Parameters**
...@@ -745,36 +746,6 @@ Sets the user agent. ...@@ -745,36 +746,6 @@ Sets the user agent.
} }
``` ```
### webDebuggingAccess<sup>9+</sup>
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)
}
}
}
```
### blockNetwork<sup>9+</sup> ### blockNetwork<sup>9+</sup>
blockNetwork(block: boolean) blockNetwork(block: boolean)
...@@ -1211,6 +1182,7 @@ struct WebComponent { ...@@ -1211,6 +1182,7 @@ struct WebComponent {
} }
``` ```
## Events ## Events
The universal events are not supported. 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 ...@@ -1301,7 +1273,7 @@ Called when this page is about to exit after the user refreshes or closes the pa
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1362,7 +1334,7 @@ Called when **confirm()** is invoked by the web page. ...@@ -1362,7 +1334,7 @@ Called when **confirm()** is invoked by the web page.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1422,7 +1394,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul ...@@ -1422,7 +1394,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1482,7 +1454,7 @@ Called to notify the host application of a JavaScript console message. ...@@ -1482,7 +1454,7 @@ Called to notify the host application of a JavaScript console message.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1519,7 +1491,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp ...@@ -1519,7 +1491,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1539,7 +1511,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp ...@@ -1539,7 +1511,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void) 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** **Parameters**
...@@ -1556,7 +1528,7 @@ Called when an error occurs during web page loading. For better results, simplif ...@@ -1556,7 +1528,7 @@ Called when an error occurs during web page loading. For better results, simplif
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) 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 ...@@ -1600,7 +1572,7 @@ Called when an HTTP error (the response code is greater than or equal to 400) oc
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) 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 ...@@ -1651,7 +1623,7 @@ Called when the web page starts to be loaded. This API is called only for the ma
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) 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 ...@@ -1684,7 +1656,7 @@ Called when the web page loading is complete. This API takes effect only for the
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1716,7 +1688,7 @@ Called when the web page loading progress changes. ...@@ -1716,7 +1688,7 @@ Called when the web page loading progress changes.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1748,7 +1720,7 @@ Called when the document title of the web page is changed. ...@@ -1748,7 +1720,7 @@ Called when the document title of the web page is changed.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1764,7 +1736,7 @@ Called when the document title of the web page is changed. ...@@ -1764,7 +1736,7 @@ Called when the document title of the web page is changed.
onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) 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** **Parameters**
...@@ -1781,7 +1753,7 @@ Called when loading of the web page is complete. This API is used by an applicat ...@@ -1781,7 +1753,7 @@ Called when loading of the web page is complete. This API is used by an applicat
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1813,7 +1785,7 @@ Called when the rendering process exits abnormally. ...@@ -1813,7 +1785,7 @@ Called when the rendering process exits abnormally.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'chrome://crash/', controller: this.controller }) Web({ src: 'chrome://crash/', controller: this.controller })
...@@ -1901,7 +1873,7 @@ Called to notify the **\<Web>** component of the URL of the loaded resource file ...@@ -1901,7 +1873,7 @@ Called to notify the **\<Web>** component of the URL of the loaded resource file
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1934,7 +1906,7 @@ Called when the display ratio of this page changes. ...@@ -1934,7 +1906,7 @@ Called when the display ratio of this page changes.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1950,7 +1922,7 @@ Called when the display ratio of this page changes. ...@@ -1950,7 +1922,7 @@ Called when the display ratio of this page changes.
onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)
Called when the **\<Web>** component is about to access a URL. This API is used to determine whether to block the access. Called when the **\<Web>** component is about to access a URL. This API is used to determine whether to block the access, which is allowed by default.
**Parameters** **Parameters**
...@@ -1972,7 +1944,7 @@ Called when the **\<Web>** component is about to access a URL. This API is used ...@@ -1972,7 +1944,7 @@ Called when the **\<Web>** component is about to access a URL. This API is used
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -2080,7 +2052,7 @@ Called when an HTTP authentication request is received. ...@@ -2080,7 +2052,7 @@ Called when an HTTP authentication request is received.
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
httpAuth: boolean = false httpAuth: boolean = false
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -2141,7 +2113,7 @@ Called when an SSL error occurs during resource loading. ...@@ -2141,7 +2113,7 @@ Called when an SSL error occurs during resource loading.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -2326,8 +2298,8 @@ Called when the scrollbar of the page scrolls. ...@@ -2326,8 +2298,8 @@ Called when the scrollbar of the page scrolls.
| Name | Type | Description | | Name | Type | Description |
| ------- | ------ | ------------ | | ------- | ------ | ------------ |
| xOffset | number | Position of the scrollbar on the x-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.| | yOffset | number | Position of the scrollbar on the y-axis relative to the top of the web page.|
**Example** **Example**
...@@ -2668,7 +2640,7 @@ Called when the old page is not displayed and the new page is about to be visibl ...@@ -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) 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** **Parameters**
...@@ -2695,7 +2667,7 @@ Called when the key event is intercepted, before being consumed by the Webview. ...@@ -2695,7 +2667,7 @@ Called when the key event is intercepted, before being consumed by the Webview.
Column() { Column() {
Web({ src:'www.example.com', controller: this.controller }) Web({ src:'www.example.com', controller: this.controller })
.onInterceptKeyEvent((event) => { .onInterceptKeyEvent((event) => {
if (event.keyCode == 2017 || event.keyCode == 2018) { if (event.keyCode == 2017 || event.keyCode == 2018) {
console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`) console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)
return true; return true;
} }
...@@ -3162,18 +3134,6 @@ Instructs the **\<Web>** component to select a file. ...@@ -3162,18 +3134,6 @@ Instructs the **\<Web>** component to select a file.
Implements the **FileSelectorParam** object. For the sample code, see [onShowFileSelector](#onshowfileselector9). Implements the **FileSelectorParam** object. For the sample code, see [onShowFileSelector](#onshowfileselector9).
### getTitle<sup>9+</sup>
getTitle(): string
Obtains the title of the file selector.
**Return value**
| Type | Description |
| ------ | ---------- |
| string | Title of the file selector.|
### getMode<sup>9+</sup> ### getMode<sup>9+</sup>
getMode(): FileSelectorMode getMode(): FileSelectorMode
...@@ -3611,7 +3571,7 @@ This API is deprecated since API version 9. You are advised to use [requestFocus ...@@ -3611,7 +3571,7 @@ This API is deprecated since API version 9. You are advised to use [requestFocus
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('requestFocus') Button('requestFocus')
...@@ -3646,7 +3606,7 @@ This API is deprecated since API version 9. You are advised to use [accessBackwa ...@@ -3646,7 +3606,7 @@ This API is deprecated since API version 9. You are advised to use [accessBackwa
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('accessBackward') Button('accessBackward')
...@@ -3682,7 +3642,7 @@ This API is deprecated since API version 9. You are advised to use [accessForwar ...@@ -3682,7 +3642,7 @@ This API is deprecated since API version 9. You are advised to use [accessForwar
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('accessForward') Button('accessForward')
...@@ -3725,7 +3685,7 @@ This API is deprecated since API version 9. You are advised to use [accessStep<s ...@@ -3725,7 +3685,7 @@ This API is deprecated since API version 9. You are advised to use [accessStep<s
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
@State steps: number = 2 @State steps: number = 2
build() { build() {
Column() { Column() {
Button('accessStep') Button('accessStep')
...@@ -3755,7 +3715,7 @@ This API is deprecated since API version 9. You are advised to use [backward<sup ...@@ -3755,7 +3715,7 @@ This API is deprecated since API version 9. You are advised to use [backward<sup
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('backward') Button('backward')
...@@ -3784,7 +3744,7 @@ This API is deprecated since API version 9. You are advised to use [forward<sup> ...@@ -3784,7 +3744,7 @@ This API is deprecated since API version 9. You are advised to use [forward<sup>
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('forward') Button('forward')
...@@ -3797,40 +3757,6 @@ This API is deprecated since API version 9. You are advised to use [forward<sup> ...@@ -3797,40 +3757,6 @@ This API is deprecated since API version 9. You are advised to use [forward<sup>
} }
``` ```
### backOrForward<sup>9+</sup>
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<sup>(deprecated)</sup> ### deleteJavaScriptRegister<sup>(deprecated)</sup>
deleteJavaScriptRegister(name: string) deleteJavaScriptRegister(name: string)
...@@ -3854,7 +3780,7 @@ This API is deprecated since API version 9. You are advised to use [deleteJavaSc ...@@ -3854,7 +3780,7 @@ This API is deprecated since API version 9. You are advised to use [deleteJavaSc
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
@State name: string = 'Object' @State name: string = 'Object'
build() { build() {
Column() { Column() {
Button('deleteJavaScriptRegister') Button('deleteJavaScriptRegister')
...@@ -3871,7 +3797,7 @@ This API is deprecated since API version 9. You are advised to use [deleteJavaSc ...@@ -3871,7 +3797,7 @@ This API is deprecated since API version 9. You are advised to use [deleteJavaSc
getHitTest(): HitTestType 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 [getHitTest<sup>9+</sup>](../apis/js-apis-webview.md#gethittest). This API is deprecated since API version 9. You are advised to use [getHitTest<sup>9+</sup>](../apis/js-apis-webview.md#gethittest).
...@@ -3889,7 +3815,7 @@ This API is deprecated since API version 9. You are advised to use [getHitTest<s ...@@ -3889,7 +3815,7 @@ This API is deprecated since API version 9. You are advised to use [getHitTest<s
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getHitTest') Button('getHitTest')
...@@ -3903,73 +3829,6 @@ This API is deprecated since API version 9. You are advised to use [getHitTest<s ...@@ -3903,73 +3829,6 @@ This API is deprecated since API version 9. You are advised to use [getHitTest<s
} }
``` ```
### getHitTestValue<sup>9+</sup>
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 })
}
}
}
```
### getWebId<sup>9+</sup>
getWebId(): number
Obtains the index value of this **\<Web>** component, which can be used for **\<Web>** component management.
**Return value**
| Type | Description |
| ------ | ------------ |
| number | Index value of the current **\<Web>** 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 })
}
}
}
```
### getTitle<sup>9+</sup> ### getTitle<sup>9+</sup>
getTitle(): string getTitle(): string
...@@ -3989,7 +3848,7 @@ Obtains the title of the current web page. ...@@ -3989,7 +3848,7 @@ Obtains the title of the current web page.
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getTitle') Button('getTitle')
...@@ -4003,72 +3862,6 @@ Obtains the title of the current web page. ...@@ -4003,72 +3862,6 @@ Obtains the title of the current web page.
} }
``` ```
### getPageHeight<sup>9+</sup>
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 })
}
}
}
```
### getDefaultUserAgent<sup>9+</sup>
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<sup>(deprecated)</sup> ### loadData<sup>(deprecated)</sup>
loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) 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<sup ...@@ -4099,7 +3892,7 @@ This API is deprecated since API version 9. You are advised to use [loadData<sup
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('loadData') Button('loadData')
...@@ -4143,7 +3936,7 @@ This API is deprecated since API version 9. You are advised to use [loadUrl<sup> ...@@ -4143,7 +3936,7 @@ This API is deprecated since API version 9. You are advised to use [loadUrl<sup>
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('loadUrl') Button('loadUrl')
...@@ -4172,7 +3965,7 @@ This API is deprecated since API version 9. You are advised to use [onActive<sup ...@@ -4172,7 +3965,7 @@ This API is deprecated since API version 9. You are advised to use [onActive<sup
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('onActive') Button('onActive')
...@@ -4201,7 +3994,7 @@ This API is deprecated since API version 9. You are advised to use [onInactive<s ...@@ -4201,7 +3994,7 @@ This API is deprecated since API version 9. You are advised to use [onInactive<s
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('onInactive') Button('onInactive')
...@@ -4236,7 +4029,7 @@ This API is deprecated since API version 9. You are advised to use [zoom<sup>9+< ...@@ -4236,7 +4029,7 @@ This API is deprecated since API version 9. You are advised to use [zoom<sup>9+<
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
@State factor: number = 1 @State factor: number = 1
build() { build() {
Column() { Column() {
Button('zoom') Button('zoom')
...@@ -4249,72 +4042,6 @@ This API is deprecated since API version 9. You are advised to use [zoom<sup>9+< ...@@ -4249,72 +4042,6 @@ This API is deprecated since API version 9. You are advised to use [zoom<sup>9+<
} }
``` ```
### zoomIn<sup>9+</sup>
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 })
}
}
}
```
### zoomOut<sup>9+</sup>
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<sup>(deprecated)</sup> ### refresh<sup>(deprecated)</sup>
refresh() refresh()
...@@ -4331,7 +4058,7 @@ This API is deprecated since API version 9. You are advised to use [refresh<sup> ...@@ -4331,7 +4058,7 @@ This API is deprecated since API version 9. You are advised to use [refresh<sup>
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('refresh') Button('refresh')
...@@ -4409,7 +4136,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava ...@@ -4409,7 +4136,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava
} }
</script> </script>
</html> </html>
``` ```
### runJavaScript<sup>(deprecated)</sup> ### runJavaScript<sup>(deprecated)</sup>
...@@ -4489,7 +4216,7 @@ This API is deprecated since API version 9. You are advised to use [stop<sup>9+< ...@@ -4489,7 +4216,7 @@ This API is deprecated since API version 9. You are advised to use [stop<sup>9+<
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('stop') Button('stop')
...@@ -4518,7 +4245,7 @@ This API is deprecated since API version 9. You are advised to use [clearHistory ...@@ -4518,7 +4245,7 @@ This API is deprecated since API version 9. You are advised to use [clearHistory
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('clearHistory') Button('clearHistory')
...@@ -4531,11 +4258,17 @@ This API is deprecated since API version 9. You are advised to use [clearHistory ...@@ -4531,11 +4258,17 @@ This API is deprecated since API version 9. You are advised to use [clearHistory
} }
``` ```
### clearSslCache ### getCookieManager<sup>9+</sup>
getCookieManager(): WebCookie
Obtains the cookie management object of the **\<Web>** component.
clearSslCache(): void **Return value**
Clears the user operation corresponding to the SSL certificate error event recorded by the **\<Web>** component. | Type | Description |
| --------- | ---------------------------------------- |
| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).|
**Example** **Example**
...@@ -4548,9 +4281,9 @@ Clears the user operation corresponding to the SSL certificate error event recor ...@@ -4548,9 +4281,9 @@ Clears the user operation corresponding to the SSL certificate error event recor
build() { build() {
Column() { Column() {
Button('clearSslCache') Button('getCookieManager')
.onClick(() => { .onClick(() => {
this.controller.clearSslCache() let cookieManager = this.controller.getCookieManager()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4558,769 +4291,42 @@ Clears the user operation corresponding to the SSL certificate error event recor ...@@ -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 **\<Web>** components. All **\<Web>** 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 **\<Web>** component. ### setCookie<sup>9+</sup>
setCookie(url: string, value: string): boolean
**Example** Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
```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 })
}
}
}
```
### getCookieManager<sup>9+</sup>
getCookieManager(): WebCookie
Obtains the cookie management object of the **\<Web>** 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 })
}
}
}
```
### createWebMessagePorts<sup>9+</sup>
createWebMessagePorts(): Array\<WebMessagePort\>
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 })
}
}
}
```
### postMessage<sup>9+</sup>
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
<!DOCTYPE html>
<html>
<body>
<h1>Web Message Port Demo</h1>
<div style="font-size: 24pt;">
<input type="button" value="5.SendToEts" onclick="PostMsgToEts(msgFromJS.value);" /><br/>
<input id="msgFromJS" type="text" value="send this message from HTML to ets" style="font-size: 16pt;" /><br/>
</div>
<p class="output">display received message send from ets</p>
</body>
<script src="index.js"></script>
</html>
// 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)
}
```
### getUrl<sup>9+</sup>
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 })
}
}
}
```
### searchAllAsync<sup>9+</sup>
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)
})
}
}
}
```
### clearMatches<sup>9+</sup>
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 })
}
}
}
```
### searchNext<sup>9+</sup>
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 })
}
}
}
```
## HitTestValue<sup>9+</sup>
Implements the **HitTestValue** object. For the sample code, see [getHitTestValue](#gethittestvalue9).
### getType<sup>9+</sup>
getType(): HitTestType
Obtains the element type of the area being clicked.
**Return value**
| Type | Description |
| ------------------------------- | ------------- |
| [HitTestType](#hittesttype)| Element type of the area being clicked.|
### getExtra<sup>9+</sup>
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 **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
### setCookie<sup>9+</sup>
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 })
}
}
}
```
### getCookie<sup>9+</sup>
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 })
}
}
}
```
### setCookie<sup>9+</sup>
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 })
}
}
}
```
### saveCookieSync<sup>9+</sup>
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 })
}
}
}
```
### saveCookieAsync<sup>9+</sup>
saveCookieAsync(): Promise\<boolean>
Saves the cookies in the memory to the drive. This API uses a promise to return the value.
**Return value**
| Type | Description |
| ----------------- | --------------------------- |
| Promise\<boolean> | 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 })
}
}
}
```
### saveCookieAsync<sup>9+</sup>
saveCookieAsync(callback: AsyncCallback\<boolean>): 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\<boolean> | 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 })
}
}
}
```
### isCookieAllowed<sup>9+</sup>
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 })
}
}
}
```
### putAcceptCookieEnabled<sup>9+</sup>
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 })
}
}
}
```
### isThirdPartyCookieAllowed<sup>9+</sup>
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 })
}
}
}
```
### putAcceptThirdPartyCookieEnabled<sup>9+</sup>
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 })
}
}
}
```
### existCookie<sup>9+</sup> **Parameters**
existCookie(): boolean
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** **Return value**
| Type | Description | | Type | Description |
| ------- | ----------- | | ------- | ------------- |
| boolean | Whether cookies exist.| | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('existCookie') Button('setCookie')
.onClick(() => { .onClick(() => {
let result = web_webview.WebCookieManager.existCookie() let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b")
console.log("result: " + result) console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -5328,54 +4334,32 @@ Checks whether cookies exist. ...@@ -5328,54 +4334,32 @@ Checks whether cookies exist.
} }
} }
``` ```
### saveCookieSync<sup>9+</sup>
saveCookieSync(): boolean
### deleteEntireCookie<sup>9+</sup> Saves the cookies in the memory to the drive. This API returns the result synchronously.
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 })
}
}
}
```
### deleteSessionCookie<sup>9+</sup> **Return value**
deleteSessionCookie(): void
Deletes all session cookies. | Type | Description |
| ------- | -------------------- |
| boolean | Operation result.|
**Example** **Example**
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController() controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('deleteSessionCookie') Button('saveCookieSync')
.onClick(() => { .onClick(() => {
web_webview.WebCookieManager.deleteSessionCookie() let result = this.controller.getCookieManager().saveCookieSync()
console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -5466,324 +4450,6 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API. ...@@ -5466,324 +4450,6 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API.
| On | The web dark mode is enabled. | | On | The web dark mode is enabled. |
| Auto | The web dark mode setting follows the system settings. | | 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 **\<Web>** component with asynchronous callbacks. A **WebAsyncController **object controls one **\<Web>** component.
### Creating an Object
```
webController: WebController = new WebController();
webAsyncController: WebAsyncController = new WebAsyncController(webController);
```
### storeWebArchive<sup>9+</sup>
storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\<string>): 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.<br/>The value **false** means not to automatically generate a file name.<br/>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\<string> | 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 })
}
}
}
```
### storeWebArchive<sup>9+</sup>
storeWebArchive(baseName: string, autoName: boolean): Promise\<string>
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.<br>The value **false** means not to automatically generate a file name.<br>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\<string> | 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 })
}
}
}
```
## WebMessagePort<sup>9+</sup>
Implements a **WebMessagePort** instance, which can be used to send and receive messages.
### close<sup>9+</sup>
close(): void
Disables this message port.
### postMessageEvent<sup>9+</sup>
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 })
}
}
}
```
### onMessageEvent<sup>9+</sup>
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 })
}
}
}
```
## WebMessageEvent<sup>9+</sup>
Implements the **WebMessageEvent** object to encapsulate the message and port.
### getData<sup>9+</sup>
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)
})
}
}
}
```
### setData<sup>9+</sup>
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 })
}
}
}
```
### getPorts<sup>9+</sup>
getPorts(): Array\<WebMessagePort\>
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)
})
}
}
}
```
### setPorts<sup>9+</sup>
setPorts(ports: Array\<WebMessagePort\>): 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 })
}
}
}
```
## DataResubmissionHandler<sup>9+</sup> ## DataResubmissionHandler<sup>9+</sup>
Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data. Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data.
......
en/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md 0 → 100644
浏览文件 @ 66d129cb
# 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\<HeaderV9>): void
- Before change:
```ts
loadUrl(url: string | Resource, headers?: Array<HeaderV9>): void
```
- After change:
```ts
loadUrl(url: string | Resource, headers?: Array<WebHeader>): 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<void>;
static saveCookieAsync(callback: AsyncCallback<void>): 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\<WebMessagePort>;
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<WebMessagePort>;
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<WebMessagePort>;
postMessage(name: string, ports: Array<WebMessagePort>, 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\<string>;
storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback\<string>): void;
- Before change:
```ts
storeWebArchive(baseName: string, autoName: boolean): Promise<string>;
storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback<string>): void;
```
- After change:
```ts
storeWebArchive(baseName: string, autoName: boolean): Promise<string>;
storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback<string>): 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 })
}
}
}
```
en/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md 0 → 100644
浏览文件 @ 66d129cb
# 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\<HeaderV9>): void
- Before change:
```ts
loadUrl(url: string | Resource, headers?: Array<HeaderV9>): void
```
- After change:
```ts
loadUrl(url: string | Resource, headers?: Array<WebHeader>): 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<void>;
static saveCookieAsync(callback: AsyncCallback<void>): 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\<WebMessagePort>;
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<WebMessagePort>;
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<WebMessagePort>;
postMessage(name: string, ports: Array<WebMessagePort>, 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\<string>;
storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback\<string>): void;
- Before change:
```ts
storeWebArchive(baseName: string, autoName: boolean): Promise<string>;
storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback<string>): void;
```
- After change:
```ts
storeWebArchive(baseName: string, autoName: boolean): Promise<string>;
storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback<string>): 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 })
}
}
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或