From 70703d8418fe037f7ab0c45d71f66d1e6f3562a6 Mon Sep 17 00:00:00 2001 From: liwenzhen Date: Sat, 19 Mar 2022 13:46:51 +0800 Subject: [PATCH] modify web reference Signed-off-by: liwenzhen Change-Id: I5d87ebfba10fa6805d859681122530698ccd0868 --- .../arkui-js/js-components-basic-web.md | 5 +- .../arkui-ts/ts-basic-components-web.md | 218 +++++++++--------- 2 files changed, 114 insertions(+), 109 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md index a3f596d3f5..e74ae199ab 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md @@ -3,11 +3,8 @@ >![](../../public_sys-resources/icon-note.gif) **说明：** > 该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 -ohos.permission.INTERNET - ## 约束 -web组件不跟随转场动画。一个页面仅支持一个web组件。不支持预览。 +web组件不跟随转场动画。一个页面仅支持一个web组件。 ## 子组件 不支持。 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 613eba1330..8de0f521c6 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 @@ -5,12 +5,6 @@ 提供具有网页显示能力的Web组件。 -## 权限列表 - -ohos.permission.INTERNET - -ohos.permission.READ_USER_STORAGE - ## 子组件 无 @@ -37,9 +31,9 @@ ohos.permission.READ_USER_STORAGE | 名称 | 参数类型 | 默认值 | 描述 | | ----------------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ | | domStorageAccess | boolean | false | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 | -| fileAccess | boolean | true | 设置是否开启通过$rawfile(filepath/filename)访问应用中rawfile路径的文件， 默认启用。 | +| fileAccess | boolean | true | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 | | imageAccess | boolean | true | 设置是否允许自动加载图片资源，默认允许。 | -| javaScriptProxy | {
object: object,
name: string,
methodList: Array\,
controller: WebController
} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象及其方法。所有参数不支持更新。
object: 参与注册的对象。只能声明方法，不能声明属性
name: 参与注册对象的名称，与JS中调用的对象名一致。
methodList: 参与注册的对象中的方法列表。
controller: 控制器。 | +| javaScriptProxy | {
object: object,
name: string,
methodList: Array\,
controller: WebController
} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。
object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。
name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodList: 参与注册的应用侧JavaScript对象的方法。
controller: 控制器。 | | javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 | | mixedMode | [MixedMode](#MixedMode) | MixedMode.None | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 | | onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 | @@ -50,40 +44,40 @@ ohos.permission.READ_USER_STORAGE > 通用属性仅支持[width](ts-universal-attributes-size.md#属性)、[height](ts-universal-attributes-size.md#属性)、[padding](ts-universal-attributes-size.md#属性)、[margin](ts-universal-attributes-size.md#属性)、[border](ts-universal-attributes-border.md#属性)。 - MixedMode枚举说明 - | 名称 | 描述 | - | ---------- | ------------------------------------------------------------ | - | All | 允许加载HTTP和HTTPS混合内容。 | - | Compatible | 混合内容兼容性模式，一些不安全的内容可能被安全来源加载，其他类型的内容将被阻止。 | - | None | HTTP和HTTPS混合内容，不加载HTTP的资源。 | + | 名称 | 描述 | + | ---------- | ----------------------------------------------------------- | + | All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 | + | Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 | + | None | 不允许加载HTTP和HTTPS混合内容。 | ## 事件 -通用事件仅支持[onFocus](ts-universal-focus-event.md#事件)。 +不支持通用事件。 | 名称 | 功能描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) |

网页触发alert()告警弹窗时触发。
url：当前显示的对话框所在的网页。
message：对话框中显示的信息。
JsResult：根据用户的操作确认或取消对话框。

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

即将离开当前页面（刷新或关闭）时触发。
url：Web组件返回的下载URL。
message：Web组件返回的信息。
JsResult：Web组件返回的弹窗确认或弹窗取消功能对象。

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

网页触发confirm()确认弹窗时触发。
url：Web组件返回的下载URL。
message：Web组件返回的信息。
JsResult：Web组件返回的弹窗确认或弹窗取消功能对象。

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

向主应用报告JavaScript控制台消息时触发该回调。
message：触发的控制台信息。

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

下载开始时触发该回调。
url：Web组件返回的下载URL。
userAgent：Web组件返回的用户代理名称。
contentDisposition：Web组件返回的响应头。
mimetype：Web组件返回的媒体类型（MIME）信息。
contentLength：Web组件返回的内容长度。

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

网页加载错误时触发该回调。
request：网页的请求信息。
error：网页的错误信息 。

| -| onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void) |

网页加载出现网络错误时触发该回调。
request：网页的请求信息。
response：网页的响应信息

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

网页加载时触发该回调。
url：Web组件返回的URL。

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

网页加载结束时触发该回调。
url：Web组件返回的URL。

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

网页加载进度变化时触发该回调。
newProgress：加载进度，取值范围为0到100的整数。

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

网页主页面标题更改时触发该回调。
title：标题内容。

| +| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#JsResult对象说明) }) => boolean) |

网页触发alert()告警弹窗时触发回调。
当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知web组件。
url：当前显示弹窗所在网页的URL。
message：弹窗中显示的信息。
JsResult：通知web组件用户操作行为。

| +| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#JsResult对象说明) }) => boolean) |

刷新或关闭场景下，在即将离开当前页面时触发此回调。
当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知web组件最终是否离开当前页面。
url：当前显示弹窗所在网页的URL。
message：弹窗中显示的信息。
JsResult：通知web组件用户操作行为。

| +| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#JsResult对象说明) }) => boolean) |

网页调用confirm()告警时触发此回调。
当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知web组件。
url：当前显示弹窗所在网页的URL。
message：弹窗中显示的信息。
JsResult：通知web组件用户操作行为。

| +| onConsole(callback: (event?: { message: [ConsoleMessage](#ConsoleMessage对象说明) }) => boolean) |

通知宿主应用JavaScript console消息。
message：触发的控制台信息。

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

网页的下载任务开始时触发该回调。
url：文件下载的URL。
userAgent：下载的用户代理（UA）名称。
contentDisposition：服务器返回的 Content-Disposition响应头，可能为空。
mimetype：服务器返回内容媒体类型（MIME）信息。
contentLength：服务器返回文件的长度。

| +| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#WebResourceError对象说明), error: [WebResourceError](#WebResourceError对象说明) }) => void) |

网页加载遇到错误时触发该回调。
出于性能考虑，建议此回调中尽量执行简单逻辑。
request：网页请求的封装信息。
error：网页加载资源错误的封装信息 。

| +| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#WebResourceError对象说明), response: [WebResourceResponse](#WebResourceResponse对象说明) }) => void) |

网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。
request：网页请求的封装信息。
response：网页响应的封装信息

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

网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。
url：页面的URL地址。

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

网页加载完成时触发该回调，且只在主frame触发。
url：页面的URL地址。

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

网页加载进度变化时触发该回调。
newProgress：新的加载进度，取值范围为0到100的整数。

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

网页document标题更改时触发该回调。
title：document标题内容。

| ### ConsoleMessage对象说明 - 接口 - | 接口名称 | 功能描述 | - | ------------------------------- | ---------------------- | - | getLineNumber(): number | 获取ConsoleMessage的行数。 | + | 接口名称 | 功能描述 | + | ------------------------------- | ------------------------------ | + | getLineNumber(): number | 获取ConsoleMessage的行数。 | | getMessage(): string | 获取ConsoleMessage的日志信息。 | | getMessageLevel(): MessageLevel | 获取ConsoleMessage的信息级别。 | - | getSourceId(): string | 获取ConsoleMessage的源的Id。 | + | getSourceId(): string | 获取网页源文件路径和名字。 | - MessageLevel枚举说明 @@ -95,16 +89,16 @@ ohos.permission.READ_USER_STORAGE | Log | 日志级别。 | | Warn | 警告级别。 | -### JsResult 对象说明 +### JsResult对象说明 Web组件返回的弹窗确认或弹窗取消功能对象。 - 接口 - | 接口名称 | 功能描述 | - | --------------------- | ------------ | - | handleCancel(): void |

取消弹窗。

| - | handleConfirm(): void |

确认弹窗。

| + | 接口名称 | 功能描述 | + | --------------------- | ------------------------------------ | + | handleCancel(): void |

通知web组件用户取消弹窗操作。

| + | handleConfirm(): void |

通知web组件用户确认弹窗操作。

| ### WebResourceError对象说明 @@ -119,30 +113,42 @@ Web组件返回的弹窗确认或弹窗取消功能对象。 - 接口 - | 接口名称 | 功能描述 | - | ----------------------------------- | ------------------ | - | getRequestHeader(): Array\ | 获取请求头信息。 | - | getRequestUrl(): string | 获取请求的url信息。 | - | isMainFrame(): boolean | 获取请求是否时为了获取主窗口的信息。 | - | isRedirect(): boolean | 获取请求是否重定向。 | - | isRequestGesture(): boolean | 获取请求是否与手势关联。 | + | 接口名称 | 功能描述 | + | ------------------------------------------------------ | ---------------------------------------- | + | getRequestHeader(): Array\<[Header](#Header对象说明)\> | 获取资源请求头信息。 | + | getRequestUrl(): string | 获取资源请求的URL信息。 | + | isMainFrame(): boolean | 判断资源请求是否为主frame。 | + | isRedirect(): boolean | 判断资源请求是否被服务端重定向。 | + | isRequestGesture(): boolean | 获取资源请求是否与手势（如点击）相关联。 | + +### Header对象说明 + +Web组件返回的请求/响应头对象。 + +- 参数 + + | 参数名称 | 参数描述 | + | ----------- | ---------------------- | + | headerKey: string |

请求/响应头的key。

| + | headerValue: string |

请求/响应头的value。

| + ### WebResourceResponse对象说明 - 接口 - | 接口名称 | 功能描述 | - | ------------------------------------ | ----------- | - | getReasonMessage(): string | 获取响应的状态码描述。 | - | getResponseCode(): number | 获取响应的状态码。 | - | getResponseData(): string | 获取响应数据。 | - | getResponseEncoding(): string | 获取响应的编码。 | - | getResponseHeader(): Array\ | 获取响应头信息。 | - | getResponseMimeType(): string | 获取响应的媒体类型。 | + | 接口名称 | 功能描述 | + | ------------------------------------ | -------------------------------- | + | getReasonMessage(): string | 获取资源响应的状态码描述。 | + | getResponseCode(): number | 获取资源响应的状态码。 | + | getResponseData(): string | 获取资源响应数据。 | + | getResponseEncoding(): string | 获取资源响应的编码。 | + | getResponseHeader(): Array\<[Header](#Header对象说明)\> | 获取资源响应头。 | + | getResponseMimeType(): string | 获取资源响应的媒体（MIME）类型。 | ## WebController -Web 组件的控制器。 +通过webController可以控制web组件各种行为，或获取web组件的配置信息。 ### 创建对象 @@ -154,19 +160,19 @@ webController: WebController = new WebController() accessBackward(): boolean -当前页面是否可后退。 +当前页面是否可后退，即当前页面是否有返回历史记录。 ### accessForward accessForward(): boolean -当前页面是否可前进。 +当前页面是否可前进，即当前页面是否有前进历史记录。 ### accessStep accessStep(step: number): boolean -当前页面是否可前进或者后退step步。 +当前页面是否可前进或者后退给定的step步。 - 参数 @@ -178,124 +184,126 @@ accessStep(step: number): boolean backward(): void -页面后退。 +按照历史栈，后退一个页面。一般结合accessBackward一起使用。 ### deleteJavaScriptRegister deleteJavaScriptRegister(name: string): void -清空指定对象已注册的JavaScript方法。 +删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。 - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ---- | ------ | ---- | ---- | ----------------------- | - | name | string | 是 | - | 注册对象的名称，与HTML中调用的对象名一致。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------ | -------- | ---- | ------ | ------------------------------------------------------------ | + | name | string | 是 | - | 注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 | ### forward forward(): void -页面前进。 +按照历史栈，前进一个页面。一般结合accessForward一起使用。 ### getHitTest getHitTest(): HitTestType -获取当前已点击的对象类型。 +获取当前被点击区域的元素类型。 - HitTestType枚举说明 - | 名称 | 描述 | - | ------- | -------------------------------- | - | Edit | 可编辑的区域。 | - | Email | 邮件地址。 | - | Http | HTTP网址的HTML \标签。 | - | HttpImg | HTTP网址与\标签组成的HTML \标签。 | - | Img | HTML \标签。 | - | Map | 地图地址。 | - | Phone | 电话号码。 | - | Unknown | 未知内容。 | + | 名称 | 描述 | + | ------------- | ----------------------------------------- | + | EditText | 可编辑的区域。 | + | Email | 电子邮件地址。 | + | HttpAnchor | 超链接。其src为http。 | + | HttpAnchorImg | 带有超链接的图片，其中超链接的src为http。 | + | Img | HTML::img标签。 | + | Map | 地理地址。 | + | Phone | 电话号码。 | + | Unknown | 未知内容。 | ### loadData loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }): void -加载数据。 +baseUrl为空时，通过”data“协议加载指定的一段字符串。 + +当baseUrl为”data“协议时，编码后的data字符串将被web组件作为”data"协议加载。 + +当baseUrl为“http/https"协议时，编码后的data字符串将被web组件以类似loadUrl的方式以非编码字符串处理。 - options参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ---------- | ------ | ---- | ---- | -------- | - | data | string | 是 | - | 需要加载的数据。 | - | mimeType | string | 是 | - | 媒体类型。 | - | encoding | string | 是 | - | 编码类型。 | - | baseUrl | string | 否 | - | 基础URL。 | - | historyUrl | string | 否 | - | 历史URL。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---------- | -------- | ---- | ------ | ------------------------------------------------------------ | + | data | string | 是 | - | 按照”Base64“或者”URL"编码后的一段字符串。 | + | mimeType | string | 是 | - | 媒体类型（MIME）。 | + | encoding | string | 是 | - | 编码类型，具体为“Base64"或者”URL编码。 | + | baseUrl | string | 否 | - | 指定的一个URL路径（“http”/“https”/"data"协议），并由web组件赋值给window.origin。 | + | historyUrl | string | 否 | - | 历史记录URL。非空时，可被历史记录管理，实现前后后退功能。当baseUrl为空时，此属性无效。 | ### loadUrl -loadUrl(options:{ url: string, headers?: Array<{ key: string, value: string }> }): void +loadUrl(options:{ url: string, headers?: Array\ }): void + +使用指定的http头加载指定的URL。 -加载URL。 +通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。 + +而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。 - options参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ------- | ------------------------------------- | ---- | ---- | ---------- | - | url | string | 是 | - | 需要加载的 URL。 | - | headers | Array<{ key: string, value: string }> | 否 | [] | HTTP附加信息。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ------- | ------------------------------------- | ---- | ------ | --------------------- | + | url | string | 是 | - | 需要加载的 URL。 | + | headers | Array\<[Header](#Header对象说明)\> | 否 | [] | URL的附加HTTP请求头。 | ### onActive onActive(): void -页面重新激活。当Web被重新激活为活跃状态时，执行此方法。 +调用此接口通知web组件进入前台激活状态。 ### onInactive onInactive(): void -页面暂停渲染。当Web被切换到后台不可见状态时，执行此方法。 +调用此接口通知web组件进入未激活状态。 ### refresh refresh(): void -刷新页面。 +调用此接口通知web组件刷新网页。 ### registerJavaScriptProxy -registerJavaScriptProxy(options: { obj: object, name: string, methodList: Array\ }): void +registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\ }): void -将JavaScript对象与方法注册到Web内核，可被已加载的HTML直接调用。注册后，须调用refresh接口生效。 +注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。 - options 参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ---------- | --------------- | ---- | ---- | ----------------------- | - | obj | object | 是 | - | 参与注册的对象。 | - | name | string | 是 | - | 注册对象的名称，与HTML中调用的对象名一致。 | - | methodList | Array\ | 是 | - | 参与注册的方法。 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---------- | --------------- | ---- | ------ | ------------------------------------------------------------ | + | object | object | 是 | - | 参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean | + | name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 | + | methodList | Array\ | 是 | - | 参与注册的应用侧JavaScript对象的方法。 | ### runJavaScript runJavaScript(options: { script: string, callback?: (result: string) => void }): void -执行JavaScript脚本。 +异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。 - options参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | ------------------------ | ---- | ---- | ------------------------------------ | - | script | string | 是 | - | JavaScript脚本。 | - | callback | (result: string) => void | 否 | - | 回调执行JavaScript脚本结果，默认result为null字符串。 | - -### requestFocus - -requestFocus(): void - -Web组件获焦。 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | ------------------------ | ---- | ------ | ------------------------------------------------------------ | + | script | string | 是 | - | JavaScript脚本。 | + | callback | (result: string) => void | 否 | - | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。 | ### stop -- GitLab