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 b36d53850374ba5f4769d92629978b2529263c99..81c95ab4260f350acb4744131bbc05bd0163a5f7 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-webview.md +++ b/zh-cn/application-dev/reference/apis/js-apis-webview.md @@ -11,6 +11,7 @@ > - 示例效果请以真机运行为准，当前IDE预览器不支持。 ## 需要权限 + 访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。 ## 导入模块 @@ -248,7 +249,7 @@ export default class MainAbility extends Ability { ```ts // xxx.ets -import web_webview from '@ohos.web.webview' +import web_webview from '@ohos.web.webview'; @Entry @Component @@ -1438,7 +1439,7 @@ struct WebComponent { **系统能力：** SystemCapability.Web.Webview.Core -**返回值：** +**返回值：** | 类型 | 说明 | | ---------------------- | ----------------- | @@ -1452,7 +1453,7 @@ struct WebComponent { | -------- | ------------------------------------------------------------ | | 17100001 | Init error. The WebviewController must be associated with a Web component. | -**示例：** +**示例：** ```ts // xxx.ets @@ -1536,7 +1537,7 @@ struct WebComponent { this.ports = this.controller.createWebMessagePorts(); // 2、在应用侧的消息端口(如端口1)上注册回调事件。 this.ports[1].onMessageEvent((result: web_webview.WebMessage) => { - var msg = 'Got msg from HTML:'; + let msg = 'Got msg from HTML:'; if (typeof(result) == "string") { console.log("received string message from html5, string is:" + result); msg = msg + result; @@ -3495,7 +3496,7 @@ static existCookie(): boolean **系统能力：** SystemCapability.Web.Webview.Core -**返回值：** +**返回值：** | 类型 | 说明 | | ------- | -------------------------------------- | @@ -4228,133 +4229,6 @@ struct WebComponent { } ``` -## WebAsyncController - -通过WebAsyncController可以控制Web组件具有异步回调通知的行为，一个WebAsyncController对象控制一个Web组件。 - -### 创建对象 - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController(); - webAsyncController: web_webview.WebAsyncController = new web_webview.WebAsyncController(this.controller) - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### constructor9+ - -constructor(controller: WebController) - -WebAsyncController的创建需要与一个[WebController](../arkui-ts/ts-basic-components-web.md#webcontroller)进行绑定。 - -**系统能力：** SystemCapability.Web.Webview.Core - -**参数：** - -| 参数名| 类型 | 必填 | 说明 | -| ----- | ---- | ---- | --- | -| controller | [WebController](../arkui-ts/ts-basic-components-web.md#webcontroller) | 是 | 所绑定的WebviewController。| - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback\): void - -以回调方式异步保存当前页面。 - -**系统能力：** SystemCapability.Web.Webview.Core - -**参数：** - -| 参数名 | 类型 | 必填 | 说明 | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | 是 | 文件存储路径，该值不能为空。 -| autoName | boolean | 是 | 决定是否自动生成文件名。
如果为false，则将baseName作为文件存储路径。
如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。 -| callback | AsyncCallback\ | 是 | 返回文件存储路径，保持网页失败会返回null。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller) - webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean): Promise\ - -以Promise方式异步保存当前页面。 - -**系统能力：** SystemCapability.Web.Webview.Core - -**参数：** - -| 参数名 | 类型 | 必填 | 说明 | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | 是 | 文件存储路径，该值不能为空。 -| autoName | boolean | 是 | 决定是否自动生成文件名。
如果为false，则将baseName作为文件存储路径。
如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。 - -**返回值：** - -| 类型 | 说明 | -| ---------------------------------------- | ---------------------------------------- | -| Promise | Promise实例，保存成功返回文件路径，保存失败返回null。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController(); - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller); - webAsyncController.storeWebArchive("/data/storage/el2/base/", true) - .then(filename => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ## GeolocationPermissions web组件地理位置权限管理对象。 @@ -4845,7 +4719,6 @@ struct WebComponent { | historyRawUrl | string | 是 | 否 | 历史记录项的原始url地址。 | | title | string | 是 | 否 | 历史记录项的标题。 | - ## WebCustomScheme 自定义协议配置。 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 88a2104b26a7b57b2415ca460acbb865f01617b3..6d88aff8568c3a6a774c2f2af509676faecd8b49 100644 --- 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 @@ -2,7 +2,7 @@ 提供具有网页显示能力的Web组件。 -> **说明：** +> **说明：** > > - 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 示例效果请以真机运行为准，当前IDE预览器不支持。 @@ -745,36 +745,6 @@ userAgent(userAgent: string) } ``` -### webDebuggingAccess9+ - -webDebuggingAccess(webDebuggingAccess: boolean) - -设置是否启用网页调试功能。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------------------ | ------- | ---- | ----- | ------------- | -| webDebuggingAccess | boolean | 是 | false | 设置是否启用网页调试功能。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - @State webDebuggingAccess: boolean = true - build() { - Column() { - Web({ src: 'www.example.com', controller: this.controller }) - .webDebuggingAccess(this.webDebuggingAccess) - } - } - } - ``` - ### blockNetwork9+ blockNetwork(block: boolean) @@ -805,6 +775,7 @@ blockNetwork(block: boolean) } } ``` + ### defaultFixedFontSize9+ defaultFixedFontSize(size: number) @@ -1300,7 +1271,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1361,7 +1332,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1421,7 +1392,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1481,7 +1452,7 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1518,7 +1489,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1555,7 +1526,7 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1599,7 +1570,7 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1650,7 +1621,7 @@ onPageBegin(callback: (event?: { url: string }) => void) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1683,7 +1654,7 @@ onPageEnd(callback: (event?: { url: string }) => void) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1715,7 +1686,7 @@ onProgressChange(callback: (event?: { newProgress: number }) => void) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1747,7 +1718,7 @@ onTitleReceive(callback: (event?: { title: string }) => void) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1780,7 +1751,7 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1812,7 +1783,7 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'chrome://crash/', controller: this.controller }) @@ -1900,7 +1871,7 @@ onResourceLoad(callback: (event: {url: string}) => void) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1933,7 +1904,7 @@ onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -1971,7 +1942,7 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2079,7 +2050,7 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r struct WebComponent { controller: WebController = new WebController() httpAuth: boolean = false - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2140,7 +2111,7 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) @@ -2694,7 +2665,7 @@ onInterceptKeyEvent(callback: (event: KeyEvent) => boolean) Column() { Web({ src:'www.example.com', controller: this.controller }) .onInterceptKeyEvent((event) => { - if (event.keyCode == 2017 || event.keyCode == 2018) { + if (event.keyCode == 2017 || event.keyCode == 2018) { console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`) return true; } @@ -2783,7 +2754,7 @@ getLineNumber(): number 获取ConsoleMessage的行数。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | -------------------- | @@ -2795,7 +2766,7 @@ getMessage(): string 获取ConsoleMessage的日志信息。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ---------------------- | @@ -2807,7 +2778,7 @@ getMessageLevel(): MessageLevel 获取ConsoleMessage的信息级别。 -**返回值：** +**返回值：** | 类型 | 说明 | | --------------------------------- | ---------------------- | @@ -2819,7 +2790,7 @@ getSourceId(): string 获取网页源文件路径和名字。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ------------- | @@ -2889,7 +2860,7 @@ getErrorCode(): number 获取加载资源的错误码。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ----------- | @@ -2901,7 +2872,7 @@ getErrorInfo(): string 获取加载资源的错误信息。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ------------ | @@ -2917,7 +2888,7 @@ getResponseHeader() : Array\ 获取资源请求头信息。 -**返回值：** +**返回值：** | 类型 | 说明 | | -------------------------- | ---------- | @@ -2929,7 +2900,7 @@ getRequestUrl(): string 获取资源请求的URL信息。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ------------- | @@ -2941,7 +2912,7 @@ isMainFrame(): boolean 判断资源请求是否为主frame。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------- | ---------------- | @@ -2953,7 +2924,7 @@ isRedirect(): boolean 判断资源请求是否被服务端重定向。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------- | ---------------- | @@ -2965,7 +2936,7 @@ isRequestGesture(): boolean 获取资源请求是否与手势（如点击）相关联。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------- | -------------------- | @@ -2991,7 +2962,7 @@ getReasonMessage(): string 获取资源响应的状态码描述。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ------------- | @@ -3003,7 +2974,7 @@ getResponseCode(): number 获取资源响应的状态码。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ----------- | @@ -3015,7 +2986,7 @@ getResponseData(): string 获取资源响应数据。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | --------- | @@ -3027,7 +2998,7 @@ getResponseEncoding(): string 获取资源响应的编码。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ---------- | @@ -3039,7 +3010,7 @@ getResponseHeader() : Array\ 获取资源响应头。 -**返回值：** +**返回值：** | 类型 | 说明 | | -------------------------- | -------- | @@ -3051,7 +3022,7 @@ getResponseMimeType(): string 获取资源响应的媒体（MIME）类型。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------ | ------------------ | @@ -3161,25 +3132,13 @@ handleFileList(fileList: Array\): void web组件获取文件对象。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。 -### getTitle9+ - -getTitle(): string - -获取文件选择器标题。 - -**返回值：** - -| 类型 | 说明 | -| ------ | ---------- | -| string | 返回文件选择器标题。 | - ### getMode9+ getMode(): FileSelectorMode 获取文件选择器的模式。 -**返回值：** +**返回值：** | 类型 | 说明 | | ---------------------------------------- | ----------- | @@ -3191,7 +3150,7 @@ getAcceptType(): Array\ 获取文件过滤类型。 -**返回值：** +**返回值：** | 类型 | 说明 | | --------------- | --------- | @@ -3203,7 +3162,7 @@ isCapture(): boolean 获取是否调用多媒体能力。 -**返回值：** +**返回值：** | 类型 | 说明 | | ------- | ------------ | @@ -3339,7 +3298,7 @@ grant(resources: Array\): void | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | --------- | --------------- | ---- | ---- | ------------- | -| resources | Array\ | 是 | - | 网页所请求的权限资源列表。 | +| resources | Array\ | 是 | - | 授予网页请求的权限的资源列表。 | ## ContextMenuSourceType9+枚举说明 | 名称 | 描述 | @@ -3610,7 +3569,7 @@ requestFocus() @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('requestFocus') @@ -3645,7 +3604,7 @@ accessBackward(): boolean @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('accessBackward') @@ -3681,7 +3640,7 @@ accessForward(): boolean @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('accessForward') @@ -3724,7 +3683,7 @@ accessStep(step: number): boolean struct WebComponent { controller: WebController = new WebController() @State steps: number = 2 - + build() { Column() { Button('accessStep') @@ -3754,7 +3713,7 @@ backward(): void @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('backward') @@ -3783,7 +3742,7 @@ forward(): void @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('forward') @@ -3796,40 +3755,6 @@ forward(): void } ``` -### backOrForward9+ - -backOrForward(step: number): void - -按照历史栈，前进或者后退指定步长的页面，当历史栈中不存在对应步长的页面时，不会进行页面跳转。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ---- | ------ | ---- | ---- | ----------- | -| step | number | 是 | - | 需要前进或后退的步长。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - @State step: number = -2 - - build() { - Column() { - Button('backOrForward') - .onClick(() => { - this.controller.backOrForward(this.step) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### deleteJavaScriptRegister(deprecated) deleteJavaScriptRegister(name: string) @@ -3853,7 +3778,7 @@ deleteJavaScriptRegister(name: string) struct WebComponent { controller: WebController = new WebController() @State name: string = 'Object' - + build() { Column() { Button('deleteJavaScriptRegister') @@ -3870,7 +3795,7 @@ deleteJavaScriptRegister(name: string) getHitTest(): HitTestType -获取当前被点击区域的元素类型。 +获取当前被点击区域的元素类型。 从API version 9开始不再维护，建议使用[getHitTest9+](../apis/js-apis-webview.md#gethittest)代替。 @@ -3888,7 +3813,7 @@ getHitTest(): HitTestType @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('getHitTest') @@ -3902,73 +3827,6 @@ getHitTest(): HitTestType } ``` -### getHitTestValue9+ -getHitTestValue(): HitTestValue - -获取当前被点击区域的元素信息。 - -**返回值：** - -| 类型 | 说明 | -| ------------------------------ | ---------- | -| [HitTestValue](#hittestvalue9) | 点击区域的元素信息。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getHitTestValue') - .onClick(() => { - let hitValue = this.controller.getHitTestValue() - console.log("hitType: " + hitValue.getType()) - console.log("extra: " + hitValue.getExtra()) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getWebId9+ -getWebId(): number - -获取当前Web组件的索引值，用于多个Web组件的管理。 - -**返回值：** - -| 类型 | 说明 | -| ------ | ------------ | -| number | 当前Web组件的索引值。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getWebId') - .onClick(() => { - let id = this.controller.getWebId() - console.log("id: " + id) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### getTitle9+ getTitle(): string @@ -3988,7 +3846,7 @@ getTitle(): string @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('getTitle') @@ -4002,72 +3860,6 @@ getTitle(): string } ``` -### getPageHeight9+ -getPageHeight(): number - -获取当前网页的页面高度。 - -**返回值：** - -| 类型 | 说明 | -| ------ | ---------- | -| number | 当前网页的页面高度。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getPageHeight') - .onClick(() => { - let pageHeight = this.controller.getPageHeight() - console.log("pageHeight: " + pageHeight) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getDefaultUserAgent9+ -getDefaultUserAgent(): string - -获取当前默认用户代理。 - -**返回值：** - -| 类型 | 说明 | -| ------ | ------- | -| string | 默认用户代理。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getDefaultUserAgent') - .onClick(() => { - let userAgent = this.controller.getDefaultUserAgent() - console.log("userAgent: " + userAgent) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### loadData(deprecated) loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }) @@ -4098,7 +3890,7 @@ baseUrl为空时，通过”data“协议加载指定的一段字符串。 @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('loadData') @@ -4142,7 +3934,7 @@ loadUrl(options: { url: string | Resource, headers?: Array\ }) @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('loadUrl') @@ -4171,7 +3963,7 @@ onActive(): void @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('onActive') @@ -4200,7 +3992,7 @@ onInactive(): void @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('onInactive') @@ -4235,7 +4027,7 @@ zoom(factor: number): void struct WebComponent { controller: WebController = new WebController() @State factor: number = 1 - + build() { Column() { Button('zoom') @@ -4248,72 +4040,6 @@ zoom(factor: number): void } ``` -### zoomIn9+ -zoomIn(): boolean - -调用此接口将当前网页进行放大，比例为20%。 - -**返回值：** - -| 类型 | 说明 | -| ------- | ----------- | -| boolean | 放大操作是否成功执行。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('zoomIn') - .onClick(() => { - let result = this.controller.zoomIn() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### zoomOut9+ -zoomOut(): boolean - -调用此接口将当前网页进行缩小，比例为20%。 - -**返回值：** - -| 类型 | 说明 | -| ------- | ----------- | -| boolean | 缩小操作是否成功执行。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('zoomOut') - .onClick(() => { - let result = this.controller.zoomOut() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ### refresh(deprecated) refresh() @@ -4330,7 +4056,7 @@ refresh() @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('refresh') @@ -4408,7 +4134,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr } - + ``` ### runJavaScript(deprecated) @@ -4488,7 +4214,7 @@ stop() @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { Button('stop') @@ -4517,777 +4243,12 @@ clearHistory(): void @Component struct WebComponent { controller: WebController = new WebController() - - build() { - Column() { - Button('clearHistory') - .onClick(() => { - this.controller.clearHistory() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### clearSslCache - -clearSslCache(): void - -清除Web组件记录的SSL证书错误事件对应的用户操作行为。 - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('clearSslCache') - .onClick(() => { - this.controller.clearSslCache() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### clearClientAuthenticationCache - -clearClientAuthenticationCache(): void - -清除Web组件记录的客户端证书请求事件对应的用户操作行为。 - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('clearClientAuthenticationCache') - .onClick(() => { - this.controller.clearClientAuthenticationCache() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getCookieManager9+ - -getCookieManager(): WebCookie - -获取web组件cookie管理对象。 - -**返回值：** - -| 类型 | 说明 | -| --------- | ---------------------------------------- | -| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getCookieManager') - .onClick(() => { - let cookieManager = this.controller.getCookieManager() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### createWebMessagePorts9+ - -createWebMessagePorts(): Array\ - -创建Web消息端口。 - -**返回值：** - - -| 类型 | 说明 | -| ---------------------------------------- | ---------- | -| Array\<[WebMessagePort](#webmessageport9)\> | web消息端口列表。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - build() { - Column() { - Button('createWebMessagePorts') - .onClick(() => { - this.ports = this.controller.createWebMessagePorts() - console.log("createWebMessagePorts size:" + this.ports.length) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### postMessage9+ - -postMessage(options: { message: WebMessageEvent, uri: string}): void - -发送Web消息端口到HTML5。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------- | ------------------------------------ | ---- | ---- | ----------------- | -| message | [WebMessageEvent](#webmessageevent9) | 是 | - | 要发送的消息，包含数据和消息端口。 | -| uri | string | 是 | - | 接收该消息的URI。 | - -**示例：** - - ```ts - // index.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - @State sendFromEts: string = 'Send this message from ets to HTML' - @State receivedFromHtml: string = 'Display received message send from HTML' - - build() { - Column() { - // 展示接收到的来自HTML的内容 - Text(this.receivedFromHtml) - // 输入框的内容发送到HTML - TextInput({placeholder: 'Send this message from ets to HTML'}) - .onChange((value: string) => { - this.sendFromEts = value - }) - - // 1、创建两个消息端口 - Button('1.CreateWebMessagePorts') - .onClick(() => { - this.ports = this.controller.createWebMessagePorts() - console.log("createWebMessagePorts size:" + this.ports.length) - }) - - // 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。 - Button('2.PostMessagePort') - .onClick(() => { - var sendPortArray = new Array(this.ports[1]) - var msgEvent = new WebMessageEvent() - msgEvent.setData("__init_port__") - msgEvent.setPorts(sendPortArray) - this.controller.postMessage({message: msgEvent, uri: "*"}) - }) - - // 3、另一个消息端口在应用侧注册回调事件。 - Button('3.RegisterCallback') - .onClick(() => { - this.ports[0].onMessageEvent((result: string) => { - var msg = 'Got msg from HTML: ' + result - this.receivedFromHtml = msg - }) - }) - - // 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。 - Button('4.SendDataToHtml5') - .onClick(() => { - var msg = new WebMessageEvent() - msg.setData(this.sendFromEts) - this.ports[0].postMessageEvent(msg) - }) - Web({ src: $rawfile("index.html"), controller: this.controller }) - .javaScriptAccess(true) - .fileAccess(true) - } - } - } - - // index.html - - - -

Web Message Port Demo

-
-
-
-
-

display received message send from ets

- - - - - // index.js - var h5Port; - var output = document.querySelector('.output'); - window.addEventListener('message', function(event) { - if (event.data == '__init_port__') { - if(event.ports[0] != null) { - h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 - h5Port.onmessage = function(event) { - // 2. 接收ets侧发送过来的消息. - var msg = 'Got message from ets:' + event.data; - output.innerHTML = msg; - } - } - } - }) - - // 3. 使用h5Port往ets侧发送消息. - function PostMsgToEts(data) { - h5Port.postMessage(data) - } - ``` - -### getUrl9+ - -getUrl(): string - -获取当前页面的url地址。 - -**返回值：** - -| 类型 | 说明 | -| ------ | ----------- | -| string | 当前页面的url地址。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Button('getUrl') - .onClick(() => { - console.log("url: " + this.controller.getUrl()) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### searchAllAsync9+ - -searchAllAsync(searchString: string): void - -异步查找网页中所有匹配关键字'searchString'的内容并高亮，结果通过[onSearchResultReceive](#onsearchresultreceive9)异步返回。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------------ | ------ | ---- | ---- | ------- | -| searchString | string | 是 | - | 查找的关键字。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - @State searchString: string = "xxx" - - build() { - Column() { - Button('searchString') - .onClick(() => { - this.controller.searchAllAsync(this.searchString) - }) - Button('clearMatches') - .onClick(() => { - this.controller.clearMatches() - }) - Button('searchNext') - .onClick(() => { - this.controller.searchNext(true) - }) - Web({ src: 'www.example.com', controller: this.controller }) - .onSearchResultReceive(ret => { - console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + - "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting) - }) - } - } - } - ``` - -### clearMatches9+ - -clearMatches(): void - -清除所有通过[searchAllAsync](#searchallasync9)匹配到的高亮字符查找结果。 - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('clearMatches') - .onClick(() => { - this.controller.clearMatches() - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### searchNext9+ - -searchNext(forward: boolean): void - -滚动到下一个匹配的查找结果并高亮。 - -**参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------- | ------- | ---- | ---- | ----------- | -| forward | boolean | 是 | - | 从前向后或者逆向查找。 | - - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('searchNext') - .onClick(() => { - this.controller.searchNext(true) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -## HitTestValue9+ -提供点击区域的元素信息。示例代码参考[getHitTestValue](#gethittestvalue9)。 - -### getType9+ -getType(): HitTestType - -获取当前被点击区域的元素类型。 - -**返回值：** - -| 类型 | 说明 | -| ------------------------------- | ------------- | -| [HitTestType](#hittesttype枚举说明) | 当前被点击区域的元素类型。 | - -### getExtra9+ -getExtra(): string - -若被点击区域为图片或链接，则附加参数信息为其url地址。 - -**返回值：** - -| 类型 | 说明 | -| ------ | ------------ | -| string | 点击区域的附加参数信息。 | - - -## WebCookie - -通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。 - -### setCookie9+ -setCookie(url: string, value: string): boolean - -设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | ------ | ---- | ---- | ----------------- | -| url | string | 是 | - | 要设置的cookie所属的url。 | -| value | string | 是 | - | cookie的值。 | - -**返回值：** - -| 类型 | 说明 | -| ------- | ------------- | -| boolean | 设置cookie是否成功。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('setCookie') - .onClick(() => { - let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b") - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### getCookie9+ -getCookie(url: string): string - -获取指定url对应cookie的值。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ---- | ------ | ---- | ---- | ----------------- | -| url | string | 是 | - | 要获取的cookie所属的url。 | - -**返回值：** - -| 类型 | 说明 | -| ------ | ----------------- | -| string | 指定url对应的cookie的值。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('getCookie') - .onClick(() => { - let value = web_webview.WebCookieManager.getCookie('www.example.com') - console.log("value: " + value) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### setCookie9+ -setCookie(url: string, value: string): boolean - -为指定url设置单个cookie的值。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | ------ | ---- | ---- | ----------------- | -| url | string | 是 | - | 要设置的cookie所属的url。 | -| value | string | 是 | - | 要设置的cookie的值。 | - -**返回值：** - -| 类型 | 说明 | -| ------- | ------------- | -| boolean | 设置cookie是否成功。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('setCookie') - .onClick(() => { - let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b') - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### saveCookieSync9+ -saveCookieSync(): boolean - -将当前存在内存中的cookie保存到磁盘中，该方法为同步方法。 - -**返回值：** - -| 类型 | 说明 | -| ------- | -------------------- | -| boolean | 同步内存cookie到磁盘操作是否成功。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('saveCookieSync') - .onClick(() => { - let result = web_webview.WebCookieManager.saveCookieSync() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### saveCookieAsync9+ -saveCookieAsync(): Promise\ - -将当前存在内存中的cookie以Promise方法异步保存到磁盘中。 - -**返回值：** - -| 类型 | 说明 | -| ----------------- | --------------------------- | -| Promise\ | Promise实例，用于获取cookie是否成功保存。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('saveCookieAsync') - .onClick(() => { - web_webview.WebCookieManager.saveCookieAsync() - .then (function(result) { - console.log("result: " + result) - }) - .catch(function(error) { - console.error("error: " + error) - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### saveCookieAsync9+ -saveCookieAsync(callback: AsyncCallback\): void - -将当前存在内存中的cookie异步保存到磁盘中。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | ----------------------- | ---- | ---- | ---------------------------- | -| callback | AsyncCallback\ | 是 | - | 返回cookie是否成功保存的布尔值作为回调函数的入参。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('saveCookieAsync') - .onClick(() => { - web_webview.WebCookieManager.saveCookieAsync(function(result) { - console.log("result: " + result) - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### isCookieAllowed9+ -isCookieAllowed(): boolean - -获取WebCookieManager实例是否拥有发送和接收cookie的权限。 - -**返回值：** - -| 类型 | 说明 | -| ------- | ------------------- | -| boolean | 是否拥有发送和接收cookie的权限。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('isCookieAllowed') - .onClick(() => { - let result = web_webview.WebCookieManager.isCookieAllowed() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### putAcceptCookieEnabled9+ -putAcceptCookieEnabled(accept: boolean): void - -设置WebCookieManager实例是否拥有发送和接收cookie的权限。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | ------- | ---- | ---- | --------------------- | -| accept | boolean | 是 | - | 设置是否拥有发送和接收cookie的权限。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('putAcceptCookieEnabled') - .onClick(() => { - web_webview.WebCookieManager.putAcceptCookieEnabled(false) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### isThirdPartyCookieAllowed9+ -isThirdCookieAllowed(): boolean - -获取WebCookieManager实例是否拥有发送和接收第三方cookie的权限。 - -**返回值：** - -| 类型 | 说明 | -| ------- | ---------------------- | -| boolean | 是否拥有发送和接收第三方cookie的权限。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - - build() { - Column() { - Button('isThirdPartyCookieAllowed') - .onClick(() => { - let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed() - console.log("result: " + result) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### putAcceptThirdPartyCookieEnabled9+ -putAcceptThirdPartyCookieEnabled(accept: boolean): void - -设置WebCookieManager实例是否拥有发送和接收第三方cookie的权限。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------ | ------- | ---- | ---- | ------------------------ | -| accept | boolean | 是 | - | 设置是否拥有发送和接收第三方cookie的权限。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { Column() { - Button('putAcceptThirdPartyCookieEnabled') + Button('clearHistory') .onClick(() => { - web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false) + this.controller.clearHistory() }) Web({ src: 'www.example.com', controller: this.controller }) } @@ -5295,33 +4256,32 @@ putAcceptThirdPartyCookieEnabled(accept: boolean): void } ``` -### existCookie9+ -existCookie(): boolean +### getCookieManager9+ + +getCookieManager(): WebCookie -获取是否存在cookie。 +获取web组件cookie管理对象。 **返回值：** -| 类型 | 说明 | -| ------- | ----------- | -| boolean | 是否存在cookie。 | +| 类型 | 说明 | +| --------- | ---------------------------------------- | +| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 | **示例：** ```ts // xxx.ets - import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { - Button('existCookie') + Button('getCookieManager') .onClick(() => { - let result = web_webview.WebCookieManager.existCookie() - console.log("result: " + result) + let cookieManager = this.controller.getCookieManager() }) Web({ src: 'www.example.com', controller: this.controller }) } @@ -5329,53 +4289,75 @@ existCookie(): boolean } ``` -### deleteEntireCookie9+ -deleteEntireCookie(): void +## WebCookie + +通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。 + +### setCookie9+ +setCookie(url: string, value: string): boolean + +设置cookie，该方法为同步方法。设置成功返回true，否则返回false。 + +**参数：** -清除所有cookie。 +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----- | ------ | ---- | ---- | ----------------- | +| url | string | 是 | - | 要设置的cookie所属的url。 | +| value | string | 是 | - | cookie的值。 | + +**返回值：** + +| 类型 | 说明 | +| ------- | ------------- | +| boolean | 设置cookie是否成功。 | **示例：** ```ts // xxx.ets - import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { - Button('deleteEntireCookie') + Button('setCookie') .onClick(() => { - web_webview.WebCookieManager.deleteEntireCookie() + let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b") + console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller }) } } } ``` +### saveCookieSync9+ +saveCookieSync(): boolean + +将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。 -### deleteSessionCookie9+ -deleteSessionCookie(): void +**返回值：** -清除所有会话cookie。 +| 类型 | 说明 | +| ------- | -------------------- | +| boolean | 同步内存cookie到磁盘操作是否成功。 | **示例：** ```ts // xxx.ets - import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: WebController = new WebController() - + build() { Column() { - Button('deleteSessionCookie') + Button('saveCookieSync') .onClick(() => { - web_webview.WebCookieManager.deleteSessionCookie() + let result = this.controller.getCookieManager().saveCookieSync() + console.log("result: " + result) }) Web({ src: 'www.example.com', controller: this.controller }) } @@ -5466,324 +4448,6 @@ onSslErrorEventReceive接口返回的SSL错误的具体原因。 | On | Web深色模式开启。 | | Auto | Web深色模式跟随系统。 | -## WebAsyncController - -通过WebAsyncController可以控制Web组件具有异步回调通知的行为，一个WebAsyncController对象控制一个Web组件。 - -### 创建对象 - -``` -webController: WebController = new WebController(); -webAsyncController: WebAsyncController = new WebAsyncController(webController); -``` - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback): void - -以回调方式异步保存当前页面。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 说明 | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | 是 | 文件存储路径，该值不能为空。 -| autoName | boolean | 是 | 决定是否自动生成文件名。
如果为false，则将baseName作为文件存储路径。
如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。 -| callback | AsyncCallback | 是 | 返回文件存储路径，保持网页失败会返回null。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller) - webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### storeWebArchive9+ - -storeWebArchive(baseName: string, autoName: boolean): Promise - -以Promise方式异步保存当前页面。 - -**参数：** - -| 参数名 | 参数类型 | 必填 | 说明 | -| -------- | ---------------------------------------- | ---- | ----------------------------------- | -| baseName | string | 是 | 文件存储路径，该值不能为空。 -| autoName | boolean | 是 | 决定是否自动生成文件名。
如果为false，则将baseName作为文件存储路径。
如果为true，则假定baseName是一个目录，将根据当前页的Url自动生成文件名。 - -**返回值：** - -| 类型 | 说明 | -| --------------- | -------------------------------- | -| Promise | Promise实例，保存成功返回文件路径，保存失败返回null。 | - -**示例：** - - ```ts - // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController(); - build() { - Column() { - Button('saveWebArchive') - .onClick(() => { - let webAsyncController = new web_webview.WebAsyncController(this.controller); - webAsyncController.storeWebArchive("/data/storage/el2/base/", true) - .then(filename => { - if (filename != null) { - console.info(`save web archive success: ${filename}`) - } - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -## WebMessagePort9+ - -通过WebMessagePort可以进行消息的发送以及接收。 - -### close9+ -close(): void - -关闭该消息端口。 - -### postMessageEvent9+ -postMessageEvent(message: WebMessageEvent): void - -发送消息。完整示例代码参考[postMessage](#postmessage9) - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------- | ------------------------------------ | ---- | ---- | ------- | -| message | [WebMessageEvent](#webmessageevent9) | 是 | - | 要发送的消息。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('postMessageEvent') - .onClick(() => { - var msg = new WebMessageEvent() - msg.setData("post message from ets to html5") - this.ports[0].postMessageEvent(msg) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - -### onMessageEvent9+ -onMessageEvent(callback: (result: string) => void): void - -注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage9) - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | -------- | ---- | ---- | ---------- | -| callback | function | 是 | - | 接收消息的回调函数。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('onMessageEvent') - .onClick(() => { - this.ports[0].onMessageEvent((result: string) => { - console.log("received message from html5, on message:" + result); - }) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - - -## WebMessageEvent9+ - -通过WebMessagePort对要发送的消息和端口进行封装。 - -### getData9+ -getData(): string - -获取当前对象中存放的消息。 - -**返回值：** - -| 类型 | 说明 | -| ------ | -------------- | -| string | 当前该类型对象中存放的消息。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - build() { - Column() { - Button('getPorts') - .onClick(() => { - var msgEvent = new WebMessageEvent(); - msgEvent.setData("message event data") - var messageData = msgEvent.getData() - console.log("message is:" + messageData) - }) - } - } - } - ``` - -### setData9+ -setData(data: string): void - -设置当前对象中的消息。完整示例代码参考[postMessage](#postmessage9) - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ---- | ------ | ---- | ---- | ------- | -| data | string | 是 | - | 要发送的消息。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('setData') - .onClick(() => { - var msg = new WebMessageEvent() - msg.setData("post message from ets to HTML5") - this.ports[0].postMessageEvent(msg) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` -### getPorts9+ -getPorts(): Array\ - -获取当前对象中存放的消息端口。 - -**返回值：** - -| 类型 | 说明 | -| ---------------------------------------- | ---------------- | -| Array\<[WebMessagePort](#webmessageport9)\> | 当前该类型对象中存放的消息端口。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - ports: WebMessagePort[] = null - build() { - Column() { - Button('getPorts') - .onClick(() => { - var sendPortArray = new Array(this.ports[0]) - var msgEvent = new WebMessageEvent() - msgEvent.setPorts(sendPortArray) - var getPorts = msgEvent.getPorts() - console.log("Ports is:" + getPorts) - }) - } - } - } - ``` - -### setPorts9+ -setPorts(ports: Array\): void - -设置当前对象中的消息端口。完整示例代码参考[postMessage](#postmessage9) - -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | ---------------------------------------- | ---- | ---- | --------- | -| ports | Array\<[WebMessagePort](#webmessageport9)\> | 是 | - | 要发送的消息端口。 | - -**示例：** - - ```ts - // xxx.ets - @Entry - @Component - struct WebComponent { - controller: WebController = new WebController() - ports: WebMessagePort[] = null - - build() { - Column() { - Button('setPorts') - .onClick(() => { - var sendPortArray = new Array(this.ports[1]) - var msgEvent = new WebMessageEvent() - msgEvent.setData("__init_ports__") - msgEvent.setPorts(sendPortArray) - this.controller.postMessage({message: msgEvent, uri: "*"}) - }) - Web({ src: 'www.example.com', controller: this.controller }) - } - } - } - ``` - ## DataResubmissionHandler9+ 通过DataResubmissionHandler可以重新提交表单数据或取消提交表单数据。 diff --git a/zh-cn/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md b/zh-cn/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md index 3aec00351eea402376251d19f99d695278f6a8ea..1fd92a86421021c0ac26639f04c56c4e5c0f01f6 100644 --- a/zh-cn/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md +++ b/zh-cn/release-notes/changelogs/OpenHarmony_3.2.10.7/changelog-web.md @@ -180,4 +180,288 @@ getHitTest接口，在3.2.10.7版本及后续版本中无法继续正常使用 **适配指导** -在使用getHitTest接口的返回值时，请使用WebHitTestType类型替换HitTestTypeV9类型。 \ No newline at end of file +在使用getHitTest接口的返回值时，请使用WebHitTestType类型替换HitTestTypeV9类型。 + +## cl.web.6 WebMessagePort类迁移 + +WebMessagePort类迁移至@ohos.web.webview.d.ts,并新增错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。现该类下接口支持错误码处理，需注意错误码处理的使用。 + +**关键的接口/组件变更** + +- 涉及接口 + + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + +- 变更前： + + ```ts + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + ``` + +- 变更后： + + ```ts + postMessageEvent(message: WebMessage): void; + onMessageEvent(callback: (result: WebMessage) => void): void; + ``` + +**适配指导** + +原WebMessagePort类不需要import，现WebMessagePort类使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.7 HitTestValue类迁移 + +HitTestValue类迁移至@ohos.web.webview.d.ts，HitTestValue类变更为接口，getType，getExtra变更为属性。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。 + +**关键的接口/组件变更** + +- 涉及接口 + + getType(): HitTestType; + getExtra(): string; + +- 变更前： + + ```ts + getType(): HitTestType; + getExtra(): string; + ``` + +- 变更后： + + ```ts + type: WebHitTestType; + extra: string; + ``` + +**适配指导** + +原HitTestValue类不需要import，现HitTestValue类使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.8 WebCookie类下api9接口迁移 + +WebCookie类下api9接口迁移，WebCookie类下api9接口迁移到web.webview.webview.WebCookieManager。 +并新增接口错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。现该类下接口支持错误码处理，需注意错误码处理的使用。 +该类方法变为静态方法。 + +**关键的接口/组件变更** + +- 涉及接口 + + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + +- 变更前： + + ```ts + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + ``` + +- 变更后： + + ```ts + static isCookieAllowed(): boolean; + static isThirdPartyCookieAllowed(): boolean; + static putAcceptCookieEnabled(accept: boolean): void; + static putAcceptThirdPartyCookieEnabled(accept: boolean): void; + static setCookie(url: string, value: string): void; + static saveCookieAsync(): Promise; + static saveCookieAsync(callback: AsyncCallback): void; + static getCookie(url: string): string; + static existCookie(): boolean; + static deleteEntireCookie(): void; + static deleteSessionCookie(): void; + ``` + +**适配指导** + +原WebCookie类不需要import，现WebCookieManager使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.9 WebController类下api9接口迁移 + +WebController类下api9接口迁移至web.webview.webview.WebviewController，并新增接口错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。现该类下接口支持错误码处理，需注意错误码处理的使用。 +getDefaultUserAgent接口更名为getUserAgent。 + +**关键的接口/组件变更** + +- 涉及接口 + + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + +- 变更前： + + ```ts + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +- 变更后： + + ```ts + zoomIn(): void; + zoomOut(): void; + createWebMessagePorts(): Array; + postMessage(name: string, ports: Array, uri: string): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +**适配指导** + +原WebController类不需要import，现WebviewController类使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.10 WebAsyncController类迁移 + +WebAsyncController类下接口迁移至web.webview.webview.WebviewController，并新增接口错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意错误码处理的使用。 + +**关键的接口/组件变更** + +- 涉及接口 + + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + +- 变更前： + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +- 变更后： + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +**适配指导** + +使用示例： + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('saveWebArchive') + .onClick(() => { + try { + this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => { + if (error) { + console.info(`save web archive error: ` + JSON.stringify(error)) + return; + } + if (filename != null) { + console.info(`save web archive success: ${filename}`) + } + }); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` \ No newline at end of file diff --git a/zh-cn/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md b/zh-cn/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md index 301dded59aa8e6aafb56018ed7dcff70aeafd5ae..da9847a3b5714e651af224b91279012e863f6a24 100644 --- a/zh-cn/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md +++ b/zh-cn/release-notes/changelogs/OpenHarmony_4.0.3.2/changelog-web.md @@ -180,4 +180,288 @@ getHitTest接口，在4.0.3.2版本及后续版本中无法继续正常使用。 **适配指导** -在使用getHitTest接口的返回值时，请使用WebHitTestType类型替换HitTestTypeV9类型。 \ No newline at end of file +在使用getHitTest接口的返回值时，请使用WebHitTestType类型替换HitTestTypeV9类型。 + +## cl.web.6 WebMessagePort类迁移 + +WebMessagePort类迁移至@ohos.web.webview.d.ts,并新增错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。现该类下接口支持错误码处理，需注意错误码处理的使用。 + +**关键的接口/组件变更** + +- 涉及接口 + + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + +- 变更前： + + ```ts + postMessageEvent(message: WebMessageEvent): void; + onMessageEvent(callback: (result: string) => void): void; + ``` + +- 变更后： + + ```ts + postMessageEvent(message: WebMessage): void; + onMessageEvent(callback: (result: WebMessage) => void): void; + ``` + +**适配指导** + +原WebMessagePort类不需要import，现WebMessagePort类使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.7 HitTestValue类迁移 + +HitTestValue类迁移至@ohos.web.webview.d.ts，HitTestValue类变更为接口，getType，getExtra变更为属性。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。 + +**关键的接口/组件变更** + +- 涉及接口 + + getType(): HitTestType; + getExtra(): string; + +- 变更前： + + ```ts + getType(): HitTestType; + getExtra(): string; + ``` + +- 变更后： + + ```ts + type: WebHitTestType; + extra: string; + ``` + +**适配指导** + +原HitTestValue类不需要import，现HitTestValue类使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.8 WebCookie类下api9接口迁移 + +WebCookie类下api9接口迁移，WebCookie类下api9接口迁移到web.webview.webview.WebCookieManager。 +并新增接口错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。现该类下接口支持错误码处理，需注意错误码处理的使用。 +该类方法变为静态方法。 + +**关键的接口/组件变更** + +- 涉及接口 + + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + +- 变更前： + + ```ts + isCookieAllowed(): boolean; + isThirdPartyCookieAllowed(): boolean; + putAcceptCookieEnabled(accept: boolean): void; + putAcceptThirdPartyCookieEnabled(accept: boolean): void; + setCookie(url: string, value: string): boolean; + saveCookieSync(): boolean; + getCookie(url: string): string; + existCookie(): boolean; + deleteEntireCookie(): void; + deleteSessionCookie(): void; + ``` + +- 变更后： + + ```ts + static isCookieAllowed(): boolean; + static isThirdPartyCookieAllowed(): boolean; + static putAcceptCookieEnabled(accept: boolean): void; + static putAcceptThirdPartyCookieEnabled(accept: boolean): void; + static setCookie(url: string, value: string): void; + static saveCookieAsync(): Promise; + static saveCookieAsync(callback: AsyncCallback): void; + static getCookie(url: string): string; + static existCookie(): boolean; + static deleteEntireCookie(): void; + static deleteSessionCookie(): void; + ``` + +**适配指导** + +原WebCookie类不需要import，现WebCookieManager使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.9 WebController类下api9接口迁移 + +WebController类下api9接口迁移至web.webview.webview.WebviewController，并新增接口错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意d.ts位置的变更及import模块名的变更。现该类下接口支持错误码处理，需注意错误码处理的使用。 +getDefaultUserAgent接口更名为getUserAgent。 + +**关键的接口/组件变更** + +- 涉及接口 + + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + +- 变更前： + + ```ts + zoomIn(): boolean; + zoomOut(): boolean; + createWebMessagePorts(): Array; + postMessage(options: { message: WebMessageEvent, uri: string}): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getDefaultUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +- 变更后： + + ```ts + zoomIn(): void; + zoomOut(): void; + createWebMessagePorts(): Array; + postMessage(name: string, ports: Array, uri: string): void; + getHitTestValue(): HitTestValue; + getWebId(): number; + getUserAgent(): string; + getTitle(): string; + getPageHeight(): number; + backOrForward(step: number): void; + searchAllAsync(searchString: string): void; + clearMatches(): void; + searchNext(forward: boolean): void; + clearSslCache(): void; + clearClientAuthenticationCache(): void; + getUrl(): string; + ``` + +**适配指导** + +原WebController类不需要import，现WebviewController类使用的是@ohos.web.webview，以下方式import: + + ```ts + import web_webview from '@ohos.web.webview'; + ``` + +## cl.web.10 WebAsyncController类迁移 + +WebAsyncController类下接口迁移至web.webview.webview.WebviewController，并新增接口错误码抛出。 + +**变更影响** + +基于此前版本开发的应用，需注意错误码处理的使用。 + +**关键的接口/组件变更** + +- 涉及接口 + + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + +- 变更前： + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +- 变更后： + + ```ts + storeWebArchive(baseName: string, autoName: boolean): Promise; + storeWebArchive(baseName: string, autoName: boolean, callback : AsyncCallback): void; + ``` + +**适配指导** + +使用示例： + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('saveWebArchive') + .onClick(() => { + try { + this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => { + if (error) { + console.info(`save web archive error: ` + JSON.stringify(error)) + return; + } + if (filename != null) { + console.info(`save web archive success: ${filename}`) + } + }); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` \ No newline at end of file