diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Web.png b/zh-cn/application-dev/reference/arkui-ts/figures/Web.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9566a229865d250ba1a8c447d93ea577dc0dbc5
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/Web.png differ
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 4d6797bc2483154b36281d88f74e15fe40764575..0af11727a4e6ddfb890195b6248cbbe5e0b841f3 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
@@ -3,11 +3,11 @@
> **说明：**
>该组件从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-提供具有页面显示能力的 WebView 组件。
+提供具有网页显示能力的 Web 组件。
## 权限列表
-ohos.permission.INTERNET（使用网络图片）
+ohos.permission.INTERNET
ohos.permission.READ_USER_STORAGE
@@ -21,29 +21,40 @@ ohos.permission.READ_USER_STORAGE
表1 options 参数说明
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | ---------- | ------------- | ---- | ---- | ----- |
- | src | string | 是 | - | 网页地址。 |
- | controller | WebController | 否 | - | 控制器。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ---------- | ---------------------------------------- | ---- | ---- | ------- |
+ | src | string | 是 | - | 网页资源地址。 |
+ | controller | WebController | 否 | - | 控制器。 |
+>  **说明：**
+>
+> - 一个页面只支持一个 Web 组件，全屏显示，页面中的其他组件会被 Web 组件遮挡；
+> - 不支持转场动画；
+> - 只支持加载 rawfile 目录下的 html 文件，不支持远程资源。
+
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------- | ------- | ----- | ---------------------------------------- |
| javaScriptAccess | boolean | false | 是否允许执行 JavaScript 脚本，当设置为 false 时，不允许执行。 |
-| fileAccess | boolean | false | 启用或禁用 WebView 中是否能通过 file 方式访问应用中的本地文件，当设置为 false 时，禁用。 |
+| fileAccess | boolean | false | 启用或禁用 Web 中可通过 file 方式访问应用中的本地文件，当设置为 false 时，禁用。 |
+
+>  **说明：**
+>
+> 不支持通用属性。
## 事件
-| 名称 | 功能描述 |
-| ---------------------------------------- | -------------------- |
-| onPageEnd(callback: (event?: { url: string }) => void) | 网页加载结束时触发该回调。 |
-| onRequestSelected(callback: () => void) | 获取 WebView 焦点时触发该回调。 |
+不支持通用事件。
+
+| 名称 | 功能描述 |
+| ---------------------------------------- | ---------------------------------------- |
+| onPageEnd(callback: (event?: { url: string }) => void) | 网页加载结束时触发该回调。
url：Web 引擎返回的 URL。
|
-## WebController
+## WebController
-WebView 组件的控制器。
+Web 组件的控制器。
### 创建对象
@@ -51,65 +62,68 @@ WebView 组件的控制器。
webController: WebController = new WebController()
```
-### webController.runJavaScript
+### runJavaScript
-runJavaScript(options: { script: string, callback?: (error, data) => void }): void
+runJavaScript(script: string): void
执行 JavaScript 脚本。
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | --------------------- | ---- | ---- | --------------------- |
- | script | string | 是 | - | JavaScript 脚本。 |
- | callback | (error, data) => void | 否 | - | 执行 JavaScript 脚本时的回调。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ------ | ------ | ---- | ---- | -------------- |
+ | script | string | 是 | - | JavaScript 脚本。 |
-### webController.loadUrl
+### loadUrl
-loadUrl(options: { url: string, headerMap?: Map }): void
+loadUrl(url: string): void
加载 URL。
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | --------- | ------------------- | ---- | ---- | ---------- |
- | url | string | 是 | - | 需要加载的 URL。 |
- | headerMap | Map | 否 | - | 请求头集合。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ---- | ------ | ---- | ---- | ---------- |
+ | url | string | 是 | - | 需要加载的 URL。 |
-
## 示例
```
+// webComponent.ets
@Entry
@Component
struct WebComponent {
@State javaScriptAccess: boolean = true;
@State fileAccess: boolean = true;
controller: WebController = new WebController();
-
build() {
Column() {
- Web(src: 'https://gitee.com/openharmony', controller: this.controller)
+ Web(src: $rawfile('index.html'), controller: this.controller)
.javaScriptAccess(javaScriptAccess)
.fileAccess(fileAccess)
- .onRequestSelected(() => {
- // Gitee.initNavbar() 函数定义在网页中
- this.controller.runJavaScript('javascript:Gitee.initNavbar()',
- (err, data) => {
- if (err) {
- console.error('Operation failed. Cause: ', JSON.stringify(err));
- return;
- }
- console.info('Operation successful. Data: ', JSON.stringify(data));
- })
- })
- .onPageEnd((event) => {
- console.log("url: ", event.url);
+ .onPageEnd(e => {
+ // test() 在 index.html 中已定义
+ this.controller.runJavaScript('test()');
+ console.log("url: ", e.url);
})
}
}
}
+
+// index.html
+
+
+
+
+ Hello world!
+
+
+
```
+
\ No newline at end of file