diff --git a/en/application-dev/reference/apis/js-apis-notification.md b/en/application-dev/reference/apis/js-apis-notification.md index 1e9fa33963ed6eb07302ddfbb9db44973e9be4d4..1c960155bd3c2b813fb12d581d2a868d37cf4c36 100644 --- a/en/application-dev/reference/apis/js-apis-notification.md +++ b/en/application-dev/reference/apis/js-apis-notification.md @@ -556,7 +556,7 @@ Obtains all notification slots. This API uses an asynchronous callback to return | Name | Readable| Writable| Type | Mandatory| Description | | -------- | ---- | --- | --------------------------------- | ---- | -------------------- | -| callback | Yes | No | AsyncCallback\<[NotificationSlot](#notificationslot)\> | Yes | Callback used to return the result.| +| callback | Yes | No | AsyncCallback\\> | Yes | Callback used to return the result.| **Example** @@ -3765,7 +3765,7 @@ Notification.subscribe(subscriber, subscribeCallback); | desc | Yes | Yes | string | No | Notification slot description. | | badgeFlag | Yes | Yes | boolean | No | Whether to display the badge. | | bypassDnd | Yes | Yes | boolean | No | Whether to bypass the DND mode in the system. | -| lockscreenVisibility | Yes | Yes | boolean | No | Mode for displaying the notification on the lock screen. | +| lockscreenVisibility | Yes | Yes | number | No | Mode for displaying the notification on the lock screen. | | vibrationEnabled | Yes | Yes | boolean | No | Whether vibration is supported for the notification. | | sound | Yes | Yes | string | No | Notification alert tone. | | lightEnabled | Yes | Yes | boolean | No | Whether the indicator blinks for the notification. | diff --git a/en/application-dev/reference/apis/js-apis-pasteboard.md b/en/application-dev/reference/apis/js-apis-pasteboard.md index cf7fbb1caa02a7c9c8f6b434a227a3275574fa6c..00802493ea68efd037b17e0712d78b755d131059 100644 --- a/en/application-dev/reference/apis/js-apis-pasteboard.md +++ b/en/application-dev/reference/apis/js-apis-pasteboard.md @@ -1,8 +1,10 @@ # Pasteboard +The **pasteboard** module provides the pasteboard management client and pasteboard server. The pasteboard management client manages pasteboard APIs. Specifically, it provides pasteboard APIs in JavaScript for applications, creates pasteboard data on the application framework side, and requests the pasteboard SA to create, delete, query, convert text, and configure pasteboards. The pasteboard server manages pasteboard events as well as the pasteboard SA lifecycle, providing support for the copy and paste functions of the system. -> **NOTE**
The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. +> **NOTE** > +> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import @@ -461,10 +463,10 @@ The pasteboard supports a maximum number of 128 data records. **Example** -```js -var pasteData = pasteboard.createPlainTextData("hello"); -pasteData.addTextRecord("good"); -``` + ```js + var pasteData = pasteboard.createPlainTextData("hello"); + pasteData.addTextRecord("good"); + ``` ### addHtmlRecord7+ @@ -1037,13 +1039,13 @@ Checks whether the system pasteboard contains content. This API uses a promise t **Example** -```js -systemPasteboard.hasPasteData().then((data) => { - console.info('Operation succeeded. ' + JSON.stringify(data)); -}).catch((error) => { - console.error('failed to hasPasteData because ' + JSON.stringify(error)); -}); -``` + ```js + systemPasteboard.hasPasteData().then((data) => { + console.info('success hasPasteData : ' + JSON.stringify(data)); + }).catch((error) => { + console.error('failed to hasPasteData because ' + JSON.stringify(error)); + }); + ``` ### clear7+ diff --git a/en/application-dev/reference/apis/js-apis-wallpaper.md b/en/application-dev/reference/apis/js-apis-wallpaper.md index 15fd2c4fcdeb681b4ace2dc49d521f54e08014f5..1f91a707f3f25541fd6d8db09df49997d0623b5e 100644 --- a/en/application-dev/reference/apis/js-apis-wallpaper.md +++ b/en/application-dev/reference/apis/js-apis-wallpaper.md @@ -1,5 +1,6 @@ # Wallpaper +The **wallpaper** module is part of the theme framework and provides the system-level wallpaper management service in OpenHarmony. You can use the APIs of this module to show, set, and switch between wallpapers. > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif index 6b44b6a2adc2528e13e95bc10d2a67874226a63b..96afd9a948c90e22cd52ab4c55218bf97591b3ec 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001250678457.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index 4cce2c69ff96f157f8087414f65a5255ecbefff3..163c61d33fad2f5159803c59a64348d405c3a71b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -49,7 +49,9 @@ RichText\(content:string\) ## Example -``` +You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. +```ts +// xxx.ets @Entry @Component struct RichTextExample { diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md index ec2ef9926c71afe8e8745d8ab65a92efa6cceacf..98ac00dbe6f8732c3d4abb8081eb75d5ea32210f 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -1,12 +1,14 @@ # Web -> **NOTE**
->This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> - You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. The **** component can be used to display web pages. ## Required Permissions -ohos.permission.INTERNET, required only for accessing online web pages. +ohos.permission.INTERNET, required only for accessing online web pages ## Child Components @@ -14,200 +16,1700 @@ Not supported ## APIs -- Web\(options: { src: string, controller?: WebController }\) - - Table 1 options - - | Name | Type | Mandatory | Default Value | Description | - | ---------- | ------------------------------- | ---- | ---- | ------- | - | src | string | Yes | - | Address of a web page resource.| - | controller | [WebController](#webcontroller) | No | - | Controller. | - +Web(options: { src: string, controller?: WebController }) + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------- | ------------------------------- | ---- | ---- | ------- | +| src | string | Yes | - | Address of a web page resource.| +| controller | [WebController](#webcontroller) | No | - | Controller. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + } + } + } + ``` > **NOTE**
> -> - Transition animation is not supported. -> - Multi-instance is not supported. -> - Only local audio and video are supported for playback. +> Transition animation is not supported. ## Attributes -| Name | Type | Default Value | Description | -| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -| domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled.| -| fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md). By default, this feature is enabled. | -| fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ts-resource-access.md). By default, this feature is disabled. | -| imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. | -| javaScriptProxy | {
object: object,
name: string,
methodList: Array\,
controller: WebController
} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.
**object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.
**name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.
**methodList** indicates the methods of the JavaScript object to be registered at the application side.
**controller** indicates the controller.| -| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. | -| mixedMode | [MixedMode](#mixedmode) | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.| -| onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.| -| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. | -| overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. | -| databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. | -| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. | -| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. | -| userAgent | string | - | User agent. | + +The **\** component has network attributes. + +### domStorageAccess + +domStorageAccess(domStorageAccess: boolean) + +Sets whether to enable the DOM Storage API. By default, this feature is disabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------------- | ------- | ---- | ---- | ------------------------------------ | +| domStorageAccess | boolean | Yes | false | Whether to enable the DOM Storage API.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .domStorageAccess(true) + } + } + } + ``` + +### fileAccess + +fileAccess(fileAccess: boolean) + +Sets whether to enable the access to the file system in the application. By default, this feature is disabled. Access to the files specified through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md) are not affected by this attribute. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------- | ------- | ---- | ---- | ---------------------------------------- | +| fileAccess | boolean | Yes | true | Whether to enable the access to the file system in the application. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .fileAccess(true) + } + } + } + ``` + +### fileFromUrlAccess9+ + +fileFromUrlAccess(fileFromUrlAccess: boolean) + +Sets whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. By default, this feature is disabled. Access to the files specified through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md) are not affected by this attribute. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ----------------- | ------- | ---- | ----- | ---------------------------------------- | +| fileFromUrlAccess | boolean | Yes | false | Whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .fileFromUrlAccess(true) + } + } + } + ``` + +### imageAccess + +imageAccess(imageAccess: boolean) + +Sets whether to enable automatic image loading. By default, this feature is enabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ----------- | ------- | ---- | ---- | --------------- | +| imageAccess | boolean | Yes | true | Whether to enable automatic image loading. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .imageAccess(true) + } + } + } + ``` + +### javaScriptProxy + +javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array\, + controller: WebController }) + +Injects a JavaScript object into the window. Methods of this object can be invoked in the window. The parameters cannot be updated. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------- | --------------- | ---- | ---- | ------------------------- | +| object | object | Yes | - | Object to be registered. Methods can be declared, but not attributes. | +| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window.| +| methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + testObj = { + test: (data1, data2, data3) => { + console.log("data1:" + data1); + console.log("data2:" + data2); + console.log("data3:" + data3); + return "AceString"; + }, + toString: () => { + console.log('toString' + "interface instead."); + } + } + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .javaScriptAccess(true) + .javaScriptProxy({ + object: this.testObj, + name: "objName", + methodList: ["test", "toString"], + controller: this.controller, + }) + } + } + } + ``` + +### javaScriptAccess + +javaScriptAccess(javaScriptAccess: boolean) + +Sets whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------------- | ------- | ---- | ---- | ------------------- | +| javaScriptAccess | boolean | Yes | true | Whether JavaScript scripts can be executed.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .javaScriptAccess(true) + } + } + } + ``` + +### mixedMode + +mixedMode(mixedMode: MixedMode) + +Sets whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| --------- | --------------------------- | ---- | ---- | --------- | +| mixedMode | [MixedMode](#mixedmode)| Yes | - | Mixed content to load.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + @State mode:MixedMode = MixedMode.All; + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .mixedMode(this.mode) + } + } + } + ``` + +### onlineImageAccess + +onlineImageAccess(onlineImageAccess: boolean) + +Sets whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ----------------- | ------- | ---- | ---- | ---------------- | +| onlineImageAccess | boolean | Yes | true | Whether to enable access to online images through HTTP and HTTPS.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .onlineImageAccess(true) + } + } + } + ``` + +### zoomAccess + +zoomAccess(zoomAccess: boolean) + +Sets whether to enable zoom gestures. By default, this feature is enabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------- | ------- | ---- | ---- | ------------- | +| zoomAccess | boolean | Yes | true | Whether to enable zoom gestures.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .zoomAccess(true) + } + } + } + ``` + +### overviewModeAccess + +overviewModeAccess(overviewModeAccess: boolean) + +Sets whether to load web pages by using the overview mode. By default, this feature is enabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ------------------ | ------- | ---- | ---- | --------------- | +| overviewModeAccess | boolean | Yes | true | Whether to load web pages by using the overview mode| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .overviewModeAccess(true) + } + } + } + ``` + +### databaseAccess + +databaseAccess(databaseAccess: boolean) + +Sets whether to enable database access. By default, this feature is disabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------------- | ------- | ---- | ---- | ----------------- | +| databaseAccess | boolean | Yes | false | Whether to enable database access. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### geolocationAccess + +geolocationAccess(geolocationAccess: boolean) + +Sets whether to enable geolocation access. By default, this feature is enabled. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------------- | ------- | ---- | ---- | ----------------- | +| geolocationAccess | boolean | Yes | true | Whether to enable geolocation access. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .geolocationAccess(true) + } + } + } + ``` + +### cacheMode + +cacheMode(cacheMode: CacheMode) + +Sets the cache mode. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| --------- | --------------------------- | ---- | ---- | --------- | +| cacheMode | [CacheMode](#cachemode)| Yes | CacheMode.Default | Cache mode to set.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + @State mode:CacheMode = CacheMode.None; + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .cacheMode(this.mode) + } + } + } + ``` + +### textZoomRatio + +textZoomRatio(textZoomRatio: number) + +Sets the text zoom ratio of the page. The default value is **100**, which indicates 100%. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ------------ | ------ | ---- | ---- | --------------- | +| textZoomRatio | number | Yes | 100 | Text zoom ratio to set.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + @State atio:number = 150; + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .textZoomRatio(this.atio) + } + } + } + ``` + +### userAgent + +userAgent(userAgent: string) + +Sets the user agent. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| --------- | ------ | ---- | ---- | --------- | +| userAgent | string | Yes | - | User agent to set.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'; + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .userAgent(this.userAgent) + } + } + } + ``` > **NOTE**
> -> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes). +> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#attributes), [height](ts-universal-attributes-size.md#attributes), [padding](ts-universal-attributes-size.md#attributes), [margin](ts-universal-attributes-size.md#attributes), and [border](ts-universal-attributes-border.md#attributes). ## Events The universal events are not supported. -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when **alert()** is invoked to display an alert dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows only the confirm operation) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.

| -| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when the current page is about to exit after the user refreshes or closes the page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.

| -| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when **confirm()** is invoked by the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.

| -| onPrompt9+(callback: (event?: { url: string; message: string; value: string; result: [JsResult](#jsresult) }) => boolean) |

Triggered when **prompt()** is invoked by the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**value**: default value in the dialog box.
**JsResult**: the user's operation and dialog box content.

| -| onConsole(callback: (event?: { message: [ConsoleMessage](#consolemessage) }) => boolean) |

Triggered when the host application is notified of a JavaScript console message.
**message**: console message.

| -| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) |

Triggered when a download task starts on the web page.
**url**: URL for the download task.
**userAgent**: name of the user agent (UA) for the download task.
**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.
**mimetype**: content media type (MIME) returned by the server.
**contentLength**: length of the file returned by the server.

| -| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) |

Triggered when an error occurs during web page loading.
For better results, simplify the implementation logic in the callback.
**request**: encapsulation of a web page request.
**error**: encapsulation of a web page resource loading error.

| -| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) |

Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.
**request**: encapsulation of a web page request.
**response**: encapsulation of a web page response.

| -| onPageBegin(callback: (event?: { url: string }) => void) |

Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.
**url**: URL of the page.

| -| onPageEnd(callback: (event?: { url: string }) => void) |

Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.

| -| onProgressChange(callback: (event?: { newProgress: number }) => void) |

Triggered when the web page loading progress changes.
**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.

| -| onTitleReceive(callback: (event?: { title: string }) => void) |

Triggered when the document title of the web page is changed.
**title**: document title.

| -| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) |

Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.
**url**: URL to be accessed.
**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.

| -| onRenderExited(callback: (event?: { renderExitReason: [RenderExitReason](#renderexitreason) }) => void) |

Triggered when the rendering process exits abnormally.
**renderExitReason**: cause for the abnormal exit of the rendering process.

| -| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) |

Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
**result**: file selection result to be sent to the web component.
**fileSelector**: information about the file selector.

| -| onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) |

Triggered before the **\** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.
**data**: URL information.

| - -### ConsoleMessage - -- APIs - - | Name | Description | - | ------------------------------- | ---------------------- | - | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. | - | getMessage(): string | Obtains the log information of the **ConsoleMessage**.| - | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.| - | getSourceId(): string | Obtains the path and name of the web page source file. | - -- MessageLevel enums - - | Name | Description | - | ----- | :---- | - | Debug | Debug level.| - | Error | Error level.| - | Info | Information level.| - | Log | Log level.| - | Warn | Warning level. | - -### JsResult - -Provides the result returned to the **\** component to indicate the user operation performed in the dialog box. - -- APIs - - | Name | Description | - | --------------------- | ----------------------- | - | handleCancel(): void |

The user's cancel operation in the dialog box.

| - | handleConfirm(): void |

The user's confirm operation in the dialog box.

| - | handlePromptConfirm9+(result: string): void |

The user's confirm operation in the dialog box as well as the dialog box content.

| - -### WebResourceError - -- APIs - - | Name | Description | - | ---------------------- | ------------ | - | getErrorCode(): number | Obtains the error code for resource loading. | - | getErrorInfo(): string | Obtains error information about resource loading.| - -### WebResourceRequest - -- APIs - - | Name | Description | - | ---------------------------------------- | -------------------- | - | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. | - | getRequestUrl(): string | Obtains the URL of the resource request. | - | isMainFrame(): boolean | Checks whether the resource request is in the main frame. | - | isRedirect(): boolean | Checks whether the resource request is redirected by the server. | - | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).| - -### Header +### onAlert + +onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) + +Triggered when **alert()** is invoked to display an alert dialog box on the web page. + +**Parameters** +| Name | Type | Description | +| ------- | --------------------- | --------------- | +| url | string | URL of the web page where the dialog box is displayed.| +| message | string | Message displayed in the dialog box. | +| result | [JsResult](#jsresult) | The user's operation. | + +**Return value** +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .onAlert((event) => { + AlertDialog.show({ + title: 'title', + message: 'text', + confirm: { + value: 'onAlert', + action: () => { + event.result.handleConfirm() + } + }, + cancel: () => { + event.result.handleCancel() + } + }) + return true; + }) + } + } + } + ``` + +### onBeforeUnload + +onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) + +Triggered when the current page is about to exit after the user refreshes or closes the page. + +**Parameters** +| Name | Type | Description | +| ------- | --------------------- | --------------- | +| url | string | URL of the web page where the dialog box is displayed.| +| message | string | Message displayed in the dialog box. | +| result | [JsResult](#jsresult) | The user's operation. | + +**Return value** +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onBeforeUnload((event) => { + console.log("event.url:" + event.url); + console.log("event.message:" + event.message); + console.log("event.result:" + event.result); + return false; + }) + } + } + } + ``` + +### onConfirm + +onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) + +Triggered when **confirm()** is invoked by the web page. + +**Parameters** +| Name | Type | Description | +| ------- | --------------------- | --------------- | +| url | string | URL of the web page where the dialog box is displayed.| +| message | string | Message displayed in the dialog box. | +| result | [JsResult](#jsresult) | The user's operation. | + +**Return value** +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onConfirm((event) => { + console.log("event.url:" + event.url); + console.log("event.message:" + event.message); + console.log("event.result:" + event.result); + AlertDialog.show({ + title: 'title', + message: 'text', + confirm: { + value: 'onConfirm', + action: () => { + event.result.handleConfirm() + } + }, + cancel: () => { + event.result.handleCancel() + } + }) + return true; + }) + } + } + } + ``` + +### onPrompt9+ + +onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean) + +**Parameters** +| Name | Type | Description | +| ------- | --------------------- | --------------- | +| url | string | URL of the web page where the dialog box is displayed.| +| message | string | Message displayed in the dialog box. | +| result | [JsResult](#jsresult) | The user's operation. | + +**Return value** +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .onPrompt((event) => { + console.log("url:" + event.url); + console.log("message:" + event.message); + console.log("value:" + event.value); + console.log("result:" + event.result); + return true; + }) + } + } + ``` + +### onConsole + +onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) + +Triggered to notify the host application of a JavaScript console message. + +**Parameters** +| Name | Type | Description | +| ------- | --------------------------------- | --------- | +| message | [ConsoleMessage](#consolemessage) | Console message.| + +**Return value** +| Type | Description | +| ------- | ----------------------------------- | +| boolean | Returns **true** if the message will not be printed to the console; returns **false** otherwise.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onConsole((event) => { + console.log('getMessage:' + event.message.getMessage()); + console.log('getSourceId:' + event.message.getSourceId()); + console.log('getLineNumber:' + event.message.getLineNumber()); + console.log('getMessageLevel:' + event.message.getMessageLevel()); + return false; + }) + } + } + } + ``` + +### onDownloadStart + +onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) + +**Parameters** +| Name | Type | Description | +| ------------------ | ------------- | ----------------------------------- | +| url | string | URL for the download task. | +| contentDisposition | string | Content-Disposition response header returned by the server, which may be empty.| +| mimetype | string | MIME type of the content returned by the server. | +| contentLength | contentLength | Length of the content returned by the server. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onDownloadStart((event) => { + console.log('url:' + event.url); + console.log('userAgent:' + event.userAgent); + console.log('contentDisposition:' + event.contentDisposition); + console.log('contentLength:' + event.contentLength); + console.log('mimetype:' + event.mimetype); + }) + } + } + } + ``` + +### onErrorReceive + +onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void) + +Triggered when an error occurs during web page loading. For better results, simplify the implementation logic in the callback. + +**Parameters** +| Name | Type | Description | +| ------- | ---------------------------------------- | --------------- | +| request | [WebResourceRequest](#webresourcerequest) | Encapsulation of a web page request. | +| error | [WebResourceError](#webresourceerror) | Encapsulation of a web page resource loading error.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onErrorReceive((event) => { + console.log('getErrorInfo:' + event.error.getErrorInfo()); + console.log('getErrorCode:' + event.error.getErrorCode()); + console.log('url:' + event.request.getRequestUrl()); + console.log('isMainFrame:' + event.request.isMainFrame()); + console.log('isRedirect:' + event.request.isRedirect()); + console.log('isRequestGesture:' + event.request.isRequestGesture()); + console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString()); + let result = event.request.getRequestHeader(); + console.log('The request header result size is ' + result.length); + for (let i of result) { + console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue); + } + }) + } + } + } + ``` + +### onHttpErrorReceive + +onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void) + +Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading. + +**Parameters** +| Name | Type | Description | +| ------- | ---------------------------------------- | --------------- | +| request | [WebResourceRequest](#webresourcerequest) | Encapsulation of a web page request. | +| error | [WebResourceError](#webresourceerror) | Encapsulation of a web page resource loading error.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onHttpErrorReceive((event) => { + console.log('url:' + event.request.getRequestUrl()); + console.log('isMainFrame:' + event.request.isMainFrame()); + console.log('isRedirect:' + event.request.isRedirect()); + console.log('isRequestGesture:' + event.request.isRequestGesture()); + console.log('getResponseData:' + event.response.getResponseData()); + console.log('getResponseEncoding:' + event.response.getResponseEncoding()); + console.log('getResponseMimeType:' + event.response.getResponseMimeType()); + console.log('getResponseCode:' + event.response.getResponseCode()); + console.log('getReasonMessage:' + event.response.getReasonMessage()); + let result = event.request.getRequestHeader(); + console.log('The request header result size is ' + result.length); + for (let i of result) { + console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); + } + let resph = event.response.getResponseHeader(); + console.log('The response header result size is ' + resph.length); + for (let i of resph) { + console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); + } + }) + } + } + } + ``` + +### onPageBegin + +onPageBegin(callback: (event?: { url: string }) => void) + + +Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content. + +**Parameters** +| Name | Type | Description | +| ---- | ------ | --------- | +| url | string | URL of the page.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onPageBegin((event) => { + console.log('url:' + event.url); + }) + } + } + } + ``` + +### onPageEnd + +onPageEnd(callback: (event?: { url: string }) => void) + + +Triggered when the web page loading is complete. This API is triggered only for the main frame content. + +**Parameters** +| Name | Type | Description | +| ---- | ------ | --------- | +| url | string | URL of the page.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onPageEnd((event) => { + console.log('url:' + event.url); + }) + } + } + } + ``` + +### onProgressChange + +onProgressChange(callback: (event?: { newProgress: number }) => void) + +Triggered when the web page loading progress changes. + +**Parameters** +| Name | Type | Description | +| ----------- | ------ | --------------------- | +| newProgress | number | New loading progress. The value is an integer ranging from 0 to 100.| + + **Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onProgressChange((event) => { + console.log('newProgress:' + event.newProgress) + }) + } + } + } + ``` + +### onTitleReceive + +onTitleReceive(callback: (event?: { title: string }) => void) + +Triggered when the document title of the web page is changed. + +**Parameters** +| Name | Type | Description | +| ----- | ------ | ------------- | +| title | string | Document title.| + + **Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onTitleReceive((event) => { + console.log('title:' + event.title) + }) + } + } + } + ``` + +### onRefreshAccessedHistory + +onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) + +Triggered when loading of the web page is complete. This API is used by an application to update the historical link it accessed. + +**Parameters** +| Name | Type | Description | +| ----------- | ------- | --------------------------------- | +| url | string | URL to be accessed. | +| isRefreshed | boolean | Whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.| + + **Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onRefreshAccessedHistory((event) => { + console.log('url:' + event.url + ' isReload:' + event.refreshed); + }) + } + } + } + ``` + +### onRenderExited + +onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void) + +Triggered when the rendering process exits abnormally. + +**Parameters** +| Name | Type | Description | +| ---------------- | ---------------------------------------- | ---------------- | +| renderExitReason | [RenderExitReason](#renderexitreason)| Cause for the abnormal exit of the rendering process.| + + **Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'chrome://crash/', controller: this.controller }) + .onRenderExited((event) => { + console.log('reason:' + event.renderExitReason); + }) + } + } + } + ``` + +### onShowFileSelector9+ + +onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => void) + +Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button. + +**Parameters** +| Name | Type | Description | +| ------------ | ---------------------------------------- | ----------------- | +| result | [FileSelectorResult](#fileselectorresult9) | File selection result to be sent to the **\** component.| +| fileSelector | [FileSelectorParam](#fileselectorparam9) | Information about the file selector. | + + **Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onShowFileSelector((event) => { + AlertDialog.show({ + title: event.fileSelector.getTitle(), + message: 'isCapture:' + event.fileSelector.isCapture() + " mode:" + event.fileSelector.getMode() + 'acceptType:' + event.fileSelector.getAcceptType(), + confirm: { + value: 'upload', + action: () => { + let fileList: Array = [ + '/data/storage/el2/base/test', + ] + event.result.handleFileList(fileList) + } + }, + cancel: () => { + let fileList: Array = [] + event.result.handleFileList(fileList) + } + }) + return true; + }) + } + } + } + ``` + +### onUrlLoadIntercept + +onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) + +Triggered when the **\** component is about to access a URL. This API is used to determine whether to block the access. + +**Parameters** +| Name | Type | Description | +| ---- | ---------------------------------------- | --------- | +| data | string / [WebResourceRequest](#webresourcerequest) | URL information.| + +**Return value** +| Type | Description | +| ------- | ------------------------ | +| boolean | Returns **true** if the access is blocked; returns **false** otherwise.| + +**Example** + + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onUrlLoadIntercept((event) => { + console.log('onUrlLoadIntercept ' + event.data.toString()) + return true; + }) + } + } + } + ``` + +### onInterceptRequest9+ + +onInterceptRequest9+(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse) + +Triggered when the **\** component is about to access a URL. This API is used to block the URL and return the response data. + +**Parameters** +| Name | Type | Description | +| ------- | ---------------------------------------- | ----------- | +| request | [WebResourceRequest](#webresourcerequest) | Information about the URL request.| + +**Return value** +| Type | Description | +| ---------------------------------------- | --------------------------- | +| [WebResourceResponse](#webresourceresponse) | Returns null if the original loading mode is used; returns the response data otherwise.| + + **Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + responseweb: WebResourceResponse = new WebResourceResponse(); + heads:Header[] = new Array(); + @State webdata: string = "\n" + + "\n"+ + "\n"+ + "intercept test\n"+ + "\n"+ + "\n"+ + "

intercept test

\n"+ + "\n"+ + "" + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .onInterceptRequest((event) => { + console.log('url:' + event.request.getRequestUrl()); + var head1:Header = { + headerKey:"Connection", + headerValue:"keep-alive" + } + var head2:Header = { + headerKey:"Cache-Control", + headerValue:"no-cache" + } + var length = this.heads.push(head1); + length = this.heads.push(head2); + this.responseweb.setResponseHeader(this.heads); + this.responseweb.setResponseData(this.webdata); + this.responseweb.setResponseEncoding('utf-8'); + this.responseweb.setResponseMimeType('text/html'); + this.responseweb.setResponseCode(200); + this.responseweb.setReasonMessage('OK'); + return this.responseweb; + }) + } + } + } + ``` + +### onHttpAuthRequest9+ + +onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean) + +Triggered when an HTTP authentication request is received. + +**Parameters** +| Name | Type | Description | +| ------- | ------------------------------------ | ---------------- | +| handler | [HttpAuthHandler](#httpauthhandler9) | The user's operation. | +| host | string | Host to which HTTP authentication credentials apply.| +| realm | string | Realm to which HTTP authentication credentials apply. | + +**Return value** +| Type | Description | +| ------- | --------------------- | +| boolean | Returns **true** if the authentication is successful; returns **false** otherwise. | + +**Example** + + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + httpAuth:boolean = false; + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .onHttpAuthRequest((event) => { + AlertDialog.show({ + title: 'title', + message: 'text', + confirm: { + value: 'onConfirm', + action: () => { + this.httpAuth = event.handler.isHttpAuthInfoSaved(); + if (this.httpAuth == false) { + web.WebDataBase.saveHttpAuthCredentials( + event.host, + event.realm, + "2222", + "2222" + ) + event.handler.cancel(); + } + } + }, + cancel: () => { + event.handler.cancel(); + } + }) + return true; + }) + } + } + ``` +### onPermissionRequest9+ + +onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void) + +Invoked when a permission request is received. + +**Parameters** +| Name | Type | Description | +| ------- | ------------------------------------ | ---------------- | +| request | [PermissionRequest](#permissionrequest9) | The user's operation. | + +**Example** + + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Web({ src:'www.example.com', controller:this.controller }) + .onPermissionRequest((event) => { + AlertDialog.show({ + title: 'title', + message: 'text', + confirm: { + value: 'onConfirm', + action: () => { + event.request.grant(event.request.getAccessibleResource()); + } + }, + cancel: () => { + event.request.deny(); + } + }) + }) + } + } + ``` + +## ConsoleMessage + +Implements the **ConsoleMessage** object. For details about the sample code, see [onConsole](#onconsole). + +### getLineNumber + +getLineNumber(): number + +Obtains the number of rows in this console message. + +**Return value** +| Type | Description | +| ------ | -------------------- | +| number | Number of rows in the console message.| + +### getMessage + +getMessage(): string + +Obtains the log information of this console message. + +**Return value** +| Type | Description | +| ------ | ---------------------- | +| string | Log information about this console message.| + +### getMessageLevel + +getMessageLevel(): MessageLevel + +Obtains the level of this console message. + +**Return value** +| Type | Description | +| --------------------------------- | ---------------------- | +| [MessageLevel](#messagelevel)| Level of the console message.| + +### getSourceId + +getSourceId(): string + +Obtains the path and name of the web page source file. + +**Return value** +| Type | Description | +| ------ | ------------- | +| string | Path and name of the web page source file.| + +## JsResult + +Implements the **JsResult** object, which indicates the result returned to the **\** component to indicate the user operation performed in the dialog box. For details about the sample code, see [onAlert Event](#onalert). + +### handleCancel + +handleCancel(): void + +Notifies the **\** component of the user's cancel operation in the dialog box. + +### handleConfirm + +handleConfirm(): void + +Notifies the **\** component of the user's confirm operation in the dialog box. + +### handlePromptConfirm9+ + +handlePromptConfirm(result: string): void + +Notifies the **\** component of the user's confirm operation in the dialog box as well as the dialog box content. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ------ | ------ | ---- | ---- | ----------- | +| result | string | Yes | - | User input in the dialog box.| + +## WebResourceError + +Implements the **WebResourceError** object. For details about the sample code, see [onErrorReceive](#onerrorreceive). + +### getErrorCode + +getErrorCode(): number + +Obtains the error code for resource loading. + +**Return value** +| Type | Description | +| ------ | ----------- | +| number | Error code for resource loading.| + +### getErrorInfo + +getErrorInfo(): string + +Obtains error information about resource loading. + +**Return value** +| Type | Description | +| ------ | ------------ | +| string | Error information about resource loading.| + +## WebResourceRequest + +Implements the **WebResourceRequest** object. For details about the sample code, see [onErrorReceive](#onerrorreceive). + +### getRequestHeader + +getResponseHeader() : Array\ + +Obtains the information about the resource request header. + +**Return value** +| Type | Description | +| -------------------------- | ---------- | +| Array\<[Header](#header)\> | Information about the resource request header.| + +### getRequestUrl + +getRequestUrl(): string + +Obtains the URL of the resource request. + +**Return value** +| Type | Description | +| ------ | ------------- | +| string | URL of the resource request.| + +### isMainFrame + +isMainFrame(): boolean + +Checks whether the resource request is in the main frame. + +**Return value** +| Type | Description | +| ------- | ---------------- | +| boolean | Whether the resource request is in the main frame.| + +### isRedirect + +isRedirect(): boolean + +Checks whether the resource request is redirected by the server. + +**Return value** +| Type | Description | +| ------- | ---------------- | +| boolean | Whether the resource request is redirected by the server. | + +### isRequestGesture + +isRequestGesture(): boolean + +Checks whether the resource request is associated with a gesture (for example, a tap). + +**Return value** +| Type | Description | +| ------- | -------------------- | +| boolean | Whether the resource request is associated with a gesture (for example, a tap). | + +## Header Describes the request/response header returned by the **\** component. -- Parameters +| Name | Type | Description | +| ----------- | ------ | ------------- | +| headerKey | string | Key of the request/response header. | +| headerValue | string | Value of the request/response header.| - | Name | Type | Description | - | ----------- | ------ | ------------- | - | headerKey | string | Key of the request/response header. | - | headerValue | string | Value of the request/response header.| +## WebResourceResponse -### WebResourceResponse +Implements the **WebResourceResponse** object. For details about the sample code, see [onHttpErrorReceive](#onhttperrorreceive). -- APIs +### getReasonMessage - | Name | Description | - | ---------------------------------------- | ------------------ | - | getReasonMessage(): string | Obtains the status code description of the resource response. | - | getResponseCode(): number | Obtains the status code of the resource response. | - | getResponseData(): string | Obtains the data in the resource response. | - | getResponseEncoding(): string | Obtains the encoding of the resource response. | - | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. | - | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.| +getReasonMessage(): string -### RenderExitReason +Obtains the status code description of the resource response. -Explains why the rendering process exits. +**Return value** +| Type | Description | +| ------ | ------------- | +| string | Status code description of the resource response.| -| Name | Description | -| -------------------------- | ----------------- | -| ProcessAbnormalTermination | The rendering process exits abnormally. | -| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.| -| ProcessCrashed | The rendering process crashes due to a segmentation error or other errors. | -| ProcessOom | The program memory is running low. | -| ProcessExitUnknown | Other reason. | +### getResponseCode -### MixedMode +getResponseCode(): number -| Name | Description | -| ---------- | ---------------------------------- | -| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.| -| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. | -| None | HTTP and HTTPS hybrid content cannot be loaded. | +Obtains the status code of the resource response. -### CacheMode -| Name | Description | -| ------- | ------------------------------------ | -| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.| -| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | -| Online | The cache is not used to load the resources. All resources are obtained from the Internet. | -| Only | The cache alone is used to load the resources. | +**Return value** +| Type | Description | +| ------ | ----------- | +| number | Status code of the resource response.| -### FileSelectorResult -Notifies the **\** component of the file selection result. +### getResponseData -- APIs +getResponseData(): string - | Name | Description | - | ---------------------------------------------- | ------------------------------------------------------------ | - | handleFileList(fileList: Array\): void | Instructs the **\** component to select a file.
**fileList**: list of files to operate. | +Obtains the data in the resource response. -### FileSelectorParam -- APIs +**Return value** +| Type | Description | +| ------ | --------- | +| string | Data in the resource response.| - | Name | Description | - | -------------------------------- | ------------ | - | getTitle(): string | Obtains the title of the file selector. | - | getMode(): FileSelectorMode | Obtains the mode of the file selector. | - | getAcceptType(): Array\ | Obtains the file filtering type. | - | isCapture(): boolean | Checks whether multimedia capabilities are invoked.| +### getResponseEncoding -### FileSelectorMode -| Name | Description | -| -------------------- | ---------- | -| FileOpenMode | Open and upload a file. | -| FileOpenMultipleMode | Open and upload multiple files. | -| FileOpenFolderMode | Open and upload a folder.| -| FileSaveMode | Save a file. | +getResponseEncoding(): string + +Obtains the encoding string of the resource response. + +**Return value** +| Type | Description | +| ------ | ---------- | +| string | Encoding string of the resource response.| + +### getResponseHeader + +getResponseHeader() : Array\ + +Obtains the resource response header. + +**Return value** +| Type | Description | +| -------------------------- | -------- | +| Array\<[Header](#header)\> | Resource response header.| + +### getResponseMimeType + +getResponseMimeType(): string + +Obtains the MIME type of the resource response. + +**Return value** +| Type | Description | +| ------ | ------------------ | +| string | MIME type of the resource response.| + +### setResponseData9+ + +setResponseData(data: string) + +Sets the data in the resource response. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---- | ------ | ---- | ---- | ----------- | +| data | string | Yes | - | Resource response data to set.| + +### setResponseEncoding9+ + +setResponseEncoding(encoding: string) + +Sets the encoding string of the resource response. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------- | ------ | ---- | ---- | ------------ | +| encoding | string | Yes | - | Encoding string to set.| + +### setResponseMimeType9+ + +setResponseMimeType(mimeType: string) + +Sets the MIME type of the resource response. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------- | ------ | ---- | ---- | -------------------- | +| mimeType | string | Yes | - | MIME type to set.| + +### setReasonMessage9+ + +setReasonMessage(reason: string) + +Sets the status code description of the resource response. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ------ | ------ | ---- | ---- | --------------- | +| reason | string | Yes | - | Status code description to set.| + +### setResponseHeader9+ + +setResponseHeader(header: Array\) + +Sets the resource response header. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ------ | -------------------------- | ---- | ---- | ---------- | +| header | Array\<[Header](#header)\> | Yes | - | Resource response header to set.| + +### setResponseCode9+ + +setResponseCode(code: number) + +Sets the status code of the resource response. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---- | ------ | ---- | ---- | ------------- | +| code | number | Yes | - | Status code to set.| + +## FileSelectorResult9+ + +Notifies the **\** component of the file selection result. For details about the sample code, see [onShowFileSelector](#onshowfileselector9). + +### handleFileList9+ + +handleFileList(fileList: Array\): void + +Instructs the **\** component to select a file. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------- | --------------- | ---- | ---- | ------------ | +| fileList | Array\ | Yes | - | List of files to operate.| + +## FileSelectorParam9+ + +Implements the **FileSelectorParam** object. For details about the sample code, see [onShowFileSelector](#onshowfileselector9). + +### getTitle9+ + +getTitle(): string + +Obtains the title of the file selector. + +**Return value** +| Type | Description | +| ------ | ---------- | +| string | Title of the file selector.| + +### getMode9+ + +getMode(): FileSelectorMode + +Obtains the mode of the file selector. + +**Return value** +| Type | Description | +| ---------------------------------------- | ----------- | +| [FileSelectorMode](#fileselectormode)| Mode of the file selector.| + +### getAcceptType9+ + +getAcceptType(): Array\ + +Obtains the file filtering type. + +**Return value** +| Type | Description | +| --------------- | --------- | +| Array\ | File filtering type.| + +### isCapture9+ + +isCapture(): boolean + +Checks whether multimedia capabilities are invoked. + +**Return value** +| Type | Description | +| ------- | ------------ | +| boolean | Whether multimedia capabilities are invoked.| + +## HttpAuthHandler9+ + +Implements the **HttpAuthHandler** object. For details about the sample code, see [onHttpAuthRequest](#onhttpauthrequest9). + +### cancel9+ + +cancel(): void + +Cancels HTTP authentication as requested by the user. + +### confirm9+ + +confirm(userName: string, pwd: string): boolean + +Performs HTTP authentication with the user name and password provided by the user. + +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | ------ | ---- | ---- | ---------- | +| userName | string | Yes | - | HTTP authentication user name.| +| pwd | string | Yes | - | HTTP authentication password. | + +**Return value** +| Type | Description | +| ------- | --------------------- | +| boolean | Returns **true** if the authentication is successful; returns **false** otherwise.| + +### isHttpAuthInfoSaved9+ + +isHttpAuthInfoSaved(): boolean + +Uses the password cached on the server for authentication. + +**Return value** +| Type | Description | +| ------- | ------------------------- | +| boolean | Returns **true** if the authentication is successful; returns **false** otherwise.| + +## PermissionRequest9+ + +Implements the **PermissionRequest** object. For details about the sample code, see [onPermissionRequest](#onpermissionrequest9). + +### deny9+ + +deny(): void + +Denies the permission requested by the web page. + +### getOrigin9+ + +getOrigin(): string + +Obtains the origin of this web page. + +**Return value** + +| Type | Description | +| ------- | --------------------- | +| string | Origin of the web page that requests the permission.| + +### getAccessibleResource9+ + +getAccessibleResource(): Array\ + +Obtains the list of accessible resources requested for the web page. For details about the resource types, see [ProtectedResourceType](#protectedresourcetype9). + +**Return value** + +| Type | Description | +| --------------- | ----------------------- | +| Array\ | List of accessible resources requested by the web page.| + +### grant9+ + +grant(resources: Array\): void + +Grants the permission for resources requested by the web page. + +**Parameters** + +| Name | Type | Mandatory| Default Value| Description | +| --------- | --------------- | ---- | ----- | ---------------------- | +| resources | Array\ | Yes | - | List of accessible resources requested by the web page.| ## WebController @@ -219,35 +1721,134 @@ Defines a **WebController** to control the behavior of the **\** component. webController: WebController = new WebController() ``` +### requestFocus + +requestFocus() + +Requests focus for this web page. + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('requestFocus') + .onClick(() => { + this.controller.requestFocus(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### accessBackward accessBackward(): boolean Checks whether going to the previous page can be performed on the current page. +**Return value** +| Type | Description | +| ------- | --------------------- | +| boolean | Returns **true** if going to the previous page can be performed on the current page; returns **false** otherwise.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('accessBackward') + .onClick(() => { + let result = this.controller.accessBackward(); + console.log('result:' + result); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### accessForward accessForward(): boolean Checks whether going to the next page can be performed on the current page. +**Return value** +| Type | Description | +| ------- | --------------------- | +| boolean | Returns **true** if going to the next page can be performed on the current page; returns **false** otherwise.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('accessForward') + .onClick(() => { + let result = this.controller.accessForward(); + console.log('result:' + result); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### accessStep accessStep(step: number): boolean Indicates whether a specific number of steps forward or backward can be performed on the current page. -- Parameters - - | Name | Type | Mandatory | Default Value | Description | - | ---- | ------ | ---- | ---- | --------------------- | - | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.| - -- Return value - - | Type | Description | - | ------- | --------- | - | boolean | Whether to go forward or backward from the current page.| +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| ---- | ------ | ---- | ---- | --------------------- | +| step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.| + +**Return value** +| Type | Description | +| ------- | --------- | +| boolean | Whether to go forward or backward from the current page.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + @State steps: number = 2; + + build() { + Column() { + Button('accessStep') + .onClick(() => { + let result = this.controller.accessStep(this.steps); + console.log('result:' + result); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` ### backward @@ -255,17 +1856,25 @@ backward(): void Goes to the previous page based on the history stack. This API is generally used together with **accessBackward**. -### deleteJavaScriptRegister - -deleteJavaScriptRegister(name: string): void - -Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. - -- Parameters - - | Name | Type | Mandatory | Default Value | Description | - | ---- | ------ | ---- | ---- | ---------------------------------------- | - | name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.| +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('backward') + .onClick(() => { + this.controller.backward(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` ### forward @@ -273,27 +1882,278 @@ forward(): void Goes to the next page based on the history stack. This API is generally used together with **accessForward**. +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('forward') + .onClick(() => { + this.controller.forward(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### backOrForward9+ + +backOrForward(step: number): void + +Performs a specific number of steps forward or backward on the current page based on the history stack. No redirection will be performed if the corresponding page does not exist in the history stack. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---- | ------ | ---- | ---- | ----------- | +| step | number | Yes | - | Number of the steps to take.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller:WebController = new WebController(); + build() { + Column() { + Button('backOrForward') + .onClick(() => { + this.controller.backOrForward(); + }) + Web({ src:'www.example.com', controller:this.controller }) + } + } + ``` + +### deleteJavaScriptRegister + +deleteJavaScriptRegister(name: string) + +Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the [refresh](#refresh) API. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---- | ------ | ---- | ---- | ---------------------------------------- | +| name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + @State name: string = 'Object'; + + build() { + Column() { + Button('deleteJavaScriptRegister') + .onClick(() => { + this.controller.deleteJavaScriptRegister(this.name); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### getHitTest getHitTest(): HitTestType Obtains the element type of the area being clicked. -- HitTestType enums - - | Name | Description | - | ------------- | ------------------------ | - | EditText | Editable area. | - | Email | Email address. | - | HttpAnchor | Hyperlink where **src** is **http**. | - | HttpAnchorImg | Image with a hyperlink, where **src** is **http**.| - | Img | HTML::img tag. | - | Map | Geographical address. | - | Unknown | Unknown content. | +**Return value** +| Type | Description | +| ------------------------------- | ----------- | +| [HitTestType](#hittesttype)| Element type of the area being clicked.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('getHitTest') + .onClick(() => { + let hitType = this.controller.getHitTest(); + console.log("hitType: " + hitType); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getHitTestValue9+ +getHitTestValue(): HitTestValue + +Obtains the element information of the area being clicked. + +**Return value** +| Type | Description | +| ------------------------------ | ---------- | +| [HitTestValue](#hittestvalue9) | Element information of the area being clicked.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('getHitTestValue') + .onClick(() => { + let hitValue = this.controller.getHitTestValue(); + console.log("hitType: " + hitValue.getType()); + console.log("extra: " + hitValue.getExtra()); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getWebId9+ +getWebId(): number + +Obtains the index value of this **\** component, which can be used for **\** component management. + +**Return value** +| Type | Description | +| ------ | ------------ | +| number | Index value of the current **\** component.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('getWebId') + .onClick(() => { + let id = this.controller.getWebId(); + console.log("id: " + id); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getTitle9+ +getTitle(): string + +Obtains the title of the current web page. + +**Return value** +| Type | Description | +| ------ | -------- | +| string | Title of the current web page.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('getTitle') + .onClick(() => { + let title = this.controller.getTitle(); + console.log("title: " + title); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getPageHeight9+ +getPageHeight(): number + +Obtains the height of the current web page. + +**Return value** +| Type | Description | +| ------ | ---------- | +| number | Height of the current web page.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('getPageHeight') + .onClick(() => { + let pageHeight = this.controller.getPageHeight(); + console.log("pageHeight: " + pageHeight); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getDefaultUserAgent9+ +getDefaultUserAgent(): string + +Obtains the default user agent of the current web page. + +**Return value** +| Type | Description | +| ------ | ------- | +| string | Default user agent.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('getDefaultUserAgent') + .onClick(() => { + let userAgent = this.controller.getDefaultUserAgent(); + console.log("userAgent: " + userAgent); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` ### loadData -loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }): void +loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) Loads data. If **baseUrl** is empty, the specified character string will be loaded using the data protocol. @@ -301,32 +2161,74 @@ If **baseUrl** is set to a data URL, the encoded string will be loaded by the ** If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be processed by the **\** component as a non-encoded string in a manner similar to **loadUrl**. -- options - - | Name | Type | Mandatory | Default Value | Description | - | ---------- | ------ | ---- | ---- | ---------------------------------------- | - | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. | - | mimeType | string | Yes | - | Media type (MIME). | - | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. | - | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**.| - | historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.| +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------- | ------ | ---- | ---- | ---------------------------------------- | +| data | string | Yes | - | Character string obtained after being Base64 or URL encoded. | +| mimeType | string | Yes | - | Media type (MIME). | +| encoding | string | Yes | - | Encoding type, which can be Base64 or URL. | +| baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**.| +| historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('loadData') + .onClick(() => { + this.controller.loadData({ + data: "Source:
source
", + mimeType: "text/html", + encoding: "UTF-8" + }); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` ### loadUrl -loadUrl(options:{ url: string, headers?: Array\ }): void +loadUrl(options: { url: string | Resource, headers?: Array\ }) Loads a URL using the specified HTTP header. The object injected through **loadUrl** is valid only in the current document. It will be invalid on a new page navigated to through **loadUrl**. -The object injected through **registerJavaScriptProxy** is still valid on a new page navigated to through **loadUrl**. - -- options - - | Name | Type | Mandatory | Default Value | Description | - | ------- | ------------------------------ | ---- | ---- | -------------- | - | url | string | Yes | - | URL to load. | - | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.| +The object injected through **registerJavaScriptProxy** is still valid on a new page redirected through **loadUrl**. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ------- | -------------------------- | ---- | ---- | -------------- | +| url | string | Yes | - | URL to load. | +| headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('loadUrl') + .onClick(() => { + this.controller.loadUrl({ url: 'www.example.com' }); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` ### onActive @@ -334,130 +2236,994 @@ onActive(): void Invoked to instruct the **\** component to enter the foreground, active state. +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('onActive') + .onClick(() => { + this.controller.onActive(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### onInactive onInactive(): void Invoked to instruct the **\** component to enter the inactive state. +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('onInactive') + .onClick(() => { + this.controller.onInactive(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### zoom +zoom(factor: number): void + +Sets a zoom factor for the current web page. + +**Parameters** +| Name | Type | Mandatory | Description | +| ------ | ------ | ---- | ------------------------------ | +| factor | number | Yes | Zoom factor to set. A positive value indicates zoom-in, and a negative value indicates zoom-out.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + @State factor: number = 1; + + build() { + Column() { + Button('zoom') + .onClick(() => { + this.controller.zoom(this.factor); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### zoomIn9+ +zoomIn(): boolean + +Zooms in on the current web page by 20%. + +**Return value** +| Type | Description | +| ------- | ----------- | +| boolean | Operation result.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('zoomIn') + .onClick(() => { + let result = this.controller.zoomIn(); + console.log("result: " + result); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### zoomOut9+ +zoomOut(): boolean + +Zooms out the current 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 -refresh(): void +refresh() Invoked to instruct the **\** component to refresh the web page. -### registerJavaScriptProxy - -registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\ }): void - -Injects a JavaScript object into the window and invokes the methods of the object in the window. After the registration, the **refresh** API must be invoked for the registration to take effect. +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('refresh') + .onClick(() => { + this.controller.refresh(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` -- options +### registerJavaScriptProxy - | Name | Type | Mandatory | Default Value | Description | - | ---------- | --------------- | ---- | ---- | ---------------------------------------- | - | object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.| - | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.| - | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | +registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\ }) + +Registers a JavaScript object and invokes the methods of the object in the window. You must invoke the [refresh](#refresh) API for the registration to take effect. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ---------- | --------------- | ---- | ---- | ---------------------------------------- | +| object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.| +| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.| +| methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct Index { + controller: WebController = new WebController() + testObj = { + test: (data) => { + return "ArkUI Web Component"; + }, + toString: () => { + console.log('Web Component toString'); + } + } + build() { + Column() { + Row() { + Button('Register JavaScript To Window').onClick(() => { + this.controller.registerJavaScriptProxy({ + object: this.testObj, + name: "objName", + methodList: ["test", "toString"], + }); + }) + } + Web({ src: $rawfile('index.html'), controller: this.controller }) + .javaScriptAccess(true) + } + } + } + ``` + + ```html + + + + + + Hello world! + + + + + ``` ### runJavaScript -runJavaScript(options: { script: string, callback?: (result: string) => void }): void +runJavaScript(options: { script: string, callback?: (result: string) => void }) Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**. -- options +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------- | ------------------------ | ---- | ---- | ---------------------------------------- | +| script | string | Yes | - | JavaScript script. | +| callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + @State webResult: string = '' + build() { + Column() { + Text(this.webResult).fontSize(20) + Web({ src: $rawfile('index.html'), controller: this.controller }) + .javaScriptAccess(true) + .onPageEnd(e => { + this.controller.runJavaScript({ + script: 'test()', + callback: (result: string)=> { + this.webResult = result + console.info(`The test() return value is: ${result}`) + }}); + console.info('url: ', e.url); + }) + } + } + } + ``` + + ```html + + + + + + Hello world! + + + - | Name | Type | Mandatory | Default Value | Description | - | -------- | ------------------------ | ---- | ---- | ---------------------------------------- | - | script | string | Yes | - | JavaScript script. | - | callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.| + ``` ### stop -stop(): void +stop() Stops page loading. +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('stop') + .onClick(() => { + this.controller.stop(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + ### clearHistory clearHistory(): void Clears the browsing history. -### getCookieManager +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('clearHistory') + .onClick(() => { + this.controller.clearHistory(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getCookieManager9+ getCookieManager(): WebCookie Obtains the cookie management object of the **\** component. -- Return value - | Type | Description | - | --------- | ---------------------------------------- | - | WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).| + +**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 }) + } + } + } + ``` + +## HitTestValue9+ +Implements the **HitTestValue** object. For details about the sample code, see [getHitTestValue](#gethittestvalue9). + +### getType9+ +getType(): HitTestType + +Obtains the element type of the area being clicked. + +**Return value** +| Type | Description | +| ------------------------------- | ------------- | +| [HitTestType](#hittesttype)| Element type of the area being clicked.| + +### getExtra9+ +getExtra(): string + +Obtains the extra information of the area being clicked. If the area being clicked is an image or a link, the extra information is the URL of the image or link. + +**Return value** +| Type | Description | +| ------ | ------------ | +| string | Extra information of the area being clicked.| + + ## WebCookie + Manages behavior of cookies in **\** components. All **\** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management. -### setCookie + +### setCookie9+ setCookie(url: string, value: string): boolean -Sets the cookie. This API is synchronous. +Sets the cookie. This API returns the result synchronously. + +**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 }) + } + } + } + ``` -- Parameters +### saveCookieSync9+ +saveCookieSync(): boolean - | 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.| +Saves this cookie in the memory to the drive. This API returns the result synchronously. + +**Return value** +| Type | Description | +| ------- | -------------------- | +| boolean | Operation result.| + +**Example** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('saveCookieSync') + .onClick(() => { + let result = this.controller.getCookieManager().saveCookieSync(); + console.log("result: " + result); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +## WebDataBase9+ +Implements the **WebDataBase** object. + +### existHttpAuthCredentials9+ + +static existHttpAuthCredentials(): boolean + +Checks whether any HTTP authentication credentials exist in the cache. This API returns the result synchronously. + +**Return value** +| Type | Description | +| ------- | ---------------------------------------- | +| boolean | Returns **true** if any HTTP authentication credentials exist in the cache; returns **false** otherwise.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('existHttpAuthCredentials') + .onClick(() => { + let result = web.WebDataBase.existHttpAuthCredentials(); + console.log('result: ' + result); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### deleteHttpAuthCredentials9+ + +static deleteHttpAuthCredentials(): void + +Deletes all HTTP authentication credentials saved in the cache. This API returns the result synchronously. + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + + build() { + Column() { + Button('deleteHttpAuthCredentials') + .onClick(() => { + web.WebDataBase.deleteHttpAuthCredentials(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### getHttpAuthCredentials9+ + +static getHttpAuthCredentials(host: string, realm: string): Array\ + +Obtains the HTTP authentication credentials for a given host and realm. This API returns the result synchronously. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| ----- | ------ | ---- | ---- | ---------------- | +| host | string | Yes | - | Host for which you want to obtain the HTTP authentication credentials.| +| realm | string | Yes | - | Realm for which you want to obtain the HTTP authentication credentials. | + +**Return value** +| Type | Description | +| --------------- | ---------------------- | +| Array\ | Returns the array of the matching user names and passwords if the operation is successful; returns an empty array otherwise.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + host: string = "www.spincast.org"; + realm: string = "protected example"; + username_password: string[]; + build() { + Column() { + Button('getHttpAuthCredentials') + .onClick(() => { + this.username_password = web.WebDataBase.getHttpAuthCredentials(this.host, this.realm); + console.log('num: ' + this.username_password.length); + ForEach(this.username_password, (item) => { + console.log('username_password: ' + item); + }, item => item) + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### saveHttpAuthCredentials9+ + +static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void + +Saves HTTP authentication credentials for a given host and realm. This API returns the result synchronously. + +**Parameters** +| Name | Type | Mandatory | Default Value | Description | +| -------- | ------ | ---- | ---- | ---------------- | +| host | string | Yes | - | Host to which HTTP authentication credentials apply.| +| realm | string | Yes | - | Realm to which HTTP authentication credentials apply. | +| username | string | Yes | - | User name. | +| password | string | Yes | - | Password. | + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + host: string = "www.spincast.org"; + realm: string = "protected example"; + build() { + Column() { + Button('saveHttpAuthCredentials') + .onClick(() => { + web.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche"); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +## WebStorage9+ +Implements the **WebStorage** object, which can be used to manage the Web SQL and the HTML5 Web Storage API. All **\** components in an application share one **WebStorage**. +### deleteAllData9+ +static deleteAllData(): void + +Deletes all data in the Web SQL database. + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + build() { + Column() { + Button('deleteAllData') + .onClick(() => { + web.WebStorage.deleteAllData(); + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### deleteOrigin9+ +static deleteOrigin(origin : string): void + +Deletes all data in the specified origin. + +**Parameters** +| Name | Type | Mandatory | Description | +| ------ | ------ | ---- | ---------- | +| origin | string | Yes | Index of the origin.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getHttpAuthCredentials') + .onClick(() => { + web.WebStorage.deleteOrigin(this.origin); + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### getOrigins9+ +static getOrigins(callback: AsyncCallback>) : void + +Obtains information about all origins that are currently using the Web SQL database. This API uses an asynchronous callback to return the result. + +**Parameters** +| Name | Type | Mandatory | Description | +| -------- | ---------------------------------------- | ---- | ----------------------------------- | +| callback | AsyncCallback> | Yes | Callback used to return the information about the origins. For details, see **WebStorageOrigin**.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getOrigins') + .onClick(() => { + web.WebStorage.getOrigins((error, origins) => { + if (error) { + console.log('error: ' + error); + return; + } + for (let i = 0; i < origins.length; i++) { + console.log('origin: ' + origins[i].origin); + console.log('usage: ' + origins[i].usage); + console.log('quota: ' + origins[i].quota); + } + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` -### saveCookieSync -saveCookieSync(): boolean +### getOrigins9+ +static getOrigins() : Promise> -Saves this cookie in the memory to the disk. This API is synchronous. -- Return value - | Type | Description | - | ------- | -------------------- | - | boolean | Returns the operation result.| -## Example - -```ts -// webComponent.ets -@Entry -@Component -struct WebComponent { - @State javaScriptAccess: boolean = true; - @State fileAccess: boolean = true; - controller: WebController = new WebController(); - build() { - Column() { - Web({ src: $rawfile('index.html'), controller: this.controller }) - .javaScriptAccess(this.javaScriptAccess) - .fileAccess(this.fileAccess) - .onPageEnd(e => { - // test() has been defined in index.html. - this.controller.runJavaScript({ script: 'test()' }); - console.log("url: ", e.url); - }) - } - } -} -``` -```html - - - - - - Hello world! - - - -``` +Obtains information about all origins that are currently using the Web SQL database. This API uses a promise to return the result. + +**Return value** + +| Type | Description | +| ---------------------------------------- | ---------------------------------------- | +| Promise> | Promise used to return the information about the origins. For details, see **WebStorageOrigin**.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getOrigins') + .onClick(() => { + web.WebStorage.getOrigins() + .then(origins => { + for (let i = 0; i < origins.length; i++) { + console.log('origin: ' + origins[i].origin); + console.log('usage: ' + origins[i].usage); + console.log('quota: ' + origins[i].quota); + } + }) + .catch(error => { + console.log('error: ' + error); + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### getOriginQuota9+ +static getOriginQuota(origin : string, callback : AsyncCallback\) : void + +Obtains the storage quota of an origin in the Web SQL database, in bytes. This API uses an asynchronous callback to return the result. + +**Parameters** +| Name | Type | Mandatory | Description | +| -------- | ---------------------- | ---- | --------- | +| origin | string | Yes | Index of the origin.| +| callback | AsyncCallback\ | Yes | Callback used to return the storage quota of the origin.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getOriginQuota') + .onClick(() => { + web.WebStorage.getOriginQuota(this.origin, (error, quota) => { + if (error) { + console.log('error: ' + error); + return; + } + console.log('quota: ' + quota); + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### getOriginQuota9+ +static getOriginQuota(origin : string) : Promise\ + +Obtains the storage quota of an origin in the Web SQL database, in bytes. This API uses a promise to return the result. + +**Parameters** +| Name | Type | Mandatory | Description | +| ------ | ------ | ---- | ---------- | +| origin | string | Yes | Index of the origin.| + +**Return value** +| Type | Description | +| ---------------- | ----------------------- | +| Promise\ | Promise used to return the storage quota of the origin.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getOriginQuota') + .onClick(() => { + web.WebStorage.getOriginQuota(this.origin) + .then(quota => { + console.log('quota: ' + quota); + }) + .catch(error => { + console.log('error: ' + error); + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### getOriginUsage9+ +static getOriginUsage(origin : string, callback : AsyncCallback\) : void + +Obtains the storage usage of an origin in the Web SQL database, in bytes. This API uses an asynchronous callback to return the result. + +**Parameters** +| Name | Type | Mandatory | Description | +| -------- | ---------------------- | ---- | ---------- | +| origin | string | Yes | Index of the origin.| +| callback | AsyncCallback\ | Yes | Callback used to return the storage usage of the origin. | + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getOriginUsage') + .onClick(() => { + web.WebStorage.getOriginUsage(this.origin, (error, usage) => { + if (error) { + console.log('error: ' + error); + return; + } + consloe.log('usage: ' + usage); + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +### getOriginUsage9+ +static getOriginUsage(origin : string) : Promise\ + +Obtains the storage usage of an origin in the Web SQL database, in bytes. This API uses a promise to return the result. + +**Parameters** +| Name | Type | Mandatory | Description | +| ------ | ------ | ---- | ---------- | +| origin | string | Yes | Index of the origin.| + +**Return value** +| Type | Description | +| ---------------- | ---------------------- | +| Promise\ | Promise used to return the storage usage of the origin.| + +**Example** + ```ts + // xxx.ets + import web from '@ohos.web'; + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + origin: string = "origin"; + build() { + Column() { + Button('getOriginQuota') + .onClick(() => { + web.WebStorage.getOriginUsage(this.origin) + .then(usage => { + console.log('usage: ' + usage); + }) + .catch(error => { + console.log('error: ' + error); + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + .databaseAccess(true) + } + } + } + ``` + +## WebStorageOrigin9+ + +Provides usage information about the Web SQL database. + +**Parameters** +| Name | Type | Mandatory | Description | +| ------ | ------ | ---- | ---------- | +| origin | string | Yes | Index of the origin.| +| usage | number | Yes | Storage usage of the origin. | +| quota | number | Yes | Storage quota of the origin. | + +## MessageLevel enums + +| Name | Description | +| ----- | :---- | +| Debug | Debug level.| +| Error | Error level.| +| Info | Information level.| +| Log | Log level.| +| Warn | Warning level. | + +## RenderExitReason + +Explains why the rendering process exits. + +| Name | Description | +| -------------------------- | ----------------- | +| ProcessAbnormalTermination | The rendering process exits abnormally. | +| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.| +| ProcessCrashed | The rendering process crashes due to segmentation or other errors. | +| ProcessOom | The program memory is running low. | +| ProcessExitUnknown | Other reason. | + +## MixedMode + +| Name | Description | +| ---------- | ---------------------------------- | +| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.| +| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. | +| None | HTTP and HTTPS hybrid content cannot be loaded. | + +## CacheMode +| Name | Description | +| ------- | ------------------------------------ | +| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.| +| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. | +| Online | The cache is not used to load the resources. All resources are obtained from the Internet. | +| Only | The cache alone is used to load the resources. | + +## FileSelectorMode +| Name | Description | +| -------------------- | ---------- | +| FileOpenMode | Open and upload a file. | +| FileOpenMultipleMode | Open and upload multiple files. | +| FileOpenFolderMode | Open and upload a folder.| +| FileSaveMode | Save a file. | + + ## HitTestType + +| Name | Description | +| ------------- | ------------------------ | +| EditText | Editable area. | +| Email | Email address. | +| HttpAnchor | Hyperlink whose **src** is **http**. | +| HttpAnchorImg | Image with a hyperlink, where **src** is **http**.| +| Img | HTML::img tag. | +| Map | Geographical address. | +| Unknown | Unknown content. | + +## ProtectedResourceType9+ -![](figures/Web.png) +| Name | Description | Remarks | +| --------- | -------------- | -------------- | +| MidiSysex | MIDI SYSEX resources| Currently, only permission events can be reported. MIDI devices are not yet supported.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md index 3a90aab90084be24746bba23aa9b224b15b2b99f..b91476d6a6e485f6521f52335259233fdcbea967 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md @@ -1,9 +1,10 @@ # XComponent > **NOTE**
+ > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - The **\** can accept and display the EGL/OpenGLES and media data input. + The **\** can accept and display the EGL/OpenGL ES and media data input. ## Required Permissions @@ -17,22 +18,34 @@ XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\) - - Name - - | Name | Type | Mandatory | Description | - | ----------- | --------------------------------------- | --------- | ------------------------------------------------------------ | - | id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. | - | type | string | Yes | Type of the component. The options are as follows:
- **surface**: The content of this component is displayed individually, without being combined with that of other components.
- **component**: The content of this component is displayed after having been combined with that of other components. | - | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. | - | controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. | +**Parameters** +| Name | Type | Mandatory | Description | +| --------- | ------ | ---- | ----- | +| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.| +| type | string | Yes | Type of the component. The options are as follows:
-**surface**: The content of this component is displayed individually, without being combined with that of other components.
-**component**: The content of this component is displayed after having been combined with that of other components.| +| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer.| +| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component.| ## Events -| Name | Description | -| ------------------------------- | ------------------------ | -| onLoad(context?: object) => void | Triggered when the plug-in is loaded. | -| onDestroy() => void | Triggered when the plug-in is destroyed. | +### onLoad + +onLoad(callback: (event?: object) => void ) + +Triggered when the plug-in is loaded. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------------- | ------ | ---- | ----------------------- | +| event | object | No | Context of the **\** object. The APIs contained in the context are defined at the C++ layer by developers.| + +### onDestroy + +onDestroy(event: () => void ) + +Triggered when the plug-in is destroyed. ## XComponentController @@ -50,11 +63,13 @@ getXComponentSurfaceId(): string Obtains the ID of the surface held by the **\**. The ID can be used for @ohos interfaces, such as camera-related interfaces. - - Return value +**System API**: This is a system API. - | Type | Description | - | ------ | --------------------------- | - | string | ID of the surface held by the **\**. | +**Return value** + +| Type | Description | +| ------ | ----------------------- | +| string | ID of the surface held by the **\**.| ### setXComponentSurfaceSize @@ -62,12 +77,14 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): Sets the width and height of the surface held by the **\**. -- Parameters +**System API**: This is a system API. + +**Parameters** - | Name | Type | Mandatory | Default Value | Description | - | ------------- | -------- | ---- | ------ | ----------------------------- | - | surfaceWidth | number | Yes | - | Width of the surface held by the **\**. | - | surfaceHeight | number | Yes | - | Height of the surface held by the **\**. | +| Name | Type | Mandatory | Description | +| ------------- | ------ | ---- | ----------------------- | +| surfaceWidth | number | Yes | Width of the surface held by the **\**.| +| surfaceHeight | number | Yes | Height of the surface held by the **\**.| ### getXComponentContext @@ -75,15 +92,16 @@ getXComponentContext(): Object Obtains the context of an **\** object. -- Return value +**Return value** - | Type | Description | - | ------ | ------------------------------------------------------------ | - | Object | Context of an **\** object. The APIs contained in the context are defined by developers. | +| Type | Description | +| ------ | ---------------------------------------- | +| Object | Context of the **\** object. The APIs contained in the context are defined by developers.| ## Example -Provide a surface-type **\** to support capabilities such as camera preview. +Provide a surface-type **\** to support capabilities such as camera preview. +You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. ```ts // xxx.ets diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index 4e27ab2eb1aaf983c0128787925377339d67ad3e..d049ce9afe2f55887fd50d445ae950f14850f200 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -1,8 +1,10 @@ # Component ID +**id** identifies a component uniquely within an application. This module provides APIs for obtaining the attributes of or sending events to the component with the specified ID. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -12,93 +14,250 @@ None ## Attributes - | Name | Type | Default Value | Description | +| Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| id | string | '' | Unique ID of the component. The uniqueness is ensured by the user. | +| id | string | '' | Unique ID you assigned to the component.| ## APIs -### getInspectorByKey +### getInspectorByKey9+ getInspectorByKey(id: string): string Obtains all attributes of the component with the specified ID, excluding the information about child components. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | id | string | Yes | - | ID of the component whose attributes are to be obtained. | + | id | string | Yes| - | ID of the component whose attributes are to be obtained.| - Return value - | Type | Description | + | Type| Description| | -------- | -------- | - | string | JSON string of the component attribute list. | + | string | JSON string of the component attribute list.| +### getInspectorTree9+ -### sendEventByKey +getInspectorTree(): string + +Obtains the component tree and component attributes. + +- Return value + + | Type | Description | + | ------ | ---------------------------------- | + | string | JSON string of the component tree and component attribute list.| + +### sendEventByKey9+ sendEventByKey(id: string, action: number, params: string): boolean Sends an event to the component with the specified ID. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | id | string | Yes | - | ID of the component for which the event is to be sent. | - | action | number | Yes | - | Type of the event to be sent. The options are as follows:
- Click event: 10.
- LongClick: 11. | - | params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. | + | id | string | Yes| - | ID of the component to which the event is to be sent.| + | action | number | Yes| - | Type of the event to be sent. The options are as follows:
- **10**: click event.
- **11**: long-click event.| + | params | string | Yes| - | Event parameters. If there is no parameter, pass an empty string **""**.| - Return value - | Type | Description | + | Type| Description| | -------- | -------- | - | boolean | Returns **false** if the component with the specified ID cannot be found; returns **true** otherwise. | + | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.| + +### sendTouchEvent9+ + +sendTouchEvent(event: TouchObject): boolean + +Sends a touch event. + +- Parameters + + | Name | Type | Mandatory| Default Value| Description | + | ----- | ----------- | ---- | ------ | ------------------------------------------------------------ | + | event | TouchObject | Yes | - | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).| + +- Return value + + | Type | Description | + | ------- | ------------------------------------------- | + | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| + +### sendKeyEvent9+ + +sendKeyEvent(event: KeyEvent): boolean + +Sends a key event. + +- Parameters + + | Name | Type | Mandatory| Default Value| Description | + | ----- | -------- | ---- | ------ | ------------------------------------------------------------ | + | event | KeyEvent | Yes | - | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).| + +- Return value + + | Type | Description | + | ------- | --------------------------------------------- | + | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| + +### sendMouseEvent9+ + +sendMouseEvent(event: MouseEvent): boolean + +Sends a mouse event. + +- Parameters + + | Name | Type | Mandatory| Default Value| Description | + | ----- | ---------- | ---- | ------ | ------------------------------------------------------------ | + | event | MouseEvent | Yes | - | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).| + +- Return value + | Type | Description | + | ------- | --------------------------------------------- | + | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.| ## Example - -``` +```ts +// xxx.ets +class Utils { + static rect_left; + static rect_top; + static rect_right; + static rect_bottom; + static rect_value; + + static getComponentRect(key) { + let strJson = getInspectorByKey(key); + let obj = JSON.parse(strJson); + console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj)); + let rectInfo = JSON.parse('[' + obj.$rect + ']') + console.info("[getInspectorByKey] rectInfo is: " + rectInfo); + this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0] + this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1] + this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0] + this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1] + return this.rect_value = { + "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom + } + } +} + @Entry @Component struct IdExample { + @State text: string = '' + build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button() { - Text('click') - .fontSize(25) - .fontWeight(FontWeight.Bold) - } - .type(ButtonType.Capsule) - .margin({ - top: 20 - }).onClick(() => { + Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold) + }.margin({ top: 20 }).backgroundColor('#0D9FFB') + .onKeyEvent(() => { + this.text = "onKeyTab" + }) + + Button() { + Text('click to start').fontSize(25).fontWeight(FontWeight.Bold) + }.margin({ top: 20 }) + .onClick(() => { console.info(getInspectorByKey("click")) console.info(getInspectorTree()) + this.text = "Button 'click to start' is clicked" setTimeout(() => { - sendEventByKey("longclick", 11, "") + sendEventByKey("longClick", 11, "") }, 2000) }).id('click') Button() { - Text('longclick') - .fontSize(25) - .fontWeight(FontWeight.Bold) - } - .type(ButtonType.Capsule) - .margin({ - top: 20 - }) - .backgroundColor('#0D9FFB') + Text('longClick').fontSize(25).fontWeight(FontWeight.Bold) + }.margin({ top: 20 }).backgroundColor('#0D9FFB') .gesture( - LongPressGesture().onActionEnd(() => { - console.info('long clicked') - })) - .id('longclick') + LongPressGesture().onActionEnd(() => { + console.info('long clicked') + this.text = "Button 'longClick' is longclicked" + setTimeout(() => { + let rect = Utils.getComponentRect('onTouch') + let touchPoint: TouchObject = { + id: 1, + x: rect.left + (rect.right - rect.left) / 2, + y: rect.top + (rect.bottom - rect.top) / 2, + type: TouchType.Down, + screenX: rect.left + (rect.right - rect.left) / 2, + screenY: rect.left + (rect.right - rect.left) / 2, + } + sendTouchEvent(touchPoint) + touchPoint.type = TouchType.Up + sendTouchEvent(touchPoint) + }, 2000) + })).id('longClick') + + Button() { + Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold) + }.type(ButtonType.Capsule).margin({ top: 20 }) + .onClick(() => { + console.info('onTouch is clicked') + this.text = "Button 'onTouch' is clicked" + setTimeout(() => { + let rect = Utils.getComponentRect('onMouse') + let mouseEvent: MouseEvent = { + button: MouseButton.Left, + action: MouseAction.Press, + x: rect.left + (rect.right - rect.left) / 2, + y: rect.top + (rect.bottom - rect.top) / 2, + screenX: rect.left + (rect.right - rect.left) / 2, + screenY: rect.top + (rect.bottom - rect.top) / 2, + timestamp: 1, + target: { + area: { + width: 1, + height: 1, + position: { + x: 1, + y: 1 + }, + globalPosition: { + x: 1, + y: 1 + } + } + }, + source: SourceType.Mouse + } + sendMouseEvent(mouseEvent) + }, 2000) + }).id('onTouch') + + Button() { + Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold) + }.margin({ top: 20 }).backgroundColor('#0D9FFB') + .onMouse(() => { + console.info('onMouse') + this.text = "Button 'onMouse' in onMouse" + setTimeout(() => { + let keyEvent: KeyEvent = { + type: KeyType.Down, + keyCode: 2049, + keyText: 'tab', + keySource: 4, + deviceId: 0, + metaKey: 0, + timestamp: 0 + } + sendKeyEvent(keyEvent) + }, 2000) + }).id('onMouse') + + Text(this.text).fontSize(25).padding(15) } - .width('100%') - .height('100%') + .width('100%').height('100%') } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index c18d5a4e20ca5f48ab6d5ccf368d9936c174fe0d..847fd5b42f9ebe7358f25d0c3a21f859d9451f32 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -1,7 +1,8 @@ # Z-order Control +The **zIndex** attribute sets the z-order of a component in the stacking context. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -13,15 +14,16 @@ None ## Attributes - | Name | Type | Default Value | Description | +| Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level. | +| zIndex | number | 0 | Hierarchy of sibling components in a container. A larger value indicates a higher display level. | ## Example - -``` + +```ts +// xxx.ets @Entry @Component struct ZIndexExample { @@ -38,7 +40,7 @@ struct ZIndexExample { Text('third child, zIndex(1)') .size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart) .zIndex(1) - } + }.width('100%').height(200) }.width('100%').height(200) } } diff --git a/en/application-dev/ui/ts-event-configuration.md b/en/application-dev/ui/ts-event-configuration.md index 78249f90d8583137c1df482b544f032cfe0e321e..8711bd168093769c0ff908d96c965cc802e4535b 100644 --- a/en/application-dev/ui/ts-event-configuration.md +++ b/en/application-dev/ui/ts-event-configuration.md @@ -1,11 +1,9 @@ # Event Configuration - -You can use event methods to configure events supported by components. +You can use event methods to configure events supported by components. Since API version 9, you can obtain the context associated with the current component from the callback. For details, see [Obtaining the Context on an eTS Page](../ability/context-userguide.md). - Example of using a lambda expression to configure the event of a component: - ```ts // Counter is a private data variable defined in the component. Button('add counter') @@ -15,8 +13,7 @@ You can use event methods to configure events supported by components. ``` -- When using an anonymous function expression to configure the event of a component, bind must be used to ensure that the contained components are referenced by this in the function body. - +- When using an anonymous function expression to configure the event of a component, **bind** must be used to ensure that the contained components are referenced by **this** in the function body. ```ts // Counter is a private data variable defined in the component. Button('add counter') @@ -27,14 +24,13 @@ You can use event methods to configure events supported by components. - Example of using a component's member function to configure the event of the component: - ```ts myClickHandler(): void { // do something } - + ... - + Button('add counter') .onClick(this.myClickHandler) ```