# @ohos.web.webview (Webview) @ohos.web.webview提供web控制能力,[Web](ts-basic-components-web.md)组件提供网页显示的能力。 > **说明:** > > - 本模块接口从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > > - 示例效果请以真机运行为准,当前IDE预览器不支持。 ## 需要权限 访问在线网页时需添加网络权限:ohos.permission.INTERNET,具体申请方式请参考[声明权限](../../security/AccessToken/declare-permissions.md)。 ## 导入模块 ```ts import { webview } from '@kit.ArkWeb'; ``` ## once once(type: string, callback: Callback\): void 订阅一次指定类型Web事件的回调,Web事件的类型目前仅支持"webInited",在Web引擎初始化完成时触发。 当应用中开始加载第一个Web组件时,Web引擎初始化,且后续再在同一应用中继续加载其他Web组件时不会再触发once接口。当应用销毁最后一个Web组件时,若再加载第一个Web组件,应用重新进入Web引擎初始化流程。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------- | ---- | -------------------- | | type | string | 是 | Web事件的类型,目前支持:"webInited"(Web初始化完成)。 | | callback | Callback\ | 是 | 所订阅的回调函数。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; webview.once("webInited", () => { console.log("configCookieSync"); webview.WebCookieManager.configCookieSync("https://www.example.com", "a=b"); }) @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ## WebMessagePort 通过WebMessagePort可以进行消息的发送以及接收,发送[WebMessageType](#webmessagetype10)/[WebMessage](#webmessage)类型消息给HTML5侧。 ### 属性 **系统能力:** SystemCapability.Web.Webview.Core | 名称 | 类型 | 可读 | 可写 | 说明 | | ------------ | ------ | ---- | ---- | ------------------------------------------------| | isExtentionType10+ | boolean | 是 | 是 | 创建WebMessagePort时是否指定使用扩展增强接口,[postMessageEventExt](#postmessageeventext10)、[onMessageEventExt](#onmessageeventext10),默认false不使用。 | ### postMessageEvent postMessageEvent(message: WebMessage): void 发送[WebMessage](#webmessage)类型消息给HTML5侧,必须先调用[onMessageEvent](#onmessageevent),否则会发送失败。完整示例代码参考[postMessage](#postmessage)。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------ | ---- | :------------- | | message | [WebMessage](#webmessage) | 是 | 要发送的消息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------- | | 17100010 | Failed to post messages through the port. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; build() { Column() { Button('postMessageEvent') .onClick(() => { try { this.ports = this.controller.createWebMessagePorts(); this.controller.postMessage('__init_port__', [this.ports[0]], '*'); this.ports[1].postMessageEvent("post message from ets to html5"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### onMessageEvent onMessageEvent(callback: (result: WebMessage) => void): void 在应用侧的消息端口上注册回调函数,接收HTML5侧发送过来的[WebMessage](#webmessage)类型消息。完整示例代码参考[postMessage](#postmessage)。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | ---- | :------------------- | | callback | (result: [WebMessage](#webmessage)) => void | 是 | 接收到的消息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------------------------------- | | 17100006 | Failed to register a message event for the port.| | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed.| **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; build() { Column() { Button('onMessageEvent') .onClick(() => { try { this.ports = this.controller.createWebMessagePorts(); this.ports[1].onMessageEvent((msg) => { if (typeof (msg) == "string") { console.log("received string message from html5, string is:" + msg); } else if (typeof (msg) == "object") { if (msg instanceof ArrayBuffer) { console.log("received arraybuffer from html5, length is:" + msg.byteLength); } else { console.log("not support"); } } else { console.log("not support"); } }) } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### postMessageEventExt10+ postMessageEventExt(message: WebMessageExt): void 发送[WebMessageType](#webmessagetype10)类型消息给HTML5侧,必须先调用[onMessageEventExt](#onmessageeventext10),否则会发送失败。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------ | ---- | :------------- | | message | [WebMessageExt](#webmessageext10) | 是 | 要发送的消息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------- | | 17100010 | Failed to post messages through the port. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | ### onMessageEventExt10+ onMessageEventExt(callback: (result: WebMessageExt) => void): void 在应用侧的消息端口上注册回调函数,接收HTML5侧发送过来的[WebMessageType](#webmessagetype10)类型消息。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | ---- | :------------------- | | callback | (result: [WebMessageExt](#webmessageext10)) => void | 是 | 接收到的消息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------------------------------- | | 17100006 | Failed to register a message event for the port. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; class TestObj { test(str: string): ArrayBuffer { let buf = new ArrayBuffer(str.length); let buff = new Uint8Array(buf); for (let i = 0; i < str.length; i++) { buff[i] = str.charCodeAt(i); } return buf; } } // 应用与网页互发消息的示例:使用"init_web_messageport"的通道,通过端口0在应用侧接受网页发送的消息,通过端口1在网页侧接受应用发送的消息。 @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; nativePort: webview.WebMessagePort | null = null; @State msg1: string = ""; @State msg2: string = ""; message: webview.WebMessageExt = new webview.WebMessageExt(); @State testObjtest: TestObj = new TestObj(); build() { Column() { Text(this.msg1).fontSize(16) Text(this.msg2).fontSize(16) Button('SendToH5 setString').margin({ right: 800, }) .onClick(() => { // 使用本侧端口发送消息给HTML5 try { console.log("In ArkTS side send true start"); if (this.nativePort) { this.message.setType(1); this.message.setString("helloFromEts"); this.nativePort.postMessageEventExt(this.message); } } catch (error) { console.error(`In ArkTS side send message catch error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('SendToH5 setNumber').margin({ top: 10, right: 800, }) .onClick(() => { // 使用本侧端口发送消息给HTML5 try { console.log("In ArkTS side send true start"); if (this.nativePort) { this.message.setType(2); this.message.setNumber(12345); this.nativePort.postMessageEventExt(this.message); } } catch (error) { console.error(`In ArkTS side send message catch error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('SendToH5 setBoolean').margin({ top: -90, }) .onClick(() => { // 使用本侧端口发送消息给HTML5 try { console.log("In ArkTS side send true start"); if (this.nativePort) { this.message.setType(3); this.message.setBoolean(true); this.nativePort.postMessageEventExt(this.message); } } catch (error) { console.error(`In ArkTS side send message catch error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('SendToH5 setArrayBuffer').margin({ top: 10, }) .onClick(() => { // 使用本侧端口发送消息给HTML5 try { console.log("In ArkTS side send true start"); if (this.nativePort) { this.message.setType(4); this.message.setArrayBuffer(this.testObjtest.test("Name=test&Password=test")); this.nativePort.postMessageEventExt(this.message); } } catch (error) { console.error(`In ArkTS side send message catch error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('SendToH5 setArray').margin({ top: -90, left: 800, }) .onClick(() => { // 使用本侧端口发送消息给HTML5 try { console.log("In ArkTS side send true start"); if (this.nativePort) { this.message.setType(5); this.message.setArray([1, 2, 3]); this.nativePort.postMessageEventExt(this.message); } } catch (error) { console.error(`In ArkTS side send message catch error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('SendToH5 setError').margin({ top: 10, left: 800, }) .onClick(() => { // 使用本侧端口发送消息给HTML5 try { console.log("In ArkTS side send true start"); throw new ReferenceError("ReferenceError"); } catch (error) { if (this.nativePort) { this.message.setType(6); this.message.setError(error); this.nativePort.postMessageEventExt(this.message); } console.error(`In ArkTS side send message catch error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .onPageEnd(() => { console.log("In ArkTS side message onPageEnd init message channel"); // 1. 创建消息端口 this.ports = this.controller.createWebMessagePorts(true); // 2. 发送端口1到HTML5 this.controller.postMessage("init_web_messageport", [this.ports[1]], "*"); // 3. 保存端口0到本地 this.nativePort = this.ports[0]; // 4. 设置回调函数 this.nativePort.onMessageEventExt((result) => { console.log("In ArkTS side got message"); try { let type = result.getType(); console.log("In ArkTS side getType:" + type); switch (type) { case webview.WebMessageType.STRING: { this.msg1 = "result type:" + typeof (result.getString()); this.msg2 = "result getString:" + ((result.getString())); break; } case webview.WebMessageType.NUMBER: { this.msg1 = "result type:" + typeof (result.getNumber()); this.msg2 = "result getNumber:" + ((result.getNumber())); break; } case webview.WebMessageType.BOOLEAN: { this.msg1 = "result type:" + typeof (result.getBoolean()); this.msg2 = "result getBoolean:" + ((result.getBoolean())); break; } case webview.WebMessageType.ARRAY_BUFFER: { this.msg1 = "result type:" + typeof (result.getArrayBuffer()); this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength)); break; } case webview.WebMessageType.ARRAY: { this.msg1 = "result type:" + typeof (result.getArray()); this.msg2 = "result getArray:" + result.getArray(); break; } case webview.WebMessageType.ERROR: { this.msg1 = "result type:" + typeof (result.getError()); this.msg2 = "result getError:" + result.getError(); break; } default: { this.msg1 = "default break, type:" + type; break; } } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }); }) } } } ``` 加载的html文件。 ```html WebView MessagePort Demo

Html5 Send and Receive Message

Receive string:

Receive arraybuffer:


``` ```js //index.js var h5Port; window.addEventListener('message', function(event) { if (event.data == 'init_web_messageport') { if(event.ports[0] != null) { h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function(event) { console.log("hwd In html got message"); // 2. 接收ets侧发送过来的消息. var result = event.data; console.log("In html got message, typeof: ", typeof(result)); console.log("In html got message, result: ", (result)); if (typeof(result) == "string") { console.log("In html got message, String: ", result); document.getElementById("msg").innerHTML = "String:" + result; } else if (typeof(result) == "number") { console.log("In html side got message, number: ", result); document.getElementById("msg").innerHTML = "Number:" + result; } else if (typeof(result) == "boolean") { console.log("In html side got message, boolean: ", result); document.getElementById("msg").innerHTML = "Boolean:" + result; } else if (typeof(result) == "object") { if (result instanceof ArrayBuffer) { document.getElementById("msg2").innerHTML = "ArrayBuffer:" + result.byteLength; console.log("In html got message, byteLength: ", result.byteLength); } else if (result instanceof Error) { console.log("In html error message, err:" + (result)); console.log("In html error message, typeof err:" + typeof(result)); document.getElementById("msg2").innerHTML = "Error:" + result.name + ", msg:" + result.message; } else if (result instanceof Array) { console.log("In html got message, Array"); console.log("In html got message, Array length:" + result.length); console.log("In html got message, Array[0]:" + (result[0])); console.log("In html got message, typeof Array[0]:" + typeof(result[0])); document.getElementById("msg2").innerHTML = "Array len:" + result.length + ", value:" + result; } else { console.log("In html got message, not any instance of support type"); document.getElementById("msg").innerHTML = "not any instance of support type"; } } else { console.log("In html got message, not support type"); document.getElementById("msg").innerHTML = "not support type"; } } h5Port.onmessageerror = (event) => { console.error(`hwd In html Error receiving message: ${event}`); }; } } }) // 使用h5Port往ets侧发送String类型的消息. function postStringToApp() { if (h5Port) { console.log("In html send string message"); h5Port.postMessage("hello"); console.log("In html send string message end"); } else { console.error("In html h5port is null, please init first"); } } ``` ### close close(): void 不需要发送消息时关闭该消息端口。在使用close前,请先使用[createWebMessagePorts](#createwebmessageports)创建消息端口。 **系统能力:** SystemCapability.Web.Webview.Core **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); msgPort: webview.WebMessagePort[] = []; build() { Column() { // 先使用createWebMessagePorts创建端口。 Button('createWebMessagePorts') .onClick(() => { try { this.msgPort = this.controller.createWebMessagePorts(); console.log("createWebMessagePorts size:" + this.msgPort.length) } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('close') .onClick(() => { try { if (this.msgPort && this.msgPort.length == 2) { this.msgPort[1].close(); } else { console.error("msgPort is null, Please initialize first"); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ## WebviewController 通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件,且必须在Web组件和WebviewController绑定后,才能调用WebviewController上的方法(静态方法除外)。 ### constructor11+ constructor(webTag?: string) 用于创建 WebviewController 对象的构造函数。 > **说明:** > > 不传参:new webview.WebviewController()表示构造函数为空,不使用C API时不需要传参。 > > 传参且参数是合法字符串:new webview.WebviewController("xxx"),用于开发者区分多实例,并调用对应实例下的方法。 > > 传入参数为空:new webview.WebviewController("")或new webview.WebviewController(undefined),该场景下参数无意义,无法区分多个实例,直接返回undefined,需要开发者判断返回值是否正常。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------- | ------ | ---- | -------------------------------- | | webTag | string | 否 | 指定了 Web 组件的名称。 | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; class WebObj { constructor() { } webTest(): string { console.log('Web test'); return "Web test"; } webString(): void { console.log('Web test toString'); } } @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController() @State webTestObj: WebObj = new WebObj(); build() { Column() { Button('refresh') .onClick(() => { try { this.controller.refresh(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('deleteJavaScriptRegister') .onClick(() => { try { this.controller.deleteJavaScriptRegister("objTestName"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: '', controller: this.controller }) .javaScriptAccess(true) .onControllerAttached(() => { this.controller.loadUrl($rawfile("index.html")); this.controller.registerJavaScriptProxy(this.webTestObj, "objTestName", ["webTest", "webString"]); }) } } } ``` 加载的html文件。 ```html

``` ### initializeWebEngine static initializeWebEngine(): void 在 Web 组件初始化之前,通过此接口加载 Web 引擎的动态库文件,以提高启动性能。自动预连接历史访问过的高频网站。 > **说明:** > > - initializeWebEngine不支持在异步线程中调用,否则会造成崩溃。 > - initializeWebEngine全局生效,在整个APP生命周期中调用一次即可,不需要重复调用。 **系统能力:** SystemCapability.Web.Webview.Core **示例:** 本示例以EntryAbility为例,描述了在 Ability 创建阶段完成 Web 组件动态库加载的功能。 ```ts // xxx.ets import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { webview } from '@kit.ArkWeb'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { console.log("EntryAbility onCreate") webview.WebviewController.initializeWebEngine() console.log("EntryAbility onCreate done") } } ``` ### setHttpDns10+ static setHttpDns(secureDnsMode:SecureDnsMode, secureDnsConfig:string): void 设置Web组件是否使用HTTPDNS解析dns。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------------------ | ------- | ---- | ------------- | | secureDnsMode | [SecureDnsMode](#securednsmode10) | 是 | 使用HTTPDNS的模式。| | secureDnsConfig | string | 是 | HTTPDNS server的配置,必须是https协议并且只允许配置一个server。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed. | **示例:** ```ts // xxx.ets import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { console.log("EntryAbility onCreate") try { webview.WebviewController.setHttpDns(webview.SecureDnsMode.AUTO, "https://example1.test") } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } AppStorage.setOrCreate("abilityWant", want); console.log("EntryAbility onCreate done") } } ``` ### setWebDebuggingAccess static setWebDebuggingAccess(webDebuggingAccess: boolean): void 设置是否启用网页调试功能,默认不开启。详情请参考[DevTools工具](../../web/web-debugging-with-devtools.md)。 安全提示:启用网页调试功能可以让用户检查修改Web页面内部状态,存在安全隐患,不建议在应用正式发布版本中启用。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------------------ | ------- | ---- | ------------- | | webDebuggingAccess | boolean | 是 | 设置是否启用网页调试功能。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); aboutToAppear(): void { try { webview.WebviewController.setWebDebuggingAccess(true); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } } build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### loadUrl loadUrl(url: string | Resource, headers?: Array\): void 加载指定的URL。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------- | ---- | :-------------------- | | url | string \| Resource | 是 | 需要加载的 URL。 | | headers | Array\<[WebHeader](#webheader)> | 否 | URL的附加HTTP请求头。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100002 | Invalid url. | | 17100003 | Invalid resource path or file type. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('loadUrl') .onClick(() => { try { // 需要加载的URL是string类型。 this.controller.loadUrl('www.example.com'); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('loadUrl') .onClick(() => { try { // 带参数headers。 this.controller.loadUrl('www.example.com', [{ headerKey: "headerKey", headerValue: "headerValue" }]); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 加载本地网页,加载本地资源文件有三种方式。 1.$rawfile方式。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('loadUrl') .onClick(() => { try { // 通过$rawfile加载本地资源文件。 this.controller.loadUrl($rawfile('index.html')); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 2.resources协议,适用Webview加载带有"#"路由的链接。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('loadUrl') .onClick(() => { try { // 通过resource协议加载本地资源文件。 this.controller.loadUrl("resource://rawfile/index.html"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 3.通过沙箱路径加载本地文件,可以参考[web](ts-basic-components-web.md#web)加载沙箱路径的示例代码。 加载的html文件。 ```html

Hello World

``` ### loadData loadData(data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string): void 加载指定的数据。 baseUrl与historyUrl同时为空的情况下: encoding如果为非base64(包括空值),则假定数据对安全URL字符范围内的八位字节使用ASCII编码,对该范围外的八位字节使用URL的标准%xx十六进制编码。 data数据必须使用base64编码或将内容中的任何#字符编码为%23。否则#将被视为内容的结尾而剩余的文本将被用作文档片段标识符。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------- | ------ | ---- | ------------------------------------------------------------ | | data | string | 是 | 按照"base64"或者"URL"编码后的一段字符串。 | | mimeType | string | 是 | 媒体类型(MIME)。 | | encoding | string | 是 | 编码类型,具体为"base64"或者"URL"编码。 | | baseUrl | string | 否 | 指定的一个URL路径("http"/"https"/"data"协议),并由Web组件赋值给window.origin。当加载大量html文件时,需设置为"data"。 | | historyUrl | string | 否 | 用作历史记录所使用的URL。非空时,历史记录以此URL进行管理。当baseUrl为空时,此属性无效。 | > **说明:** > > 若加载本地图片,可以给baseUrl或historyUrl任一参数赋值空格,详情请参考示例代码。 > 加载本地图片场景,baseUrl和historyUrl不能同时为空,否则图片无法成功加载。 > 若html中的富文本中带有注入#等特殊字符,建议将baseUrl和historyUrl两个参数的值设置为"空格"。 **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** baseUrl与historyUrl同时为空。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('loadData') .onClick(() => { try { this.controller.loadData( "Source:
source
", "text/html", // UTF-8为charset。 "UTF-8" ); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('loadData') .onClick(() => { try { this.controller.loadData( // Coding tests通过base64编码后的字符串。 "Q29kaW5nIHRlc3Rz", "text/html", "base64" ); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 加载本地资源 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); updataContent: string = '
image -- end
' build() { Column() { Button('loadData') .onClick(() => { try { // UTF-8为charset。 this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " "); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### accessForward accessForward(): boolean 当前页面是否可前进,即当前页面是否有前进历史记录。 可以结合使用[getBackForwardEntries](#getbackforwardentries)来获取当前WebView的历史信息列表,以及使用[accessStep](#accessstep)来判断是否可以按照给定的步数前进或后退。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------- | --------------------------------- | | boolean | 可以前进返回true,否则返回false。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('accessForward') .onClick(() => { try { let result = this.controller.accessForward(); console.log('result:' + result); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### forward forward(): void 按照历史栈,前进一个页面。一般结合accessForward一起使用。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('forward') .onClick(() => { try { this.controller.forward(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### accessBackward accessBackward(): boolean 当前页面是否可后退,即当前页面是否有返回历史记录。 可以结合使用[getBackForwardEntries](#getbackforwardentries)来获取当前WebView的历史信息列表,以及使用[accessStep](#accessstep)来判断是否可以按照给定的步数前进或后退。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------- | -------------------------------- | | boolean | 可以后退返回true,否则返回false。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('accessBackward') .onClick(() => { try { let result = this.controller.accessBackward(); console.log('result:' + result); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### backward backward(): void 按照历史栈,后退一个页面。一般结合accessBackward一起使用。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('backward') .onClick(() => { try { this.controller.backward(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### onActive onActive(): void 调用此接口通知Web组件进入前台激活状态。
激活状态是应用与用户互动的状态。应用会保持这种状态,直到发生某些事件(例如收到来电或设备屏幕关闭)时将焦点从应用移开。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('onActive') .onClick(() => { try { this.controller.onActive(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### onInactive onInactive(): void 调用此接口通知Web组件进入未激活状态。开发者可以在此回调中实现应用失去焦点时应表现的恰当行为。 此状态下会尽可能的暂停任何可以安全暂停的内容,例如动画和地理位置。但不会暂停JavaScript,要全局暂停JavaScript,请使用[pauseAllTimers](#pausealltimers12)。要重新激活Web组件,请调用[onActive](#onactive)。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('onInactive') .onClick(() => { try { this.controller.onInactive(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### refresh refresh(): void 调用此接口通知Web组件刷新网页。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('refresh') .onClick(() => { try { this.controller.refresh(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### accessStep accessStep(step: number): boolean 当前页面是否可前进或者后退给定的step步。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ------------------------------------------ | | step | number | 是 | 要跳转的步数,正数代表前进,负数代表后退。 | **返回值:** | 类型 | 说明 | | ------- | ------------------ | | boolean | 页面是否前进或后退 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State steps: number = 2; build() { Column() { Button('accessStep') .onClick(() => { try { let result = this.controller.accessStep(this.steps); console.log('result:' + result); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### clearHistory clearHistory(): void 删除所有前进后退记录,不建议在onErrorReceive与onPageBegin中调用clearHistory,会造成异常退出。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearHistory') .onClick(() => { try { this.controller.clearHistory(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getHitTest getHitTest(): WebHitTestType 获取当前被点击区域的元素类型。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------------------------------------------------------------ | ---------------------- | | [WebHitTestType](#webhittesttype)| 被点击区域的元素类型。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getHitTest') .onClick(() => { try { let hitTestType = this.controller.getHitTest(); console.log("hitTestType: " + hitTestType); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### registerJavaScriptProxy registerJavaScriptProxy(object: object, name: string, methodList: Array\, asyncMethodList?: Array\, permission?: string): void registerJavaScriptProxy提供了应用与Web组件加载的网页之间强大的交互能力。
注入JavaScript对象到window对象中,并在window对象中调用该对象的方法。注册后,须调用[refresh](#refresh)接口生效。 > **说明:** > > - registerJavaScriptProxy需要和deleteJavaScriptRegister接口配合使用,防止内存泄漏。 > - 请尽可能只在可信的URL及安全通信HTTPS场景下进行registerJavaScriptProxy注册。在非可信的Web组件中注入JavaScript对象,可能会导致应用被恶意攻击。 > - 在注册registerJavaScriptProxy后,应用会将JavaScript对象暴露给所有的页面frames。 > - 同一方法在同步与异步列表中重复注册,将默认异步调用。 > - 同步函数列表和异步函数列表不可同时为空,否则此次调用接口注册失败。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------- | -------------- | ---- | ------------------------------------------------------------ | | object | object | 是 | 参与注册的应用侧JavaScript对象。可以单独声明方法和属性,但无法同时进行注册与使用。对象只包含属性时,H5可以访问对象中的属性。对象只包含方法时,H5可以访问对象中的方法。
方法的参数和返回类型可以为string,number,boolean。
方法的参数和返回类型支持Dictionary,Array,最多嵌套10层,每层1w个数据。
方法的参数和返回类型支持Object,需要在Object里添加属性methodNameListForJsProxy:[fun1, fun2],fun1和fun2为可被调用的方法。
方法的参数支持Function,Promise,它们的Callback不能有返回值。
方法的返回类型支持Promise,Promise的Callback不能有返回值。
示例请参考[前端页面调用应用侧函数](../../web/web-in-page-app-function-invoking.md)。 | | name | string | 是 | 注册对象的名称,与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 | | methodList | Array\ | 是 | 参与注册的应用侧JavaScript对象的同步方法。 | | asyncMethodList12+ | Array\ | 否 | 参与注册的应用侧JavaScript对象的异步方法,默认为空。异步方法无法获取返回值。 | | permission12+ | string | 否 | json字符串,默认为空,通过该字符串配置JSBridge的权限管控,可以定义object、method一级的url白名单。
示例请参考[前端页面调用应用侧函数](../../web/web-in-page-app-function-invoking.md)。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; class TestObj { constructor() { } test(testStr:string): string { console.log('Web Component str' + testStr); return testStr; } toString(): void { console.log('Web Component toString'); } testNumber(testNum:number): number { console.log('Web Component number' + testNum); return testNum; } asyncTestBool(testBol:boolean): void { console.log('Web Component boolean' + testBol); } } class WebObj { constructor() { } webTest(): string { console.log('Web test'); return "Web test"; } webString(): void { console.log('Web test toString'); } } class AsyncObj { constructor() { } asyncTest(): void { console.log('Async test'); } asyncString(testStr:string): void { console.log('Web async string' + testStr); } } @Entry @Component struct Index { controller: webview.WebviewController = new webview.WebviewController(); @State testObjtest: TestObj = new TestObj(); @State webTestObj: WebObj = new WebObj(); @State asyncTestObj: AsyncObj = new AsyncObj(); build() { Column() { Button('refresh') .onClick(() => { try { this.controller.refresh(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('Register JavaScript To Window') .onClick(() => { try { this.controller.registerJavaScriptProxy(this.testObjtest, "objName", ["test", "toString", "testNumber"], ["asyncTestBool"]); this.controller.registerJavaScriptProxy(this.webTestObj, "objTestName", ["webTest", "webString"]); this.controller.registerJavaScriptProxy(this.asyncTestObj, "objAsyncName", [], ["asyncTest", "asyncString"]); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('deleteJavaScriptRegister') .onClick(() => { try { this.controller.deleteJavaScriptRegister("objName"); this.controller.deleteJavaScriptRegister("objTestName"); this.controller.deleteJavaScriptRegister("objAsyncName"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) } } } ``` 加载的html文件。 ```html

``` 更多示例,请参考[前端页面调用应用侧函数](../../web/web-in-page-app-function-invoking.md)。 ### runJavaScript runJavaScript(script: string, callback : AsyncCallback\): void 异步执行JavaScript脚本,并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后,比如onPageEnd中调用。 > **说明:** > > 离屏组件不会触发runJavaScript接口。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------------------- | ---- | ---------------------------- | | script | string | 是 | JavaScript脚本。 | | callback | AsyncCallback\ | 是 | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时,返回null。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State webResult: string = ''; build() { Column() { Text(this.webResult).fontSize(20) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) .onPageEnd(e => { try { this.controller.runJavaScript( 'test()', (error, result) => { if (error) { console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); return; } if (result) { this.webResult = result; console.info(`The test() return value is: ${result}`); } }); if (e) { console.info('url: ', e.url); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } } } ``` 加载的html文件。 ```html Hello world! ``` ### runJavaScript runJavaScript(script: string): Promise\ 异步执行JavaScript脚本,并通过Promise方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后,比如onPageEnd中调用。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------- | | script | string | 是 | JavaScript脚本。 | **返回值:** | 类型 | 说明 | | --------------- | --------------------------------------------------- | | Promise\ | Promise实例,返回脚本执行的结果,执行失败返回null。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) .onPageEnd(e => { try { this.controller.runJavaScript('test()') .then((result) => { console.log('result: ' + result); }) .catch((error: BusinessError) => { console.error("error: " + error); }) if (e) { console.info('url: ', e.url); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } } } ``` 加载的html文件。 ```html Hello world! ``` ### runJavaScriptExt10+ runJavaScriptExt(script: string | ArrayBuffer, callback : AsyncCallback\): void 异步执行JavaScript脚本,并通过回调方式返回脚本执行的结果。runJavaScriptExt需要在loadUrl完成后,比如onPageEnd中调用。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------------------- | ---- | ---------------------------- | | script | string \| ArrayBuffer12+ | 是 | JavaScript脚本。 | | callback | AsyncCallback\<[JsMessageExt](#jsmessageext10)\> | 是 | 回调执行JavaScript脚本结果。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State msg1: string = ''; @State msg2: string = ''; build() { Column() { Text(this.msg1).fontSize(20) Text(this.msg2).fontSize(20) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) .onPageEnd(e => { try { this.controller.runJavaScriptExt( 'test()', (error, result) => { if (error) { console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`) return; } if (result) { try { let type = result.getType(); switch (type) { case webview.JsMessageType.STRING: { this.msg1 = "result type:" + typeof (result.getString()); this.msg2 = "result getString:" + ((result.getString())); break; } case webview.JsMessageType.NUMBER: { this.msg1 = "result type:" + typeof (result.getNumber()); this.msg2 = "result getNumber:" + ((result.getNumber())); break; } case webview.JsMessageType.BOOLEAN: { this.msg1 = "result type:" + typeof (result.getBoolean()); this.msg2 = "result getBoolean:" + ((result.getBoolean())); break; } case webview.JsMessageType.ARRAY_BUFFER: { this.msg1 = "result type:" + typeof (result.getArrayBuffer()); this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength)); break; } case webview.JsMessageType.ARRAY: { this.msg1 = "result type:" + typeof (result.getArray()); this.msg2 = "result getArray:" + result.getArray(); break; } default: { this.msg1 = "default break, type:" + type; break; } } } catch (resError) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } } }); if (e) { console.info('url: ', e.url); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } } } ``` ```ts // 使用ArrayBuffer入参,从文件中获取JavaScript脚本数据 import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { fileIo } from '@kit.CoreFileKit'; import { common } from '@kit.AbilityKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State msg1: string = '' @State msg2: string = '' build() { Column() { Text(this.msg1).fontSize(20) Text(this.msg2).fontSize(20) Button('runJavaScriptExt') .onClick(() => { try { let context = getContext(this) as common.UIAbilityContext; let filePath = context.filesDir + 'test.txt'; // 新建并打开文件 let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); // 写入一段内容至文件 fileIo.writeSync(file.fd, "test()"); // 从文件中读取内容 let arrayBuffer: ArrayBuffer = new ArrayBuffer(6); fileIo.readSync(file.fd, arrayBuffer, { offset: 0, length: arrayBuffer.byteLength }); // 关闭文件 fileIo.closeSync(file); this.controller.runJavaScriptExt( arrayBuffer, (error, result) => { if (error) { console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`) return; } if (result) { try { let type = result.getType(); switch (type) { case webview.JsMessageType.STRING: { this.msg1 = "result type:" + typeof (result.getString()); this.msg2 = "result getString:" + ((result.getString())); break; } case webview.JsMessageType.NUMBER: { this.msg1 = "result type:" + typeof (result.getNumber()); this.msg2 = "result getNumber:" + ((result.getNumber())); break; } case webview.JsMessageType.BOOLEAN: { this.msg1 = "result type:" + typeof (result.getBoolean()); this.msg2 = "result getBoolean:" + ((result.getBoolean())); break; } case webview.JsMessageType.ARRAY_BUFFER: { this.msg1 = "result type:" + typeof (result.getArrayBuffer()); this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength)); break; } case webview.JsMessageType.ARRAY: { this.msg1 = "result type:" + typeof (result.getArray()); this.msg2 = "result getArray:" + result.getArray(); break; } default: { this.msg1 = "default break, type:" + type; break; } } } catch (resError) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } } }); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) } } } ``` 加载的html文件。 ```html

run JavaScript Ext demo

``` ### runJavaScriptExt10+ runJavaScriptExt(script: string | ArrayBuffer): Promise\ 异步执行JavaScript脚本,并通过Promise方式返回脚本执行的结果。runJavaScriptExt需要在loadUrl完成后,比如onPageEnd中调用。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------- | | script | string \| ArrayBuffer12+ | 是 | JavaScript脚本。 | **返回值:** | 类型 | 说明 | | --------------- | --------------------------------------------------- | | Promise\<[JsMessageExt](#jsmessageext10)> | Promise实例,返回脚本执行的结果。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State webResult: string = ''; @State msg1: string = ''; @State msg2: string = ''; build() { Column() { Text(this.webResult).fontSize(20) Text(this.msg1).fontSize(20) Text(this.msg2).fontSize(20) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) .onPageEnd(() => { this.controller.runJavaScriptExt('test()') .then((result) => { try { let type = result.getType(); switch (type) { case webview.JsMessageType.STRING: { this.msg1 = "result type:" + typeof (result.getString()); this.msg2 = "result getString:" + ((result.getString())); break; } case webview.JsMessageType.NUMBER: { this.msg1 = "result type:" + typeof (result.getNumber()); this.msg2 = "result getNumber:" + ((result.getNumber())); break; } case webview.JsMessageType.BOOLEAN: { this.msg1 = "result type:" + typeof (result.getBoolean()); this.msg2 = "result getBoolean:" + ((result.getBoolean())); break; } case webview.JsMessageType.ARRAY_BUFFER: { this.msg1 = "result type:" + typeof (result.getArrayBuffer()); this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength)); break; } case webview.JsMessageType.ARRAY: { this.msg1 = "result type:" + typeof (result.getArray()); this.msg2 = "result getArray:" + result.getArray(); break; } default: { this.msg1 = "default break, type:" + type; break; } } } catch (resError) { console.error(`ErrorCode: ${(resError as BusinessError).code}, Message: ${(resError as BusinessError).message}`); } }).catch((error: BusinessError) => { console.error("error: " + error); }) }) } } } ``` ```ts // 使用ArrayBuffer入参,从文件中获取JavaScript脚本数据 import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { fileIo } from '@kit.CoreFileKit'; import { common } from '@kit.AbilityKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State msg1: string = ''; @State msg2: string = ''; build() { Column() { Text(this.msg1).fontSize(20) Text(this.msg2).fontSize(20) Button('runJavaScriptExt') .onClick(() => { try { let context = getContext(this) as common.UIAbilityContext; let filePath = context.filesDir + 'test.txt'; // 新建并打开文件 let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); // 写入一段内容至文件 fileIo.writeSync(file.fd, "test()"); // 从文件中读取内容 let arrayBuffer: ArrayBuffer = new ArrayBuffer(6); fileIo.readSync(file.fd, arrayBuffer, { offset: 0, length: arrayBuffer.byteLength }); // 关闭文件 fileIo.closeSync(file); this.controller.runJavaScriptExt(arrayBuffer) .then((result) => { try { let type = result.getType(); switch (type) { case webview.JsMessageType.STRING: { this.msg1 = "result type:" + typeof (result.getString()); this.msg2 = "result getString:" + ((result.getString())); break; } case webview.JsMessageType.NUMBER: { this.msg1 = "result type:" + typeof (result.getNumber()); this.msg2 = "result getNumber:" + ((result.getNumber())); break; } case webview.JsMessageType.BOOLEAN: { this.msg1 = "result type:" + typeof (result.getBoolean()); this.msg2 = "result getBoolean:" + ((result.getBoolean())); break; } case webview.JsMessageType.ARRAY_BUFFER: { this.msg1 = "result type:" + typeof (result.getArrayBuffer()); this.msg2 = "result getArrayBuffer byteLength:" + ((result.getArrayBuffer().byteLength)); break; } case webview.JsMessageType.ARRAY: { this.msg1 = "result type:" + typeof (result.getArray()); this.msg2 = "result getArray:" + result.getArray(); break; } default: { this.msg1 = "default break, type:" + type; break; } } } catch (resError) { console.error(`ErrorCode: ${(resError as BusinessError).code}, Message: ${(resError as BusinessError).message}`); } }) .catch((error: BusinessError) => { console.error("error: " + error); }) } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) } } } ``` 加载的html文件。 ```html

run JavaScript Ext demo

``` ### deleteJavaScriptRegister deleteJavaScriptRegister(name: string): void 删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后,须调用[refresh](#refresh)接口。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---- | | name | string | 是 | 注册对象的名称,可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100008 | Failed to delete JavaScriptProxy because it does not exist. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; class TestObj { constructor() { } test(): string { return "ArkUI Web Component"; } toString(): void { console.log('Web Component toString'); } } @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State testObjtest: TestObj = new TestObj(); @State name: string = 'objName'; build() { Column() { Button('refresh') .onClick(() => { try { this.controller.refresh(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('Register JavaScript To Window') .onClick(() => { try { this.controller.registerJavaScriptProxy(this.testObjtest, this.name, ["test", "toString"]); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('deleteJavaScriptRegister') .onClick(() => { try { this.controller.deleteJavaScriptRegister(this.name); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) } } } ``` 加载的html文件。 ```html

``` ### zoom zoom(factor: number): void 调整当前网页的缩放比例,[zoomAccess](ts-basic-components-web.md#zoomaccess)需为true。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ------------------------------------------------------------ | | factor | number | 是 | 基于当前网页所需调整的相对缩放比例,入参要求大于0,当入参为1时为默认加载网页的缩放比例,入参小于1为缩小,入参大于1为放大。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100004 | Function not enabled. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State factor: number = 1; build() { Column() { Button('zoom') .onClick(() => { try { this.controller.zoom(this.factor); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) .zoomAccess(true) } } } ``` ### searchAllAsync searchAllAsync(searchString: string): void 异步查找网页中所有匹配关键字'searchString'的内容并高亮,结果通过[onSearchResultReceive](ts-basic-components-web.md#onsearchresultreceive9)异步返回。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------------ | -------- | ---- | -------------- | | searchString | string | 是 | 查找的关键字。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State searchString: string = "Hello World"; build() { Column() { Button('searchString') .onClick(() => { try { this.controller.searchAllAsync(this.searchString); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .onSearchResultReceive(ret => { if (ret) { console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + "[total]" + ret.numberOfMatches + "[isDone]" + ret.isDoneCounting); } }) } } } ``` 加载的html文件。 ```html

Hello World Highlight Hello World

``` ### clearMatches clearMatches(): void 清除所有通过[searchAllAsync](#searchallasync)匹配到的高亮字符查找结果。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearMatches') .onClick(() => { try { this.controller.clearMatches(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件,请参考[searchAllAsync](#searchallasync)接口下加载的html文件。 ### searchNext searchNext(forward: boolean): void 滚动到下一个匹配的查找结果并高亮。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | -------- | ---- | ---------------------- | | forward | boolean | 是 | 从前向后或者逆向查找。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('searchNext') .onClick(() => { try { this.controller.searchNext(true); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件,请参考[searchAllAsync](#searchallasync)接口下加载的html文件。 ### clearSslCache clearSslCache(): void 清除Web组件记录的SSL证书错误事件对应的用户操作行为。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearSslCache') .onClick(() => { try { this.controller.clearSslCache(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### clearClientAuthenticationCache clearClientAuthenticationCache(): void 清除Web组件记录的客户端证书请求事件对应的用户操作行为。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearClientAuthenticationCache') .onClick(() => { try { this.controller.clearClientAuthenticationCache(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### createWebMessagePorts createWebMessagePorts(isExtentionType?: boolean): Array\ 创建Web消息端口。完整示例代码参考[onMessageEventExt](#onmessageeventext10)。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ---------------------- | ---- | :------------------------------| | isExtentionType10+ | boolean | 否 | 是否使用扩展增强接口,默认false不使用。 | **返回值:** | 类型 | 说明 | | ---------------------- | ----------------- | | Array\<[WebMessagePort](#webmessageport)> | web消息端口列表。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; build() { Column() { Button('createWebMessagePorts') .onClick(() => { try { this.ports = this.controller.createWebMessagePorts(); console.log("createWebMessagePorts size:" + this.ports.length); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### postMessage postMessage(name: string, ports: Array\, uri: string): void 发送Web消息端口到HTML。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ---------------------- | ---- | :------------------------------- | | name | string | 是 | 要发送的消息名称。 | | ports | Array\<[WebMessagePort](#webmessageport)> | 是 | 要发送的消息端口。 | | uri | string | 是 | 接收该消息的URI。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); ports: webview.WebMessagePort[] = []; @State sendFromEts: string = 'Send this message from ets to HTML'; @State receivedFromHtml: string = 'Display received message send from HTML'; build() { Column() { // 展示接收到的来自HTML的内容 Text(this.receivedFromHtml) // 输入框的内容发送到html TextInput({ placeholder: 'Send this message from ets to HTML' }) .onChange((value: string) => { this.sendFromEts = value; }) Button('postMessage') .onClick(() => { try { // 1、创建两个消息端口。 this.ports = this.controller.createWebMessagePorts(); // 2、在应用侧的消息端口(如端口1)上注册回调事件。 this.ports[1].onMessageEvent((result: webview.WebMessage) => { let msg = 'Got msg from HTML:'; if (typeof (result) == "string") { console.log("received string message from html5, string is:" + result); msg = msg + result; } else if (typeof (result) == "object") { if (result instanceof ArrayBuffer) { console.log("received arraybuffer from html5, length is:" + result.byteLength); msg = msg + "length is " + result.byteLength; } else { console.log("not support"); } } else { console.log("not support"); } this.receivedFromHtml = msg; }) // 3、将另一个消息端口(如端口0)发送到HTML侧,由HTML侧保存并使用。 this.controller.postMessage('__init_port__', [this.ports[0]], '*'); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。 Button('SendDataToHTML') .onClick(() => { try { if (this.ports && this.ports[1]) { this.ports[1].postMessageEvent(this.sendFromEts); } else { console.error(`ports is null, Please initialize first`); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件。 ```html WebView Message Port Demo

WebView Message Port Demo



display received message send from ets

``` ```js //xxx.js var h5Port; var output = document.querySelector('.output'); window.addEventListener('message', function (event) { if (event.data == '__init_port__') { if (event.ports[0] != null) { h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function (event) { // 2. 接收ets侧发送过来的消息. var msg = 'Got message from ets:'; var result = event.data; if (typeof(result) == "string") { console.log("received string message from html5, string is:" + result); msg = msg + result; } else if (typeof(result) == "object") { if (result instanceof ArrayBuffer) { console.log("received arraybuffer from html5, length is:" + result.byteLength); msg = msg + "length is " + result.byteLength; } else { console.log("not support"); } } else { console.log("not support"); } output.innerHTML = msg; } } } }) // 3. 使用h5Port往ets侧发送消息. function PostMsgToEts(data) { if (h5Port) { h5Port.postMessage(data); } else { console.error("h5Port is null, Please initialize first"); } } ``` ### requestFocus requestFocus(): void 使当前web页面获取焦点。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('requestFocus') .onClick(() => { try { this.controller.requestFocus(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }); Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### zoomIn zoomIn(): void 调用此接口将当前网页进行放大,比例为20%。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100004 | Function not enabled. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('zoomIn') .onClick(() => { try { this.controller.zoomIn(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### zoomOut zoomOut(): void 调用此接口将当前网页进行缩小,比例为20%。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100004 | Function not enabled. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('zoomOut') .onClick(() => { try { this.controller.zoomOut(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getHitTestValue getHitTestValue(): HitTestValue 获取当前被点击区域的元素信息。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------------ | -------------------- | | [HitTestValue](#hittestvalue) | 点击区域的元素信息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getHitTestValue') .onClick(() => { try { let hitValue = this.controller.getHitTestValue(); console.log("hitType: " + hitValue.type); console.log("extra: " + hitValue.extra); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getWebId getWebId(): number 获取当前Web组件的索引值,用于多个Web组件的管理。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | --------------------- | | number | 当前Web组件的索引值。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getWebId') .onClick(() => { try { let id = this.controller.getWebId(); console.log("id: " + id); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getUserAgent getUserAgent(): string 获取当前默认用户代理。 默认UserAgent定义与使用场景请参考[UserAgent详情参考](../../web/web-default-userAgent.md) **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | -------------- | | string | 默认用户代理。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getUserAgent') .onClick(() => { try { let userAgent = this.controller.getUserAgent(); console.log("userAgent: " + userAgent); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 支持开发者基于默认的UserAgent去定制UserAgent。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State ua: string = ""; aboutToAppear(): void { webview.once('webInited', () => { try { // 应用侧用法示例,定制UserAgent。 this.ua = this.controller.getUserAgent() + 'xxx'; this.controller.setCustomUserAgent(this.ua); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getTitle getTitle(): string 获取当前网页的标题。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | -------------------- | | string | 当前网页的标题。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getTitle') .onClick(() => { try { let title = this.controller.getTitle(); console.log("title: " + title); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getPageHeight getPageHeight(): number 获取当前网页的页面高度。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | -------------------- | | number | 当前网页的页面高度。单位:vp。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getPageHeight') .onClick(() => { try { let pageHeight = this.controller.getPageHeight(); console.log("pageHeight : " + pageHeight); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### storeWebArchive storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\): void 以回调方式异步保存当前页面。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | --------------------- | ---- | ------------------------------------------------------------ | | baseName | string | 是 | 生成的离线网页存储位置,该值不能为空。 | | autoName | boolean | 是 | 决定是否自动生成文件名。如果为false,则按baseName的文件名存储;如果为true,则根据当前Url自动生成文件名,并按baseName的文件目录存储。 | | callback | AsyncCallback\ | 是 | 返回文件存储路径,保存网页失败会返回null。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100003 | Invalid resource path or file type. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('storeWebArchive') .onClick(() => { try { this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => { if (error) { console.error(`save web archive error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); return; } if (filename != null) { console.info(`save web archive success: ${filename}`); } }); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### storeWebArchive storeWebArchive(baseName: string, autoName: boolean): Promise\ 以Promise方式异步保存当前页面。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | ---- | ------------------------------------------------------------ | | baseName | string | 是 | 生成的离线网页存储位置,该值不能为空。 | | autoName | boolean | 是 | 决定是否自动生成文件名。如果为false,则按baseName的文件名存储;如果为true,则根据当前Url自动生成文件名,并按baseName的文件目录存储。 | **返回值:** | 类型 | 说明 | | --------------- | ----------------------------------------------------- | | Promise\ | Promise实例,保存成功返回文件路径,保存失败返回null。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100003 | Invalid resource path or file type. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('storeWebArchive') .onClick(() => { try { this.controller.storeWebArchive("/data/storage/el2/base/", true) .then(filename => { if (filename != null) { console.info(`save web archive success: ${filename}`) } }) .catch((error: BusinessError) => { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); }) } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getUrl getUrl(): string 获取当前页面的url地址。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | ------------------- | | string | 当前页面的url地址。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getUrl') .onClick(() => { try { let url = this.controller.getUrl(); console.log("url: " + url); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### stop stop(): void 停止页面加载。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('stop') .onClick(() => { try { this.controller.stop(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }); Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### backOrForward backOrForward(step: number): void 按照历史栈,前进或者后退指定步长的页面,当历史栈中不存在对应步长的页面时,不会进行页面跳转。 前进或者后退页面时,直接使用已加载过的网页,无需重新加载网页。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------------- | | step | number | 是 | 需要前进或后退的步长。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State step: number = -2; build() { Column() { Button('backOrForward') .onClick(() => { try { this.controller.backOrForward(this.step); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### scrollTo scrollTo(x:number, y:number, duration?:number): void 在指定时间内,将页面滚动到指定的绝对位置。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------------- | | x | number | 是 | 绝对位置的水平坐标,当传入数值为负数时,按照传入0处理。单位:vp。 | | y | number | 是 | 绝对位置的垂直坐标,当传入数值为负数时,按照传入0处理。单位:vp。| | duration14+ | number | 否 | 滚动动画时间。
单位:ms。
不传入为无动画,当传入数值为负数或传入0时,按照不传入处理。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('scrollTo') .onClick(() => { try { this.controller.scrollTo(50, 50, 500); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('stopScroll') .onClick(() => { try { this.controller.scrollBy(0, 0, 1); //如果想停止当前scroll产生的动画,可再次生成一个1ms的动画去打断该动画。 } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件。 ```html Demo Scroll Test ``` ### scrollBy scrollBy(deltaX:number, deltaY:number,duration?:number): void 在指定时间内将页面滚动指定的偏移量。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------------- | | deltaX | number | 是 | 水平偏移量,其中水平向右为正方向。单位:vp。 | | deltaY | number | 是 | 垂直偏移量,其中垂直向下为正方向。单位:vp。 | | duration14+ | number | 否 | 滚动动画时间。
单位:ms。
不传入为无动画,当传入数值为负数或传入0时,按照不传入处理。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | > **说明:** > > 嵌套滚动场景中,调用scrollBy不会触发父组件的嵌套滚动。 **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('scrollBy') .onClick(() => { try { this.controller.scrollBy(50, 50, 500); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('stopScroll') .onClick(() => { try { this.controller.scrollBy(0, 0, 1); //如果想停止当前scroll产生的动画,可再次生成一个1ms的动画去打断该动画。 } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件。 ```html Demo Scroll Test ``` ### scrollByWithResult12+ scrollByWithResult(deltaX: number, deltaY: number): boolean 将页面滚动指定的偏移量,返回值表示此次滚动是否执行成功。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------------- | | deltaX | number | 是 | 水平偏移量,其中水平向右为正方向。 | | deltaY | number | 是 | 垂直偏移量,其中垂直向下为正方向。 | **返回值:** | 类型 | 说明 | | ------- | --------------------------------------- | | boolean | 当前网页是否可以滑动,默认为false。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | > **说明:** > > - 返回值场景:Web页面处于触摸中状态时,返回false,否则返回true。 > - 同层渲染场景中,Web的同层渲染区域处于触摸中状态时,返回值为true。 > - 嵌套滚动场景中,调用scrollByWithResult不会触发父组件的嵌套滚动。 > - 此接口不保证滑动帧率性能。 **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('scrollByWithResult') .onClick(() => { try { let result = this.controller.scrollByWithResult(50, 50); console.log("original result: " + result); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件。 ```html Demo Scroll Test ``` ### slideScroll slideScroll(vx:number, vy:number): void 按照指定速度模拟对页面的轻扫滚动动作。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------------- | | vx | number | 是 | 轻扫滚动的水平速度分量,其中水平向右为速度正方向。单位:vp/ms。 | | vy | number | 是 | 轻扫滚动的垂直速度分量,其中垂直向下为速度正方向。单位:vp/ms。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('slideScroll') .onClick(() => { try { this.controller.slideScroll(500, 500); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件。 ```html Demo Scroll Test ``` ### getOriginalUrl getOriginalUrl(): string 获取当前页面的原始url地址。 风险提示:如果想获取url来做JavascriptProxy通信接口认证,请使用[getLastJavascriptProxyCallingFrameUrl12+](#getlastjavascriptproxycallingframeurl12) **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | ----------------------- | | string | 当前页面的原始url地址。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getOrgUrl') .onClick(() => { try { let url = this.controller.getOriginalUrl(); console.log("original url: " + url); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getFavicon getFavicon(): image.PixelMap 获取页面的favicon图标。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | -------------------------------------- | ------------------------------- | | [PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 页面favicon图标的PixelMap对象。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { image } from '@kit.ImageKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State pixelmap: image.PixelMap | undefined = undefined; build() { Column() { Button('getFavicon') .onClick(() => { try { this.pixelmap = this.controller.getFavicon(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### setNetworkAvailable setNetworkAvailable(enable: boolean): void 设置JavaScript中的window.navigator.onLine属性。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ------- | ---- | --------------------------------- | | enable | boolean | 是 | 是否使能window.navigator.onLine。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('setNetworkAvailable') .onClick(() => { try { this.controller.setNetworkAvailable(true); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` 加载的html文件。 ```html

online 属性

``` ### hasImage hasImage(callback: AsyncCallback\): void 通过Callback方式异步查找当前页面是否存在图像。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ----------------------- | ---- | -------------------------- | | callback | AsyncCallback\ | 是 | 返回查找页面是否存在图像。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('hasImageCb') .onClick(() => { try { this.controller.hasImage((error, data) => { if (error) { console.error(`hasImage error, ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); return; } console.info("hasImage: " + data); }); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### hasImage hasImage(): Promise\ 通过Promise方式异步查找当前页面是否存在图像。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ----------------- | --------------------------------------- | | Promise\ | Promise实例,返回查找页面是否存在图像。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('hasImagePm') .onClick(() => { try { this.controller.hasImage().then((data) => { console.info('hasImage: ' + data); }).catch((error: BusinessError) => { console.error("error: " + error); }) } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### removeCache removeCache(clearRom: boolean): void 清除应用中的资源缓存文件,此方法将会清除同一应用中所有webview的缓存文件。 > **说明:** > > 可以通过在data/storage/el2/base/cache/web/Cache目录下查看Webview的缓存。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ------- | ---- | -------------------------------------------------------- | | clearRom | boolean | 是 | 设置为true时同时清除rom和ram中的缓存,设置为false时只清除ram中的缓存。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('removeCache') .onClick(() => { try { this.controller.removeCache(false); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### pageUp pageUp(top: boolean): void 将Webview的内容向上滚动半个视框大小或者跳转到页面最顶部,通过top入参控制。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ------- | ---- | ------------------------------------------------------------ | | top | boolean | 是 | 是否跳转到页面最顶部,设置为false时将页面内容向上滚动半个视框大小,设置为true时跳转到页面最顶部。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('pageUp') .onClick(() => { try { this.controller.pageUp(false); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### pageDown pageDown(bottom: boolean): void 将Webview的内容向下滚动半个视框大小或者跳转到页面最底部,通过bottom入参控制。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ------- | ---- | ------------------------------------------------------------ | | bottom | boolean | 是 | 是否跳转到页面最底部,设置为false时将页面内容向下滚动半个视框大小,设置为true时跳转到页面最底部。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('pageDown') .onClick(() => { try { this.controller.pageDown(false); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getBackForwardEntries getBackForwardEntries(): BackForwardList 获取当前Webview的历史信息列表。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ----------------------------------- | --------------------------- | | [BackForwardList](#backforwardlist) | 当前Webview的历史信息列表。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getBackForwardEntries') .onClick(() => { try { let list = this.controller.getBackForwardEntries() } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### serializeWebState serializeWebState(): Uint8Array 将当前Webview的页面状态历史记录信息序列化。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ---------- | --------------------------------------------- | | Uint8Array | 当前Webview的页面状态历史记录序列化后的数据。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** 1.对文件的操作需要导入文件管理模块,详情请参考[文件管理](../apis-core-file-kit/js-apis-file-fs.md)。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { fileIo } from '@kit.CoreFileKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('serializeWebState') .onClick(() => { try { let state = this.controller.serializeWebState(); let path:string | undefined = AppStorage.get("cacheDir"); if (path) { path += '/WebState'; // 以同步方法打开文件。 let file = fileIo.openSync(path, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); fileIo.writeSync(file.fd, state.buffer); fileIo.closeSync(file.fd); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 2.修改EntryAbility.ets。 获取应用缓存文件路径。 ```ts // xxx.ets import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { // 通过在AppStorage对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。 AppStorage.setOrCreate("cacheDir", this.context.cacheDir); } } ``` ### restoreWebState restoreWebState(state: Uint8Array): void 当前Webview从序列化数据中恢复页面状态历史记录。 如果state过大,可能会导致异常。建议state大于512k时,放弃恢复页面状态历史记录。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ---------- | ---- | ---------------------------- | | state | Uint8Array | 是 | 页面状态历史记录序列化数据。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** 1.对文件的操作需要导入文件管理模块,详情请参考[文件管理](../apis-core-file-kit/js-apis-file-fs.md)。 ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { fileIo } from '@kit.CoreFileKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('RestoreWebState') .onClick(() => { try { let path: string | undefined = AppStorage.get("cacheDir"); if (path) { path += '/WebState'; // 以同步方法打开文件。 let file = fileIo.openSync(path, fileIo.OpenMode.READ_WRITE); let stat = fileIo.statSync(path); let size = stat.size; let buf = new ArrayBuffer(size); fileIo.read(file.fd, buf, (err, readLen) => { if (err) { console.info("mkdir failed with error message: " + err.message + ", error code: " + err.code); } else { console.info("read file data succeed"); this.controller.restoreWebState(new Uint8Array(buf.slice(0, readLen))); fileIo.closeSync(file); } }); } } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` 2.修改EntryAbility.ets。 获取应用缓存文件路径。 ```ts // xxx.ets import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { // 通过在AppStorage对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。 AppStorage.setOrCreate("cacheDir", this.context.cacheDir); } } ``` ### customizeSchemes static customizeSchemes(schemes: Array\): void 对Web内核赋予自定义协议url的跨域请求与fetch请求的权限。当Web在跨域fetch自定义协议url时,该fetch请求可被onInterceptRequest事件接口所拦截,从而开发者可以进一步处理该请求。建议在任何Web组件初始化之前调用该接口。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ------- | ---- | -------------------------------------- | | schemes | Array\<[WebCustomScheme](#webcustomscheme)\> | 是 | 自定义协议配置,最多支持同时配置10个自定义协议。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | | 17100020 | Failed to register custom schemes. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); responseWeb: WebResourceResponse = new WebResourceResponse(); scheme1: webview.WebCustomScheme = { schemeName: "name1", isSupportCORS: true, isSupportFetch: true }; scheme2: webview.WebCustomScheme = { schemeName: "name2", isSupportCORS: true, isSupportFetch: true }; scheme3: webview.WebCustomScheme = { schemeName: "name3", isSupportCORS: true, isSupportFetch: true }; aboutToAppear(): void { try { webview.WebviewController.customizeSchemes([this.scheme1, this.scheme2, this.scheme3]); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } } build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .onInterceptRequest((event) => { if (event) { console.log('url:' + event.request.getRequestUrl()); } return this.responseWeb; }) } } } ``` ### getCertificate10+ getCertificate(): Promise> 获取当前网站的证书信息。使用Web组件加载https网站,会进行SSL证书校验,该接口会通过Promise异步返回当前网站的X509格式证书(X509Cert证书类型定义见[X509Cert](../apis-device-certificate-kit/js-apis-cert.md#x509cert)定义),便于开发者展示网站证书信息。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ---------- | --------------------------------------------- | | Promise> | Promise实例,用于获取当前加载的https网站的X509格式证书数组。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { cert } from '@kit.DeviceCertificateKit'; function Uint8ArrayToString(dataArray: Uint8Array) { let dataString = ''; for (let i = 0; i < dataArray.length; i++) { dataString += String.fromCharCode(dataArray[i]); } return dataString; } function ParseX509CertInfo(x509CertArray: Array) { let res: string = 'getCertificate success: len = ' + x509CertArray.length; for (let i = 0; i < x509CertArray.length; i++) { res += ', index = ' + i + ', issuer name = ' + Uint8ArrayToString(x509CertArray[i].getIssuerName().data) + ', subject name = ' + Uint8ArrayToString(x509CertArray[i].getSubjectName().data) + ', valid start = ' + x509CertArray[i].getNotBeforeTime() + ', valid end = ' + x509CertArray[i].getNotAfterTime(); } return res; } @Entry @Component struct Index { // outputStr在UI界面显示调试信息 @State outputStr: string = ''; webviewCtl: webview.WebviewController = new webview.WebviewController(); build() { Row() { Column() { List({ space: 20, initialIndex: 0 }) { ListItem() { Button() { Text('load bad ssl') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { // 加载一个过期的证书网站,查看获取到的证书信息 this.webviewCtl.loadUrl('https://expired.badssl.com'); }) .height(50) } ListItem() { Button() { Text('load example') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { // 加载一个https网站,查看网站的证书信息 this.webviewCtl.loadUrl('https://www.example.com'); }) .height(50) } ListItem() { Button() { Text('getCertificate Promise') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { try { this.webviewCtl.getCertificate().then((x509CertArray: Array) => { this.outputStr = ParseX509CertInfo(x509CertArray); }) } catch (error) { this.outputStr = 'getCertificate failed: ' + (error as BusinessError).code + ", errMsg: " + (error as BusinessError).message; } }) .height(50) } ListItem() { Button() { Text('getCertificate AsyncCallback') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { try { this.webviewCtl.getCertificate((error: BusinessError, x509CertArray: Array) => { if (error) { this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message; } else { this.outputStr = ParseX509CertInfo(x509CertArray); } }) } catch (error) { this.outputStr = 'getCertificate failed: ' + (error as BusinessError).code + ", errMsg: " + (error as BusinessError).message; } }) .height(50) } } .listDirection(Axis.Horizontal) .height('10%') Text(this.outputStr) .width('100%') .fontSize(10) Web({ src: 'https://www.example.com', controller: this.webviewCtl }) .fileAccess(true) .javaScriptAccess(true) .domStorageAccess(true) .onlineImageAccess(true) .onPageEnd((e) => { if (e) { this.outputStr = 'onPageEnd : url = ' + e.url; } }) .onSslErrorEventReceive((e) => { // 忽略ssl证书错误,便于测试一些证书过期的网站,如:https://expired.badssl.com e.handler.handleConfirm(); }) .width('100%') .height('70%') } .height('100%') } } } ``` ### getCertificate10+ getCertificate(callback: AsyncCallback>): void 获取当前网站的证书信息。使用Web组件加载https网站,会进行SSL证书校验,该接口会通过AsyncCallback异步返回当前网站的X509格式证书(X509Cert证书类型定义见[X509Cert定义](../apis-device-certificate-kit/js-apis-cert.md)),便于开发者展示网站证书信息。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ---------------------------- | ---- | ---------------------------------------- | | callback | AsyncCallback> | 是 | 通过AsyncCallback异步返回当前网站的X509格式证书。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { cert } from '@kit.DeviceCertificateKit'; function Uint8ArrayToString(dataArray: Uint8Array) { let dataString = ''; for (let i = 0; i < dataArray.length; i++) { dataString += String.fromCharCode(dataArray[i]); } return dataString; } function ParseX509CertInfo(x509CertArray: Array) { let res: string = 'getCertificate success: len = ' + x509CertArray.length; for (let i = 0; i < x509CertArray.length; i++) { res += ', index = ' + i + ', issuer name = ' + Uint8ArrayToString(x509CertArray[i].getIssuerName().data) + ', subject name = ' + Uint8ArrayToString(x509CertArray[i].getSubjectName().data) + ', valid start = ' + x509CertArray[i].getNotBeforeTime() + ', valid end = ' + x509CertArray[i].getNotAfterTime(); } return res; } @Entry @Component struct Index { // outputStr在UI界面显示调试信息 @State outputStr: string = ''; webviewCtl: webview.WebviewController = new webview.WebviewController(); build() { Row() { Column() { List({ space: 20, initialIndex: 0 }) { ListItem() { Button() { Text('load bad ssl') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { // 加载一个过期的证书网站,查看获取到的证书信息 this.webviewCtl.loadUrl('https://expired.badssl.com'); }) .height(50) } ListItem() { Button() { Text('load example') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { // 加载一个https网站,查看网站的证书信息 this.webviewCtl.loadUrl('https://www.example.com'); }) .height(50) } ListItem() { Button() { Text('getCertificate Promise') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { try { this.webviewCtl.getCertificate().then((x509CertArray: Array) => { this.outputStr = ParseX509CertInfo(x509CertArray); }) } catch (error) { this.outputStr = 'getCertificate failed: ' + (error as BusinessError).code + ", errMsg: " + (error as BusinessError).message; } }) .height(50) } ListItem() { Button() { Text('getCertificate AsyncCallback') .fontSize(10) .fontWeight(FontWeight.Bold) } .type(ButtonType.Capsule) .onClick(() => { try { this.webviewCtl.getCertificate((error: BusinessError, x509CertArray: Array) => { if (error) { this.outputStr = 'getCertificate failed: ' + error.code + ", errMsg: " + error.message; } else { this.outputStr = ParseX509CertInfo(x509CertArray); } }) } catch (error) { this.outputStr = 'getCertificate failed: ' + (error as BusinessError).code + ", errMsg: " + (error as BusinessError).message; } }) .height(50) } } .listDirection(Axis.Horizontal) .height('10%') Text(this.outputStr) .width('100%') .fontSize(10) Web({ src: 'https://www.example.com', controller: this.webviewCtl }) .fileAccess(true) .javaScriptAccess(true) .domStorageAccess(true) .onlineImageAccess(true) .onPageEnd((e) => { if (e) { this.outputStr = 'onPageEnd : url = ' + e.url; } }) .onSslErrorEventReceive((e) => { // 忽略ssl证书错误,便于测试一些证书过期的网站,如:https://expired.badssl.com e.handler.handleConfirm(); }) .width('100%') .height('70%') } .height('100%') } } } ``` ### setAudioMuted10+ setAudioMuted(mute: boolean): void 设置网页静音。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ------- | ---- | -------------------------------------- | | mute | boolean | 是 | 表示是否将网页设置为静音状态,true表示设置为静音状态,false表示取消静音状态。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State muted: boolean = false; build() { Column() { Button("Toggle Mute") .onClick(event => { if (event) { this.muted = !this.muted; this.controller.setAudioMuted(this.muted); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### prefetchPage10+ prefetchPage(url: string, additionalHeaders?: Array\): void 在预测到将要加载的页面之前调用,提前下载页面所需的资源,包括主资源子资源,但不会执行网页JavaScript代码或呈现网页,以加快加载速度。 > **说明:** > > 下载的页面资源,会缓存五分钟左右,超过这段时间Web组件会自动释放。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------------------| --------------------------------| ---- | ------------- | | url | string | 是 | 预加载的url。| | additionalHeaders | Array\<[WebHeader](#webheader)> | 否 | url的附加HTTP请求头。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100002 | Invalid url. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('prefetchPopularPage') .onClick(() => { try { // 预加载时,需要将'https://www.example.com'替换成一个真实的网站地址。 this.controller.prefetchPage('https://www.example.com'); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) // 需要将'www.example1.com'替换成一个真实的网站地址。 Web({ src: 'www.example1.com', controller: this.controller }) } } } ``` ### prefetchResource12+ static prefetchResource(request: RequestInfo, additionalHeaders?: Array\, cacheKey?: string, cacheValidTime?: number): void 根据指定的请求信息和附加的http请求头去预获取资源请求,存入内存缓存,并指定其缓存key和有效期,以加快加载速度。目前仅支持Content-Type为application/x-www-form-urlencoded的post请求。最多可以预获取6个post请求。如果要预获取第7个,请通过[clearPrefetchedResource](#clearprefetchedresource12)清除不需要的post请求缓存,否则会自动清除最早预获取的post缓存。如果要使用预获取的资源缓存,开发者需要在正式发起的post请求的请求头中增加键值“ArkWebPostCacheKey”,其内容为对应缓存的cacheKey。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------------------| ------------------------------- | ---- | ------------------------------------------------------------------ | | request | [RequestInfo](#requestinfo12) | 是 | 预获取请求的信息。 | | additionalHeaders | Array\<[WebHeader](#webheader)> | 否 | 预获取请求的附加HTTP请求头。 | | cacheKey | string | 否 | 用于后续查询预获取资源缓存的key。仅支持字母和数字,未传入或传入空则取默认值url作为key。 | | cacheValidTime | number | 否 | 预获取资源缓存的有效期。取值范围:(0, 2147483647]。单位:秒。默认值:300秒。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Invalid input parameter.Possible causes: 1. Mandatory parameters are left unspecified.2. Incorrect parameter types.3. Parameter verification failed. | | 17100002 | Invalid url. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { console.log("EntryAbility onCreate"); webview.WebviewController.initializeWebEngine(); // 预获取时,需要將"https://www.example1.com/post?e=f&g=h"替换成真实要访问的网站地址。 webview.WebviewController.prefetchResource( {url:"https://www.example1.com/post?e=f&g=h", method:"POST", formData:"a=x&b=y",}, [{headerKey:"c", headerValue:"z",},], "KeyX", 500); AppStorage.setOrCreate("abilityWant", want); console.log("EntryAbility onCreate done"); } } ``` ### clearPrefetchedResource12+ static clearPrefetchedResource(cacheKeyList: Array\): void 根据指定的缓存key列表清除对应的预获取资源缓存。入参中的缓存key必须是[prefetchResource](#prefetchresource12)指定预获取到的资源缓存key。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------------------| ----------- | ---- | ------------------------------------------------------------------------- | | cacheKeyList | Array\ | 是 | 用于后续查询预获取资源缓存的key。仅支持字母和数字,未传入或传入空则取默认值url作为key。 | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Web({ src: "https://www.example.com/", controller: this.controller}) .onAppear(() => { // 预获取时,需要將"https://www.example1.com/post?e=f&g=h"替换成真实要访问的网站地址。 webview.WebviewController.prefetchResource( {url:"https://www.example1.com/post?e=f&g=h", method:"POST", formData:"a=x&b=y",}, [{headerKey:"c", headerValue:"z",},], "KeyX", 500); }) .onPageEnd(() => { // 清除后续不再使用的预获取缓存。 webview.WebviewController.clearPrefetchedResource(["KeyX",]); }) } } } ``` ### prepareForPageLoad10+ static prepareForPageLoad(url: string, preconnectable: boolean, numSockets: number): void 预连接url,在加载url之前调用此API,对url只进行dns解析,socket建链操作,并不获取主资源子资源。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------------| ------- | ---- | ------------- | | url | string | 是 | 预连接的url。| | preconnectable | boolean | 是 | 是否进行预连接。如果preconnectable为true,则对url进行dns解析,socket建链预连接;如果preconnectable为false,则不做任何预连接操作。| | numSockets | number | 是 | 要预连接的socket数。socket数目连接需要大于0,最多允许6个连接。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100002 | Invalid url. | | 171000013| The number of preconnect sockets is invalid. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { console.log("EntryAbility onCreate"); webview.WebviewController.initializeWebEngine(); // 预连接时,需要將'https://www.example.com'替换成一个真实的网站地址。 webview.WebviewController.prepareForPageLoad("https://www.example.com", true, 2); AppStorage.setOrCreate("abilityWant", want); console.log("EntryAbility onCreate done"); } } ``` ### setCustomUserAgent10+ setCustomUserAgent(userAgent: string): void 设置自定义用户代理,会覆盖系统的用户代理。 当Web组件src设置了url时,建议在onControllerAttached回调事件中设置UserAgent,设置方式请参考示例。不建议将UserAgent设置在onLoadIntercept回调事件中,会概率性出现设置失败。 当Web组件src设置为空字符串时,建议先调用setCustomUserAgent方法设置UserAgent,再通过loadUrl加载具体页面。 默认UserAgent定义与使用场景请参考[UserAgent详情参考](../../web/web-default-userAgent.md) > **说明:** > >当Web组件src设置了url,且未在onControllerAttached回调事件中设置UserAgent。再调用setCustomUserAgent方法时,可能会出现加载的页面与实际设置UserAgent不符的异常现象。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------------| ------- | ---- | ------------- | | userAgent | string | 是 | 用户自定义代理信息。建议先使用[getUserAgent](#getuseragent)获取当前默认用户代理,在此基础上追加自定义用户代理信息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State customUserAgent: string = ' DemoApp'; build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .onControllerAttached(() => { console.log("onControllerAttached"); try { let userAgent = this.controller.getUserAgent() + this.customUserAgent; this.controller.setCustomUserAgent(userAgent); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } } } ``` ### setDownloadDelegate11+ setDownloadDelegate(delegate: WebDownloadDelegate): void 为当前的Web组件设置一个WebDownloadDelegate,该delegate用来接收页面内触发的下载与下载的进展。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------------| ------- | ---- | ------------- | | delegate | [WebDownloadDelegate](#webdownloaddelegate11) | 是 | 用来接收下载进回调的委托。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); delegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate(); build() { Column() { Button('setDownloadDelegate') .onClick(() => { try { this.controller.setDownloadDelegate(this.delegate); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### startDownload11+ startDownload(url: string): void 使用Web组件的下载能力来下载指定的url, 比如下载网页中指定的图片。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------------| ------- | ---- | ------------- | | url | string | 是 | 下载地址。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100002 | Invalid url. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); delegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate(); build() { Column() { Button('setDownloadDelegate') .onClick(() => { try { this.controller.setDownloadDelegate(this.delegate); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('startDownload') .onClick(() => { try { this.controller.startDownload('https://www.example.com'); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getCustomUserAgent10+ getCustomUserAgent(): string 获取自定义用户代理。 默认UserAgent定义与使用场景请参考[UserAgent详情参考](../../web/web-default-userAgent.md) **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | ------------------------- | | string | 用户自定义代理信息。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State userAgent: string = ''; build() { Column() { Button('getCustomUserAgent') .onClick(() => { try { this.userAgent = this.controller.getCustomUserAgent(); console.log("userAgent: " + this.userAgent); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### setConnectionTimeout11+ static setConnectionTimeout(timeout: number): void 设置网络连接超时时间,使用者可通过Web组件中的onErrorReceive方法获取超时错误码。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------------| ------- | ---- | ------------- | | timeout | number | 是 | socket连接超时时间,以秒为单位,socket必须为大于0的整数。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('setConnectionTimeout') .onClick(() => { try { webview.WebviewController.setConnectionTimeout(5); console.log("setConnectionTimeout: 5s"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) .onErrorReceive((event) => { if (event) { console.log('getErrorInfo:' + event.error.getErrorInfo()); console.log('getErrorCode:' + event.error.getErrorCode()); } }) } } } ``` ### warmupServiceWorker12+ static warmupServiceWorker(url: string): void 预热ServiceWorker,以提升首屏页面的加载速度(仅限于会使用ServiceWorker的页面)。在加载url之前调用此API。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ---------------| ------- | ---- | ------------- | | url | string | 是 | 需要预热ServiceWorker的url。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100002 | Invalid url. | **示例:** ```ts // xxx.ts import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; import { webview } from '@kit.ArkWeb'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { console.log("EntryAbility onCreate"); webview.WebviewController.initializeWebEngine(); webview.WebviewController.warmupServiceWorker("https://www.example.com"); AppStorage.setOrCreate("abilityWant", want); } } ``` ### enableSafeBrowsing11+ enableSafeBrowsing(enable: boolean): void 启用检查网站安全风险的功能,非法和欺诈网站是强制启用的,不能通过此功能禁用。 本功能默认不生效,OpenHarmony只提供恶意网址拦截页WebUI,网址风险检测以及显示WebUI的功能由Vendor实现。推荐在WebContentsObserver中监听跳转[DidStartNavigation](https://gitee.com/openharmony-tpc/chromium_src/blob/master/content/public/browser/web_contents_observer.h#:~:text=virtual%20void-,DidStartNavigation)、[DidRedirectNavigation](https://gitee.com/openharmony-tpc/chromium_src/blob/master/content/public/browser/web_contents_observer.h#:~:text=virtual%20void-,DidRedirectNavigation)进行检测。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | --------| ------- | ---- | ---------------------------| | enable | boolean | 是 | 是否启用检查网站安全风险的功能。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('enableSafeBrowsing') .onClick(() => { try { this.controller.enableSafeBrowsing(true); console.log("enableSafeBrowsing: true"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### isSafeBrowsingEnabled11+ isSafeBrowsingEnabled(): boolean 获取当前网页是否启用了检查网站安全风险。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------- | --------------------------------------- | | boolean | 当前网页是否启用了检查网站安全风险的功能,默认为false。| **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('isSafeBrowsingEnabled') .onClick(() => { let result = this.controller.isSafeBrowsingEnabled(); console.log("result: " + result); }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### enableIntelligentTrackingPrevention12+ enableIntelligentTrackingPrevention(enable: boolean): void 启用智能防跟踪功能,默认该功能未启用。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | --------| ------- | ---- | ---------------------------| | enable | boolean | 是 | 是否启用智能防跟踪功能。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------- | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('enableIntelligentTrackingPrevention') .onClick(() => { try { this.controller.enableIntelligentTrackingPrevention(true); console.log("enableIntelligentTrackingPrevention: true"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### isIntelligentTrackingPreventionEnabled12+ isIntelligentTrackingPreventionEnabled(): boolean 获取当前Web是否启用了智能防跟踪功能。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------- | --------------------------------------- | | boolean | 当前Web是否启用了智能防跟踪功能,默认为false。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------- | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('isIntelligentTrackingPreventionEnabled') .onClick(() => { try { let result = this.controller.isIntelligentTrackingPreventionEnabled(); console.log("result: " + result); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### addIntelligentTrackingPreventionBypassingList12+ static addIntelligentTrackingPreventionBypassingList(hostList: Array\): void 添加智能防跟踪功能绕过的域名列表。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ----------- | ------------- | ---- | ------------------------ | | hostList | Array\ | 是 | 绕过智能防跟踪功能的域名列表。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('addIntelligentTrackingPreventionBypassingList') .onClick(() => { try { let hostList = ["www.test1.com", "www.test2.com", "www.test3.com"]; webview.WebviewController.addIntelligentTrackingPreventionBypassingList(hostList); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### removeIntelligentTrackingPreventionBypassingList12+ static removeIntelligentTrackingPreventionBypassingList(hostList: Array\): void 删除通过addIntelligentTrackingPreventionBypassingList接口添加的部分域名列表。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ----------- | ------------- | ---- | ------------------------ | | hostList | Array\ | 是 | 绕过智能防跟踪功能的域名列表。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('removeIntelligentTrackingPreventionBypassingList') .onClick(() => { try { let hostList = ["www.test1.com", "www.test2.com"]; webview.WebviewController.removeIntelligentTrackingPreventionBypassingList(hostList); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### clearIntelligentTrackingPreventionBypassingList12+ static clearIntelligentTrackingPreventionBypassingList(): void 删除通过addIntelligentTrackingPreventionBypassingList接口添加的所有域名。 **系统能力:** SystemCapability.Web.Webview.Core **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearIntelligentTrackingPreventionBypassingList') .onClick(() => { webview.WebviewController.clearIntelligentTrackingPreventionBypassingList(); }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getDefaultUserAgent14+ static getDefaultUserAgent(): string 获取默认用户代理。 此接口只允许在UI线程调用。 **系统能力:** SystemCapability.Web.Webview.Core **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { console.log("EntryAbility onCreate"); webview.WebviewController.initializeWebEngine(); let defaultUserAgent = webview.WebviewController.getDefaultUserAgent(); console.log("defaultUserAgent: " + defaultUserAgent); } } ``` ### enableAdsBlock12+ enableAdsBlock(enable: boolean): void 启用广告过滤功能,默认该功能未启用。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | --------| ------- | ---- | ---------------------------| | enable | boolean | 是 | 是否启用广告过滤功能。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ----------------------- | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Parameter string is too long. 3.Parameter verification failed. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('enableAdsBlock') .onClick(() => { try { this.controller.enableAdsBlock(true); console.log("enableAdsBlock: true") } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### isAdsBlockEnabled12+ isAdsBlockEnabled() : boolean 查询广告过滤功能是否开启,默认该功能未启用。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------------------------------------------------------------ | ---------------------- | | boolean | 返回true代表广告过滤功能已开启,返回false代表广告过滤功能关闭。 | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('isAdsBlockEnabled') .onClick(() => { try { let isAdsBlockEnabled: boolean = this.controller.isAdsBlockEnabled(); console.log("isAdsBlockEnabled:", isAdsBlockEnabled); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### isAdsBlockEnabledForCurPage12+ isAdsBlockEnabledForCurPage() : boolean 查询当前网页是否开启广告过滤功能。 当Web组件使能广告过滤功能后,默认所有页面都是开启广告过滤的,支持通过[addAdsBlockDisallowedList](#addadsblockdisallowedlist12)指定域名禁用广告过滤。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------------------------------------------------------------ | ---------------------- | | boolean | 返回true代表此网页已开启广告过滤,返回false代表当前网页已关闭广告过滤。 | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('isAdsBlockEnabledForCurPage') .onClick(() => { try { let isAdsBlockEnabledForCurPage: boolean = this.controller.isAdsBlockEnabledForCurPage(); console.log("isAdsBlockEnabledForCurPage:", isAdsBlockEnabledForCurPage); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### setRenderProcessMode12+ static setRenderProcessMode(mode: RenderProcessMode): void 设置ArkWeb渲染子进程模式。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ----------- | ------------- | ---- | ------------------------ | | mode | [RenderProcessMode](#renderprocessmode12)| 是 | 渲染子进程模式。可以先调用[getRenderProcessMode()](#getrenderprocessmode12)查看当前设备的ArkWeb渲染子进程模式,枚举值0为单子进程模式,枚举值1为多子进程模式。如果传入RenderProcessMode枚举值之外的非法数字,则默认识别为多渲染子进程模式。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('setRenderProcessMode') .onClick(() => { try { webview.WebviewController.setRenderProcessMode(webview.RenderProcessMode.MULTIPLE); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getRenderProcessMode12+ static getRenderProcessMode(): RenderProcessMode 查询ArkWeb的渲染子进程模式。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ----------------------------------------- | ------------------------------------------------------------ | | [RenderProcessMode](#renderprocessmode12) | 渲染子进程模式类型。调用[getRenderProcessMode()](#getrenderprocessmode12)获取当前设备的ArkWeb渲染子进程模式,枚举值0为单子进程模式,枚举值1为多子进程模式。如果获取的值不在RenderProcessMode枚举值范围内,则默认为多渲染子进程模式。 | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getRenderProcessMode') .onClick(() => { let mode = webview.WebviewController.getRenderProcessMode(); console.log("getRenderProcessMode: " + mode); }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### terminateRenderProcess12+ terminateRenderProcess(): boolean 销毁渲染进程。 调用该接口将会主动销毁相关联的渲染进程。如果渲染进程尚未启动,或者已销毁则没有任何影响。此外销毁渲染进程会同时影响所有与该渲染进程关联的其他实例。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------------------------------------------------------------ | ---------------------- | | boolean | 返回销毁渲染进程的结果,如果渲染进程可以被销毁则返回true,否则返回false。 如果渲染进程已被销毁则直接返回true。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('terminateRenderProcess') .onClick(() => { let result = this.controller.terminateRenderProcess(); console.log("terminateRenderProcess result: " + result); }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### postUrl11+ postUrl(url: string, postData: ArrayBuffer): void 使用"POST"方法加载带有postData的url。如果url不是网络url,则会使用[loadUrl](#loadurl)方法加载url,忽略postData参数。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ---------------- | ---- | :-------------------- | | url | string | 是 | 需要加载的 URL。 | | postData | ArrayBuffer | 是 | 使用"POST"方法传递数据。 该请求必须采用"application/x-www-form-urlencoded"编码。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | | 17100002 | Invalid url. | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; class TestObj { constructor() { } test(str: string): ArrayBuffer { let buf = new ArrayBuffer(str.length); let buff = new Uint8Array(buf); for (let i = 0; i < str.length; i++) { buff[i] = str.charCodeAt(i); } return buf; } } @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); @State testObjtest: TestObj = new TestObj(); build() { Column() { Button('postUrl') .onClick(() => { try { // 数据转化为ArrayBuffer类型。 let postData = this.testObjtest.test("Name=test&Password=test"); this.controller.postUrl('www.example.com', postData); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: '', controller: this.controller }) } } } ``` ### createWebPrintDocumentAdapter11+ createWebPrintDocumentAdapter(jobName: string): print.PrintDocumentAdapter 创建web相关打印功能。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------ | ---- | :-------------------- | | jobName | string | 是 | 需要打印的文件名。 | **返回值:** | 类型 | 说明 | | -------------------- | ------------------------- | | print.printDocumentAdapter | 返回打印文档的适配器。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | -------------------------------------------------------------------------- | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError, print } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('createWebPrintDocumentAdapter') .onClick(() => { try { let webPrintDocadapter = this.controller.createWebPrintDocumentAdapter('example.pdf'); print.print('example_jobid', webPrintDocadapter, null, getContext()); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### isIncognitoMode11+ isIncognitoMode(): boolean 查询当前是否是隐私模式的Webview。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | -------------------- | ------------------------- | | boolean | 返回是否是隐私模式的Webview。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | -------------------------------------------------------------------------- | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('isIncognitoMode') .onClick(() => { try { let result = this.controller.isIncognitoMode(); console.log('isIncognitoMode' + result); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getSecurityLevel11+ getSecurityLevel(): SecurityLevel 获取当前网页的安全级别。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ----------------------------------- | --------------------------- | | [SecurityLevel](#securitylevel11) | 当前网页的安全级别,具体值为NONE、SECURE、WARNING、DANGEROUS。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .onPageEnd((event) => { if (event) { let securityLevel = this.controller.getSecurityLevel(); console.info('securityLevel: ', securityLevel); } }) } } } ``` ### setScrollable12+ setScrollable(enable: boolean, type?: ScrollType): void 设置网页是否允许滚动。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ---------------------- | | enable | boolean | 是 | 表示是否将网页设置为允许滚动,true表示设置为允许滚动,false表示禁止滚动。 | | type | [ScrollType](#scrolltype12) | 否 | 网页可触发的滚动类型,支持缺省配置。
- enable为false时,表示禁止ScrollType类型的滚动,当ScrollType缺省时表示禁止所有类型网页滚动。
- enable为true时,ScrollType缺省与否,都表示允许所有类型的网页滚动。| **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('setScrollable') .onClick(() => { try { this.controller.setScrollable(true); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getScrollable12+ getScrollable(): boolean 获取当前网页是否允许滚动。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------ | -------------- | | boolean | 当前网页是否允许滚动,true为允许滚动,false为禁止滚动。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getScrollable') .onClick(() => { try { let scrollEnabled = this.controller.getScrollable(); console.log("scrollEnabled: " + scrollEnabled); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### setPrintBackground12+ setPrintBackground(enable: boolean): void 设置是否打印网页背景。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | -------- | ------- | ---- | -------------------------------------- | | enable | boolean | 是 | 表示是否打印网页背景,true表示设置为打印网页背景,false表示取消网页背景打印。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('setPrintBackground') .onClick(() => { try { this.controller.setPrintBackground(false); } catch (error) { console.error(`ErrorCode:${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getPrintBackground12+ getPrintBackground(): boolean 查询webview是否打印网页背景。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | -------------------- | ------------------------- | | boolean | 返回Webview是否打印网页背景。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('setPrintBackground') .onClick(() => { try { let enable = this.controller.getPrintBackground(); console.log("getPrintBackground: " + enable); } catch (error) { console.error(`ErrorCode:${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getLastJavascriptProxyCallingFrameUrl12+ getLastJavascriptProxyCallingFrameUrl(): string 通过[registerJavaScriptProxy](#registerjavascriptproxy)或者[javaScriptProxy](ts-basic-components-web.md#javascriptproxy)注入JavaScript对象到window对象中。该接口可以获取最后一次调用注入的对象的frame的url。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; class TestObj { mycontroller: webview.WebviewController; constructor(controller: webview.WebviewController) { this.mycontroller = controller; } test(testStr: string): string { console.log('Web Component str' + testStr + " url " + this.mycontroller.getLastJavascriptProxyCallingFrameUrl()); return testStr; } toString(): void { console.log('Web Component toString ' + " url " + this.mycontroller.getLastJavascriptProxyCallingFrameUrl()); } testNumber(testNum: number): number { console.log('Web Component number' + testNum + " url " + this.mycontroller.getLastJavascriptProxyCallingFrameUrl()); return testNum; } testBool(testBol: boolean): boolean { console.log('Web Component boolean' + testBol + " url " + this.mycontroller.getLastJavascriptProxyCallingFrameUrl()); return testBol; } } class WebObj { mycontroller: webview.WebviewController; constructor(controller: webview.WebviewController) { this.mycontroller = controller; } webTest(): string { console.log('Web test ' + " url " + this.mycontroller.getLastJavascriptProxyCallingFrameUrl()); return "Web test"; } webString(): void { console.log('Web test toString ' + " url " + this.mycontroller.getLastJavascriptProxyCallingFrameUrl()); } } @Entry @Component struct Index { controller: webview.WebviewController = new webview.WebviewController(); @State testObjtest: TestObj = new TestObj(this.controller); @State webTestObj: WebObj = new WebObj(this.controller); build() { Column() { Button('refresh') .onClick(() => { try { this.controller.refresh(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('Register JavaScript To Window') .onClick(() => { try { this.controller.registerJavaScriptProxy(this.testObjtest, "objName", ["test", "toString", "testNumber", "testBool"]); this.controller.registerJavaScriptProxy(this.webTestObj, "objTestName", ["webTest", "webString"]); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('deleteJavaScriptRegister') .onClick(() => { try { this.controller.deleteJavaScriptRegister("objName"); this.controller.deleteJavaScriptRegister("objTestName"); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .javaScriptAccess(true) } } } ``` 加载的html文件。 ```html

``` ### pauseAllTimers12+ pauseAllTimers(): void 暂停所有WebView的定时器。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Row() { Button('PauseAllTimers') .onClick(() => { try { webview.WebviewController.pauseAllTimers(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } Web({ src: $rawfile("index.html"), controller: this.controller }) } } } ``` 加载的html文件。 ```html ``` ### resumeAllTimers12+ resumeAllTimers(): void 恢复从pauseAllTimers()接口中被暂停的所有的定时器。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Row() { Button('ResumeAllTimers') .onClick(() => { try { webview.WebviewController.resumeAllTimers(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button('PauseAllTimers') .onClick(() => { try { webview.WebviewController.pauseAllTimers(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) } Web({ src: $rawfile("index.html"), controller: this.controller }) } } } ``` 加载的html文件。 ```html ``` ### stopAllMedia12+ stopAllMedia(): void 控制网页所有音视频停止。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('stopAllMedia') .onClick(() => { try { this.controller.stopAllMedia(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### pauseAllMedia12+ pauseAllMedia(): void 控制网页所有音视频暂停。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('pauseAllMedia') .onClick(() => { try { this.controller.pauseAllMedia(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### resumeAllMedia12+ resumeAllMedia(): void 控制网页被pauseAllMedia接口暂停的音视频继续播放。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('resumeAllMedia') .onClick(() => { try { this.controller.resumeAllMedia(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### closeAllMediaPresentations12+ closeAllMediaPresentations(): void 控制网页所有全屏视频关闭。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('closeAllMediaPresentations') .onClick(() => { try { this.controller.closeAllMediaPresentations(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### getMediaPlaybackState12+ getMediaPlaybackState(): MediaPlaybackState 查询当前所有音视频播控状态。 **系统能力:** SystemCapability.Web.Webview.Core **返回值:** | 类型 | 说明 | | ------------------------------------------- | --------------------------------------------------------- | | [MediaPlaybackState](#mediaplaybackstate12) | 当前网页的播控状态,具体值为NONE、PLAYING、PAUSED、STOPPED。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('getMediaPlaybackState') .onClick(() => { try { console.log("MediaPlaybackState : " + this.controller.getMediaPlaybackState()); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### setWebSchemeHandler12+ setWebSchemeHandler(scheme: string, handler: WebSchemeHandler): void 为当前Web组件设置[WebSchemeHandler](#webschemehandler12), [WebSchemeHandler](#webschemehandler12)类用于拦截指定scheme的请求。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | :------------------------ | | scheme | string | 是 | 要拦截的协议。 | | handler | [WebSchemeHandler](#webschemehandler12) | 是 | 拦截此协议的拦截器。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Incorrect parameter types. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler(); build() { Column() { Button('setWebSchemeHandler') .onClick(() => { try { this.controller.setWebSchemeHandler('http', this.schemeHandler); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### clearWebSchemeHandler12+ clearWebSchemeHandler(): void 清除当前Web组件设置的所有WebSchemeHandler。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearWebSchemeHandler') .onClick(() => { try { this.controller.clearWebSchemeHandler(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### setServiceWorkerWebSchemeHandler12+ setServiceWorkerWebSchemeHandler(scheme: string, handler: WebSchemeHandler): void 为当前应用的所有Web组件设置用于拦截ServiceWorker的WebSchemeHandler。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | :------------------------ | | scheme | string | 是 | 要拦截的协议。 | | handler | [WebSchemeHandler](#webschemehandler12) | 是 | 拦截此协议的拦截器。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Parameter error. Possible causes: 1. Incorrect parameter types. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler(); build() { Column() { Button('setWebSchemeHandler') .onClick(() => { try { webview.WebviewController.setServiceWorkerWebSchemeHandler('http', this.schemeHandler); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### clearServiceWorkerWebSchemeHandler12+ clearServiceWorkerWebSchemeHandler(): void 清除应用中设置的所有用于拦截ServiceWorker的WebSchemeHandler。 **系统能力:** SystemCapability.Web.Webview.Core **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button('clearServiceWorkerWebSchemeHandler') .onClick(() => { webview.WebviewController.clearServiceWorkerWebSchemeHandler(); }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` ### startCamera12+ startCamera(): void 开启当前网页摄像头捕获。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { abilityAccessCtrl, PermissionRequestResult, common } from '@kit.AbilityKit'; let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager(); try { let context: Context = getContext(this) as common.UIAbilityContext; atManager.requestPermissionsFromUser(context, ['ohos.permission.CAMERA'], (err: BusinessError, data: PermissionRequestResult) => { console.info('data:' + JSON.stringify(data)); console.info('data permissions:' + data.permissions); console.info('data authResults:' + data.authResults); }) } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } @Entry @Component struct WebComponent { controller: webview.WebviewController = new webview.WebviewController(); build() { Column() { Button("startCamera").onClick(() => { try { this.controller.startCamera(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button("stopCamera").onClick(() => { try { this.controller.stopCamera(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Button("closeCamera").onClick(() => { try { this.controller.closeCamera(); } catch (error) { console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); } }) Web({ src: $rawfile('index.html'), controller: this.controller }) .onPermissionRequest((event) => { if (event) { AlertDialog.show({ title: 'title', message: 'text', primaryButton: { value: 'deny', action: () => { event.request.deny(); } }, secondaryButton: { value: 'onConfirm', action: () => { event.request.grant(event.request.getAccessibleResource()); } }, cancel: () => { event.request.deny(); } }) } }) } } } ``` 加载的html文件。 ```html ``` ### stopCamera12+ stopCamera(): void 停止当前网页摄像头捕获。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** 完整示例代码参考[startCamera](#startcamera12)。 ### closeCamera12+ closeCamera(): void 关闭当前网页摄像头捕获。 **系统能力:** SystemCapability.Web.Webview.Core **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** 完整示例代码参考[startCamera](#startcamera12)。 ### precompileJavaScript12+ precompileJavaScript(url: string, script: string | Uint8Array, cacheOptions: CacheOptions): Promise\ 预编译JavaScript生成字节码缓存或根据提供的参数更新已有的字节码缓存。 接口通过提供的文件信息、E-Tag响应头和Last-Modified响应头判断是否需要更新已有的字节码缓存。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | | ------- | ------ | ---- | :-------------------- | | url | string | 是 | 本地JavaScript文件对应的网络地址,即业务网页请求该文件的服务器版本时使用的网络地址。网络地址仅支持http或https协议,长度不超过2048。如果该网络地址对应的缓存失效,则业务网页将通过网络请求对应的资源。 | | script | string \| Uint8Array | 是 | 本地JavaScript的文本内容。内容不能为空。 | | cacheOptions | [CacheOptions](#cacheoptions12) | 是 | 用于控制字节码缓存更新。 | **返回值:** | 类型 | 说明 | | ----------------------------------- | --------------------------- | | Promise\ | 生成字节码缓存的错误码,0表示无错误,-1表示内部错误。 | **错误码:** 以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。 | 错误码ID | 错误信息 | | -------- | ------------------------------------------------------------ | | 401 | Invalid input parameter.Possible causes: 1. Mandatory parameters are left unspecified.2. Incorrect parameter types.3. Parameter verification failed. | | 17100001 | Init error. The WebviewController must be associated with a Web component. | **示例:** 接口推荐配合动态组件使用,使用离线的Web组件用于生成字节码缓存,并在适当的时机加载业务用Web组件使用这些字节码缓存。下方是代码示例: 1. 首先,在EntryAbility中将UIContext存到localStorage中。 ```ts // EntryAbility.ets import { UIAbility } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI'; const localStorage: LocalStorage = new LocalStorage('uiContext'); export default class EntryAbility extends UIAbility { storage: LocalStorage = localStorage; onWindowStageCreate(windowStage: window.WindowStage) { windowStage.loadContent('pages/Index', this.storage, (err, data) => { if (err.code) { return; } this.storage.setOrCreate("uiContext", windowStage.getMainWindowSync().getUIContext()); }); } } ``` 2. 编写动态组件所需基础代码。 ```ts // DynamicComponent.ets import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI'; export interface BuilderData { url: string; controller: WebviewController; } const storage = LocalStorage.getShared(); export class NodeControllerImpl extends NodeController { private rootNode: BuilderNode | null = null; private wrappedBuilder: WrappedBuilder | null = null; constructor(wrappedBuilder: WrappedBuilder) { super(); this.wrappedBuilder = wrappedBuilder; } makeNode(): FrameNode | null { if (this.rootNode != null) { return this.rootNode.getFrameNode(); } return null; } initWeb(url: string, controller: WebviewController) { if(this.rootNode != null) { return; } const uiContext: UIContext = storage.get("uiContext") as UIContext; if (!uiContext) { return; } this.rootNode = new BuilderNode(uiContext); this.rootNode.build(this.wrappedBuilder, { url: url, controller: controller }); } } export const createNode = (wrappedBuilder: WrappedBuilder, data: BuilderData) => { const baseNode = new NodeControllerImpl(wrappedBuilder); baseNode.initWeb(data.url, data.controller); return baseNode; } ``` 3. 编写用于生成字节码缓存的组件,本例中的本地Javascript资源内容通过文件读取接口读取rawfile目录下的本地文件。 ```ts // PrecompileWebview.ets import { BuilderData } from "./DynamicComponent"; import { Config, configs } from "./PrecompileConfig"; @Builder function WebBuilder(data: BuilderData) { Web({ src: data.url, controller: data.controller }) .onControllerAttached(() => { precompile(data.controller, configs); }) .fileAccess(true) } export const precompileWebview = wrapBuilder(WebBuilder); export const precompile = async (controller: WebviewController, configs: Array) => { for (const config of configs) { let content = await readRawFile(config.localPath); try { controller.precompileJavaScript(config.url, content, config.options) .then(errCode => { console.error("precompile successfully! " + errCode); }).catch((errCode: number) => { console.error("precompile failed. " + errCode); }); } catch (err) { console.error("precompile failed. " + err.code + " " + err.message); } } } async function readRawFile(path: string) { try { return await getContext().resourceManager.getRawFileContent(path);; } catch (err) { return new Uint8Array(0); } } ``` JavaScript资源的获取方式也可通过[网络请求](../apis-network-kit/js-apis-http.md)的方式获取,但此方法获取到的http响应头非标准HTTP响应头格式,需额外将响应头转换成标准HTTP响应头格式后使用。如通过网络请求获取到的响应头是e-tag,则需要将其转换成E-Tag后使用。 4. 编写业务用组件代码。 ```ts // BusinessWebview.ets import { BuilderData } from "./DynamicComponent"; @Builder function WebBuilder(data: BuilderData) { // 此处组件可根据业务需要自行扩展 Web({ src: data.url, controller: data.controller }) .cacheMode(CacheMode.Default) } export const businessWebview = wrapBuilder(WebBuilder); ``` 5. 编写资源配置信息。 ```ts // PrecompileConfig.ets import { webview } from '@kit.ArkWeb' export interface Config { url: string, localPath: string, // 本地资源路径 options: webview.CacheOptions } export let configs: Array = [ { url: "https://www.example.com/example.js", localPath: "example.js", options: { responseHeaders: [ { headerKey: "E-Tag", headerValue: "aWO42N9P9dG/5xqYQCxsx+vDOoU="}, { headerKey: "Last-Modified", headerValue: "Wed, 21 Mar 2024 10:38:41 GMT"} ] } } ] ``` 6. 在页面中使用。 ```ts // Index.ets import { webview } from '@kit.ArkWeb'; import { NodeController } from '@kit.ArkUI'; import { createNode } from "./DynamicComponent" import { precompileWebview } from "./PrecompileWebview" import { businessWebview } from "./BusinessWebview" @Entry @Component struct Index { @State precompileNode: NodeController | undefined = undefined; precompileController: webview.WebviewController = new webview.WebviewController(); @State businessNode: NodeController | undefined = undefined; businessController: webview.WebviewController = new webview.WebviewController(); aboutToAppear(): void { // 初始化用于注入本地资源的Web组件 this.precompileNode = createNode(precompileWebview, { url: "https://www.example.com/empty.html", controller: this.precompileController}); } build() { Column() { // 在适当的时机加载业务用Web组件,本例以Button点击触发为例 Button("加载页面") .onClick(() => { this.businessNode = createNode(businessWebview, { url: "https://www.example.com/business.html", controller: this.businessController }); }) // 用于业务的Web组件 NodeContainer(this.businessNode); } } } ``` 当需要更新本地已经生成的编译字节码时,修改cacheOptions参数中responseHeaders中的E-Tag或Last-Modified响应头对应的值,再次调用接口即可。 ### onCreateNativeMediaPlayer12+ onCreateNativeMediaPlayer(callback: CreateNativeMediaPlayerCallback): void 注册回调函数,开启[应用接管网页媒体播放功能](ts-basic-components-web.md#enablenativemediaplayer12)后,当网页中有播放媒体时,触发注册的回调函数。 如果应用接管网页媒体播放功能未开启,则注册的回调函数不会被触发。 **系统能力:** SystemCapability.Web.Webview.Core **参数:** | 参数名 | 类型 | 必填 | 说明 | |--------|------|------|------| | callback | [CreateNativeMediaPlayerCallback](#createnativemediaplayercallback12) | 是 | 接管网页媒体播放的回调函数。 | **示例:** ```ts // xxx.ets import { webview } from '@kit.ArkWeb'; class ActualNativeMediaPlayerListener { handler: webview.NativeMediaPlayerHandler; constructor(handler: webview.NativeMediaPlayerHandler) { this.handler = handler; } onPlaying() { // 本地播放器开始播放。 this.handler.handleStatusChanged(webview.PlaybackStatus.PLAYING); } onPaused() { // 本地播放器暂停播放。 this.handler.handleStatusChanged(webview.PlaybackStatus.PAUSED); } onSeeking() { // 本地播放器开始执行跳转到目标时间点。 this.handler.handleSeeking(); } onSeekDone() { // 本地播放器 seek 完成。 this.handler.handleSeekFinished(); } onEnded() { // 本地播放器播放完成。 this.handler.handleEnded(); } onVolumeChanged() { // 获取本地播放器的音量。 let volume: number = getVolume(); this.handler.handleVolumeChanged(volume); } onCurrentPlayingTimeUpdate() { // 更新播放时间。 let currentTime: number = getCurrentPlayingTime(); // 将时间单位换算成秒。 let currentTimeInSeconds = convertToSeconds(currentTime); this.handler.handleTimeUpdate(currentTimeInSeconds); } onBufferedChanged() { // 缓存发生了变化。 // 获取本地播放器的缓存时长。 let bufferedEndTime: number = getCurrentBufferedTime(); // 将时间单位换算成秒。 let bufferedEndTimeInSeconds = convertToSeconds(bufferedEndTime); this.handler.handleBufferedEndTimeChanged(bufferedEndTimeInSeconds); // 检查缓存状态。 // 如果缓存状态发生了变化,则向 ArkWeb 内核通知缓存状态。 let lastReadyState: webview.ReadyState = getLastReadyState(); let currentReadyState: webview.ReadyState = getCurrentReadyState(); if (lastReadyState != currentReadyState) { this.handler.handleReadyStateChanged(currentReadyState); } } onEnterFullscreen() { // 本地播放器进入了全屏状态。 let isFullscreen: boolean = true; this.handler.handleFullscreenChanged(isFullscreen); } onExitFullscreen() { // 本地播放器退出了全屏状态。 let isFullscreen: boolean = false; this.handler.handleFullscreenChanged(isFullscreen); } onUpdateVideoSize(width: number, height: number) { // 当本地播放器解析出视频宽高时, 通知 ArkWeb 内核。 this.handler.handleVideoSizeChanged(width, height); } onDurationChanged(duration: number) { // 本地播放器解析到了新的媒体时长, 通知 ArkWeb 内核。 this.handler.handleDurationChanged(duration); } onError(error: webview.MediaError, errorMessage: string) { // 本地播放器出错了,通知 ArkWeb 内核。 this.handler.handleError(error, errorMessage); } onNetworkStateChanged(state: webview.NetworkState) { // 本地播放器的网络状态发生了变化, 通知 ArkWeb 内核。 this.handler.handleNetworkStateChanged(state); } onPlaybackRateChanged(playbackRate: number) { // 本地播放器的播放速率发生了变化, 通知 ArkWeb 内核。 this.handler.handlePlaybackRateChanged(playbackRate); } onMutedChanged(muted: boolean) { // 本地播放器的静音状态发生了变化, 通知 ArkWeb 内核。 this.handler.handleMutedChanged(muted); } // ... 监听本地播放器其他的状态 ... } class NativeMediaPlayerImpl implements webview.NativeMediaPlayerBridge { constructor(handler: webview.NativeMediaPlayerHandler, mediaInfo: webview.MediaInfo) { // 1. 创建一个本地播放器的状态监听。 let listener: ActualNativeMediaPlayerListener = new ActualNativeMediaPlayerListener(handler); // 2. 创建一个本地播放器。 // 3. 监听该本地播放器。 // ... } updateRect(x: number, y: number, width: number, height: number) { //