• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用Web组件加载页面
2
3
4页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。
5
6
7页面加载过程中，若涉及网络资源获取，需要配置[ohos.permission.INTERNET](../security/accesstoken-guidelines.md)网络访问权限。
8
9
10## 加载网络页面
11
12开发者可以在Web组件创建时，指定默认加载的网络页面 。在默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用[loadUrl()](../reference/apis/js-apis-webview.md#loadurl)接口加载指定的网页。
13
14
15在下面的示例中，在Web组件加载完“www\.example.com”页面后，开发者可通过loadUrl接口将此Web组件显示页面变更为“www\.example1.com”。
16
17
18
19```ts
20// xxx.ets
21import web_webview from '@ohos.web.webview';
22import business_error from '@ohos.base';
23
24@Entry
25@Component
26struct WebComponent {
27  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
28
29  build() {
30    Column() {
31      Button('loadUrl')
32        .onClick(() => {
33          try {
34            // 点击按钮时，通过loadUrl，跳转到www.example1.com
35            this.webviewController.loadUrl('www.example1.com');
36          } catch (error) {
37            let e: business_error.BusinessError = error as business_error.BusinessError;
38            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
39          }
40        })
41      // 组件创建时，加载www.example.com
42      Web({ src: 'www.example.com', controller: this.webviewController})
43    }
44  }
45}
46```
47
48
49## 加载本地页面
50
51将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面 ，并且加载完成后可通过调用[loadUrl()](../reference/apis/js-apis-webview.md#loadurl)接口变更当前Web组件的页面。
52
53
54在下面的示例中展示加载本地页面文件的方法：
55
56
57- 将资源文件放置在应用的resources/rawfile目录下。
58
59    **图1** 资源文件路径  
60
61    ![resource-path](figures/resource-path.png)
62
63
64- 应用侧代码。
65
66  ```ts
67  // xxx.ets
68  import web_webview from '@ohos.web.webview';
69  import business_error from '@ohos.base';
70
71  @Entry
72  @Component
73  struct WebComponent {
74    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
75
76    build() {
77      Column() {
78        Button('loadUrl')
79          .onClick(() => {
80            try {
81              // 点击按钮时，通过loadUrl，跳转到local1.html
82              this.webviewController.loadUrl($rawfile("local1.html"));
83            } catch (error) {
84              let e: business_error.BusinessError = error as business_error.BusinessError;
85              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
86            }
87          })
88        // 组件创建时，通过$rawfile加载本地文件local.html
89        Web({ src: $rawfile("local.html"), controller: this.webviewController })
90      }
91    }
92  }
93  ```
94
95
96- local.html页面代码。
97
98  ```html
99  <!-- local.html -->
100  <!DOCTYPE html>
101  <html>
102    <body>
103      <p>Hello World</p>
104    </body>
105  </html>
106  ```
107
108
109## 加载HTML格式的文本数据
110
111Web组件可以通过[loadData()](../reference/apis/js-apis-webview.md#loaddata)接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。
112
113
114
115```ts
116// xxx.ets
117import web_webview from '@ohos.web.webview';
118import business_error from '@ohos.base';
119
120@Entry
121@Component
122struct WebComponent {
123  controller: web_webview.WebviewController = new web_webview.WebviewController();
124
125  build() {
126    Column() {
127      Button('loadData')
128        .onClick(() => {
129          try {
130            // 点击按钮时，通过loadData，加载HTML格式的文本数据
131            this.controller.loadData(
132              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
133              "text/html",
134              "UTF-8"
135            );
136          } catch (error) {
137            let e: business_error.BusinessError = error as business_error.BusinessError;
138            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
139          }
140        })
141      // 组件创建时，加载www.example.com
142      Web({ src: 'www.example.com', controller: this.controller })
143    }
144  }
145}
146```
147
148## 相关实例
149
150针对Web组件开发，有以下相关实例可供参考：
151
152- [浏览器（ArkTS）（Full SDK）(API9)](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-4.0-Release/code/BasicFeature/Web/Browser)