• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 组件描述
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @yp99ustc; @aohui; @zourongchun-->
5<!--Designer: @LongLie; @yaomingliu; @zhufenghao-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9提供具有网页显示能力的Web组件，[@ohos.web.webview](arkts-apis-webview.md)提供Web控制能力。
10
11> **说明：**
12>
13> - 该组件首批接口从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14>
15> - 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。
16
17该模块提供以下Web组件网页显示相关的常用功能：
18
19- [ClientAuthenticationHandler](./arkts-basic-components-web-ClientAuthenticationHandler.md)：客户端证书请求事件。
20- [ConsoleMessage](./arkts-basic-components-web-ConsoleMessage.md)：控制台信息。
21- [ControllerHandler](./arkts-basic-components-web-ControllerHandler.md)：新建Web组件的WebviewController对象。
22- [DataResubmissionHandler](./arkts-basic-components-web-DataResubmissionHandler.md)：表单数据操作对象。
23- [EventResult](./arkts-basic-components-web-EventResult.md)：同层事件消费结果。
24- [FileSelectorParam](./arkts-basic-components-web-FileSelectorParam.md)：Web组件获取文件对象。
25- [FileSelectorResult](./arkts-basic-components-web-FileSelectorResult.md)：Web组件文件选择结果。
26- [FullScreenExitHandler](./arkts-basic-components-web-FullScreenExitHandler.md)：Web组件退出全屏的操作对象。
27- [HttpAuthHandler](./arkts-basic-components-web-HttpAuthHandler.md)：HttpAuth认证请求相关操作功能对象。
28- [JsGeolocation](./arkts-basic-components-web-JsGeolocation.md)：地理位置信息权限功能。
29- [JsResult](./arkts-basic-components-web-JsResult.md)：弹窗操作。
30- [PermissionRequest](./arkts-basic-components-web-PermissionRequest.md)：权限请求。
31- [ScreenCaptureHandler](./arkts-basic-components-web-ScreenCaptureHandler.md)：屏幕捕获相关权限操作。
32- [SslErrorHandler](./arkts-basic-components-web-SslErrorHandler.md)：SSL错误事件操作功能。
33- [WebContextMenuParam](./arkts-basic-components-web-WebContextMenuParam.md)：长按或鼠标右键弹出菜单信息。
34- [WebContextMenuResult](./arkts-basic-components-web-WebContextMenuResult.md)：控制长按或鼠标右键弹出菜单。
35- [WebCookie](./arkts-basic-components-web-WebCookie.md)：当前应用中Web组件的Cookie管理操作。
36- [WebKeyboardController](./arkts-basic-components-web-WebKeyboardController.md)：控制自定义键盘。
37- [WebResourceError](./arkts-basic-components-web-WebResourceError.md)：资源管理错误。
38- [WebResourceRequest](./arkts-basic-components-web-WebResourceRequest.md)：资源获取请求。
39- [WebResourceResponse](./arkts-basic-components-web-WebResourceResponse.md)：资源获取响应。
40
41## 需要权限
42
43访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考[声明权限](../../security/AccessToken/declare-permissions.md)。
44
45## 子组件
46
47无
48
49## 接口
50
51Web(value: WebOptions)
52
53> **说明：**
54>
55> 不支持转场动画。
56>
57> 同一页面的多个Web组件，必须绑定不同的WebviewController。
58
59**系统能力：** SystemCapability.Web.Webview.Core
60
61**参数：**
62
63| 参数名        | 类型                                     | 必填   | 说明                                     |
64| ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
65| value        | [WebOptions](./arkts-basic-components-web-i.md#weboptions)   | 是    | 定义Web选项。 |
66
67**示例：**
68
69加载在线网页。
70
71  ```ts
72  // xxx.ets
73  import { webview } from '@kit.ArkWeb';
74
75  @Entry
76  @Component
77  struct WebComponent {
78    controller: webview.WebviewController = new webview.WebviewController();
79
80    build() {
81      Column() {
82        Web({ src: 'www.example.com', controller: this.controller })
83      }
84    }
85  }
86  ```
87
88隐私模式Webview加载在线网页。
89
90  ```ts
91  // xxx.ets
92  import { webview } from '@kit.ArkWeb';
93
94  @Entry
95  @Component
96  struct WebComponent {
97    controller: webview.WebviewController = new webview.WebviewController();
98
99    build() {
100      Column() {
101        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
102      }
103    }
104  }
105  ```
106
107Web组件同步渲染模式。
108
109  ```ts
110  // xxx.ets
111  import { webview } from '@kit.ArkWeb';
112
113  @Entry
114  @Component
115  struct WebComponent {
116    controller: webview.WebviewController = new webview.WebviewController();
117
118    build() {
119      Column() {
120        Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
121      }
122    }
123  }
124  ```
125
126Web组件指定共享渲染进程。
127
128  ```ts
129  // xxx.ets
130  import { webview } from '@kit.ArkWeb';
131
132  @Entry
133  @Component
134  struct WebComponent {
135    controller1: webview.WebviewController = new webview.WebviewController();
136    controller2: webview.WebviewController = new webview.WebviewController();
137
138    build() {
139      Column() {
140        Web({ src: 'www.example.com', controller: this.controller1, sharedRenderProcessToken: "111" })
141        Web({ src: 'www.w3.org', controller: this.controller2, sharedRenderProcessToken: "111" })
142      }
143    }
144  }
145  ```
146
147加载本地网页。
148
149通过$rawfile方式加载。
150  ```ts
151  // xxx.ets
152  import { webview } from '@kit.ArkWeb';
153
154  @Entry
155  @Component
156  struct WebComponent {
157    controller: webview.WebviewController = new webview.WebviewController();
158
159    build() {
160      Column() {
161        // 通过$rawfile加载本地资源文件。
162        Web({ src: $rawfile("index.html"), controller: this.controller })
163      }
164    }
165  }
166  ```
167
168通过resources协议加载，适用Webview加载带有"#"路由的链接。
169
170使用 `resource://rawfile/` 协议前缀可以避免常规 `$rawfile` 方式在处理带有"#"路由链接时的局限性。当URL中包含"#"号时，"#"后面的内容会被视为锚点（fragment）。
171  ```ts
172  // xxx.ets
173  import { webview } from '@kit.ArkWeb';
174
175  @Entry
176  @Component
177  struct WebComponent {
178    controller: webview.WebviewController = new webview.WebviewController();
179
180    build() {
181      Column() {
182        // 通过resource协议加载本地资源文件。
183        Web({ src: "resource://rawfile/index.html#home", controller: this.controller })
184      }
185    }
186  }
187  ```
188
189在“src\main\resources\rawfile”文件夹下创建index.html：
190```html
191<!-- index.html -->
192<!DOCTYPE html>
193<html>
194<body>
195<div id="content"></div>
196
197<script>
198	function loadContent() {
199	  var hash = window.location.hash;
200	  var contentDiv = document.getElementById('content');
201
202	  if (hash === '#home') {
203		contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
204	  } else {
205		contentDiv.innerHTML = '<h1>Default Page</h1><p>This is the default content.</p>';
206	  }
207	}
208
209	// 加载界面
210	window.addEventListener('load', loadContent);
211
212	// 当hash变化时，更新界面
213	window.addEventListener('hashchange', loadContent);
214</script>
215</body>
216</html>
217```
218
219加载沙箱路径下的本地资源文件，需要开启应用中文件系统的访问[fileAccess](./arkts-basic-components-web-attributes.md#fileaccess)权限。
220
2211. 通过构造的单例对象GlobalContext获取沙箱路径。
222
223   ```ts
224   // GlobalContext.ets
225   export class GlobalContext {
226     private constructor() {}
227     private static instance: GlobalContext;
228     private _objects = new Map<string, Object>();
229
230     public static getContext(): GlobalContext {
231       if (!GlobalContext.instance) {
232         GlobalContext.instance = new GlobalContext();
233       }
234       return GlobalContext.instance;
235     }
236
237     getObject(value: string): Object | undefined {
238       return this._objects.get(value);
239     }
240
241     setObject(key: string, objectClass: Object): void {
242       this._objects.set(key, objectClass);
243     }
244   }
245   ```
246
247   ```ts
248   // xxx.ets
249   import { webview } from '@kit.ArkWeb';
250   import { GlobalContext } from '../GlobalContext';
251
252   let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html';
253
254   @Entry
255   @Component
256   struct WebComponent {
257     controller: webview.WebviewController = new webview.WebviewController();
258
259     build() {
260       Column() {
261         // 加载沙箱路径文件。
262         Web({ src: url, controller: this.controller })
263         .fileAccess(true)
264       }
265     }
266   }
267   ```
268
2692. 修改EntryAbility.ets。
270
271   以filesDir为例，获取沙箱路径。若想获取其他路径，请参考[应用文件路径](../../application-models/application-context-stage.md#获取应用文件路径)。
272
273   ```ts
274   // xxx.ets
275   import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
276   import { webview } from '@kit.ArkWeb';
277   import { GlobalContext } from '../GlobalContext';
278
279   export default class EntryAbility extends UIAbility {
280     onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
281       // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
282       GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
283       console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"));
284     }
285   }
286   ```
287
288   加载的html文件。
289
290   ```html
291   <!-- index.html -->
292   <!DOCTYPE html>
293   <html>
294       <body>
295           <p>Hello World</p>
296       </body>
297   </html>
298   ```