diff --git a/zh-cn/application-dev/reference/apis/js-apis-webview.md b/zh-cn/application-dev/reference/apis/js-apis-webview.md index 44659bcd0cbe05bd40170029b6f4d69dbaac2815..6a69af85aca3f1bc7a910866a98f92622694ebb8 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-webview.md +++ b/zh-cn/application-dev/reference/apis/js-apis-webview.md @@ -63,42 +63,6 @@ struct WebComponent { 通过WebMessagePort可以进行消息的发送以及接收。 -### close - -close(): void - -关闭该消息端口。 - -**系统能力：** SystemCapability.Web.Webview.Core - -**示例：** - -```ts -// xxx.ets -import web_webview from '@ohos.web.webview' - -@Entry -@Component -struct WebComponent { - controller: web_webview.WebviewController = new web_webview.WebviewController(); - msgPort: web_webview.WebMessagePort[] = null; - - build() { - Column() { - Button('close') - .onClick(() => { - if (this.msgPort && this.msgPort[1]) { - this.msgPort[1].close(); - } else { - console.error("msgPort is null, Please initialize first"); - } - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } -} -``` - ### postMessageEvent postMessageEvent(message: WebMessage): void @@ -448,6 +412,56 @@ function postStringToApp() { } ``` +### close + +close(): void + +关闭该消息端口。在使用close前，请先使用[createWebMessagePorts](#createwebmessageports)创建消息端口。 + +**系统能力：** SystemCapability.Web.Webview.Core + +**示例：** + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview' + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + msgPort: web_webview.WebMessagePort[] = null; + + 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.code}, Message: ${error.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.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } +} +``` + ## WebviewController 通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。 @@ -473,7 +487,6 @@ export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { console.log("EntryAbility onCreate") web_webview.WebviewController.initializeWebEngine() - globalThis.abilityWant = want console.log("EntryAbility onCreate done") } } @@ -516,30 +529,11 @@ export default class EntryAbility extends UIAbility { } ``` -### 创建对象 - -```ts -// xxx.ets -import web_webview from '@ohos.web.webview'; - -@Entry -@Component -struct WebComponent { - controller: web_webview.WebviewController = new web_webview.WebviewController(); - - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - } - } -} -``` - ### setWebDebuggingAccess static setWebDebuggingAccess(webDebuggingAccess: boolean): void -设置是否启用网页调试功能。 +设置是否启用网页调试功能。详情请参考[Devtools工具](../../web/web-debugging-with-devtools.md)。 **系统能力：** SystemCapability.Web.Webview.Core @@ -617,7 +611,7 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { - //需要加载的URL是string类型 + // 需要加载的URL是string类型。 this.controller.loadUrl('www.example.com'); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -643,7 +637,7 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { - //带参数headers + // 带参数headers。 this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -656,6 +650,7 @@ struct WebComponent { ``` 加载本地网页，加载本地资源文件有三种方式。 + 1.$rawfile方式。 ```ts // xxx.ets @@ -671,8 +666,8 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { - //通过$rawfile加载本地资源文件 - this.controller.loadUrl($rawfile('xxx.html')); + // 通过$rawfile加载本地资源文件。 + this.controller.loadUrl($rawfile('index.html')); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -682,6 +677,7 @@ struct WebComponent { } } ``` + 2.resources协议。 ```ts // xxx.ets @@ -697,8 +693,8 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { - //通过resource协议加载本地资源文件 - this.controller.loadUrl("resource://rawfile/xxx.html"); + // 通过resource协议加载本地资源文件。 + this.controller.loadUrl("resource://rawfile/index.html"); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -711,8 +707,9 @@ struct WebComponent { 3.通过沙箱路径加载本地文件，可以参考[web](../arkui-ts/ts-basic-components-web.md#web)加载沙箱路径的示例代码。 +加载的html文件。 ```html - + @@ -1343,6 +1340,24 @@ struct Index { } ``` +加载的html文件。 +```html + + + + + + Hello world! + + + +``` + ### runJavaScript runJavaScript(script: string, callback : AsyncCallback\): void @@ -1406,6 +1421,24 @@ struct WebComponent { } ``` +加载的html文件。 +```html + + + + + + Hello world! + + + +``` + ### runJavaScript runJavaScript(script: string): Promise\ @@ -1470,6 +1503,23 @@ struct WebComponent { } ``` +加载的html文件。 +```html + + + + + + Hello world! + + + +``` ### runJavaScriptExt10+ @@ -1569,8 +1619,11 @@ struct WebComponent { } } } +``` -//index.html +加载的html文件。 +```html + @@ -1681,8 +1734,11 @@ struct WebComponent { } } } +``` -//index.html +加载的html文件。 +```html + @@ -2178,14 +2234,15 @@ struct WebComponent { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } }) - Web({ src: $rawfile('xxx.html'), controller: this.controller }) + Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` +加载的html文件。 ```html - + @@ -2973,14 +3030,15 @@ struct WebComponent { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } }) - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` +加载的html文件。 ```html - + @@ -3045,14 +3103,15 @@ struct WebComponent { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } }) - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile('index.html'), controller: this.controller }) } } } ``` +加载的html文件。 ```html - + @@ -3123,8 +3182,9 @@ struct WebComponent { } ``` +加载的html文件。 ```html - + @@ -3640,7 +3700,7 @@ struct WebComponent { .onClick(() => { try { let state = this.controller.serializeWebState(); - // globalThis.cacheDir从MainAbility.ts中获取。 + // globalThis.cacheDir从EntryAbility.ts中获取。 let path = globalThis.cacheDir; path += '/WebState'; // 以同步方法打开文件。 @@ -3657,14 +3717,14 @@ struct WebComponent { } ``` -2.修改MainAbility.ts。 +2.修改EntryAbility.ts。 获取应用缓存文件路径。 ```ts // xxx.ts import UIAbility from '@ohos.app.ability.UIAbility'; import web_webview from '@ohos.web.webview'; -export default class MainAbility extends UIAbility { +export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { // 通过在globalThis对象上绑定cacheDir，可以实现UIAbility组件与Page之间的数据同步。 globalThis.cacheDir = this.context.cacheDir; @@ -3712,7 +3772,7 @@ struct WebComponent { Button('RestoreWebState') .onClick(() => { try { - // globalThis.cacheDir从MainAbility.ts中获取。 + // globalThis.cacheDir从EntryAbility.ts中获取。 let path = globalThis.cacheDir; path += '/WebState'; // 以同步方法打开文件。 @@ -3739,14 +3799,14 @@ struct WebComponent { } ``` -2.修改MainAbility.ts。 +2.修改EntryAbility.ts。 获取应用缓存文件路径。 ```ts // xxx.ts import UIAbility from '@ohos.app.ability.UIAbility'; import web_webview from '@ohos.web.webview'; -export default class MainAbility extends UIAbility { +export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { // 通过在globalThis对象上绑定cacheDir，可以实现UIAbility组件与Page之间的数据同步。 globalThis.cacheDir = this.context.cacheDir; diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index 9be5a42b57ccfd96a84fd44a58d924acd6b84bbd..ea0980c92ee839008e90aa1e411aca184f69fb6f 100755 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -60,7 +60,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { - //通过$rawfile加载本地资源文件 + // 通过$rawfile加载本地资源文件。 Web({ src: $rawfile("index.html"), controller: this.controller }) } } @@ -77,7 +77,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { - //通过resource协议加载本地资源文件 + // 通过resource协议加载本地资源文件。 Web({ src: "resource://rawfile/index.html", controller: this.controller }) } } @@ -90,7 +90,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ```ts // xxx.ets import web_webview from '@ohos.web.webview' - let url = 'file://' + globalThis.filesDir + '/xxx.html' + let url = 'file://' + globalThis.filesDir + '/index.html' @Entry @Component @@ -105,7 +105,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) } ``` - 2.修改MainAbility.ts。 + 2.修改EntryAbility.ts。 以filesDir为例，获取沙箱路径。若想获取其他路径，请参考[应用开发路径](../../application-models/application-context-stage.md#获取应用开发路径)。 ```ts // xxx.ts @@ -121,6 +121,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) } ``` + 加载的html文件。 ```html @@ -241,7 +242,7 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr | object | object | 是 | - | 参与注册的对象。只能声明方法，不能声明属性。 | | name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。 | | methodList | Array\ | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | -| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController再维护，建议使用WebviewController替代。 | +| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | 是 | - | 控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。 | **示例：** @@ -585,15 +586,16 @@ horizontalScrollBarAccess(horizontalScrollBar: boolean) controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile('index.html'), controller: this.controller }) .horizontalScrollBarAccess(true) } } } ``` + 加载的html文件。 ```html - + @@ -638,15 +640,16 @@ verticalScrollBarAccess(verticalScrollBar: boolean) controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile('index.html'), controller: this.controller }) .verticalScrollBarAccess(true) } } } ``` + 加载的html文件。 ```html - + @@ -1418,7 +1421,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) = controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { - Web({ src: $rawfile("xxx.html"), controller: this.controller }) + Web({ src: $rawfile("index.html"), controller: this.controller }) .onAlert((event) => { console.log("event.url:" + event.url) console.log("event.message:" + event.message) @@ -1448,8 +1451,9 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) = } ``` - ``` - + 加载的html文件。 + ```html + @@ -1500,7 +1504,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu build() { Column() { - Web({ src: $rawfile("xxx.html"), controller: this.controller }) + Web({ src: $rawfile("index.html"), controller: this.controller }) .onBeforeUnload((event) => { console.log("event.url:" + event.url) console.log("event.message:" + event.message) @@ -1530,8 +1534,9 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu } ``` - ``` - + 加载的html文件。 + ```html + @@ -1582,7 +1587,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) build() { Column() { - Web({ src: $rawfile("xxx.html"), controller: this.controller }) + Web({ src: $rawfile("index.html"), controller: this.controller }) .onConfirm((event) => { console.log("event.url:" + event.url) console.log("event.message:" + event.message) @@ -1612,8 +1617,9 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) } ``` - ``` - + 加载的html文件。 + ```html + @@ -1671,7 +1677,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul build() { Column() { - Web({ src: $rawfile("xxx.html"), controller: this.controller }) + Web({ src: $rawfile("index.html"), controller: this.controller }) .onPrompt((event) => { console.log("url:" + event.url) console.log("message:" + event.message) @@ -1702,8 +1708,9 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul } ``` - ``` - + 加载的html文件。 + ```html + @@ -1774,6 +1781,8 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) +通知主应用开始下载一个文件。 + **参数：** | 参数名 | 参数类型 | 参数描述 | @@ -2248,7 +2257,7 @@ onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void) onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean) 当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 -从API version 10开始再维护，建议使用[onLoadIntercept10+](#onloadintercept10)代替。 +从API version 10开始不再维护，建议使用[onLoadIntercept10+](#onloadintercept10)代替。 **参数：** @@ -3306,7 +3315,7 @@ onLoadIntercept(callback: (event?: { data: WebResourceRequest }) => boolean) | 参数名 | 参数类型 | 参数描述 | | ------- | ---------------------------------------- | --------- | -| request | [Webresourcerequest](#webresourcerequest) | url请求的相关信息。 | +| request | [WebResourceRequest](#webresourcerequest) | url请求的相关信息。 | **返回值：** @@ -4931,6 +4940,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr } ``` + 加载的html文件。 ```html @@ -4946,7 +4956,6 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr } - ``` ### runJavaScript(deprecated) @@ -4992,6 +5001,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) } ``` + 加载的html文件。 ```html @@ -5007,7 +5017,6 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) } - ``` ### stop(deprecated) @@ -5073,18 +5082,11 @@ clearHistory(): void 通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。 ### setCookie(deprecated) -setCookie(url: string, value: string): boolean +setCookie(): boolean 设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 从API version 9开始不再维护，建议使用[setCookie9+](../apis/js-apis-webview.md#setcookie)代替。 -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | ------ | ---- | ---- | ----------------- | -| url | string | 是 | - | 要设置的cookie所属的url，建议使用完整的url。 | -| value | string | 是 | - | cookie的值。 | - **返回值：** | 类型 | 说明 | @@ -5104,7 +5106,7 @@ setCookie(url: string, value: string): boolean Column() { Button('setCookie') .onClick(() => { - let result = this.controller.getCookieManager().setCookie("https://www.example.com", "a=b") + let result = this.controller.getCookieManager().setCookie() console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller })