• 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';
22
23@Entry
24@Component
25struct WebComponent {
26  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
27
28  build() {
29    Column() {
30      Button('loadUrl')
31        .onClick(() => {
32          try {
33            // 点击按钮时，通过loadUrl，跳转到www.example1.com
34            this.webviewController.loadUrl('www.example1.com');
35          } catch (error) {
36            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
37          }
38        })
39      // 组件创建时，加载www.example.com
40      Web({ src: 'www.example.com', controller: this.webviewController})
41    }
42  }
43}
44```
45
46
47## 加载本地页面
48
49将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面 ，并且加载完成后可通过调用[loadUrl()](../reference/apis/js-apis-webview.md#loadurl)接口变更当前Web组件的页面。
50
51
52在下面的示例中展示加载本地页面文件的方法：
53
54
55- 将资源文件放置在应用的resources/rawfile目录下。
56
57    **图1** 资源文件路径  
58
59    ![resource-path](figures/resource-path.png)
60
61
62- 应用侧代码。
63
64  ```ts
65  // xxx.ets
66  import web_webview from '@ohos.web.webview';
67
68  @Entry
69  @Component
70  struct WebComponent {
71    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
72
73    build() {
74      Column() {
75        Button('loadUrl')
76          .onClick(() => {
77            try {
78              // 点击按钮时，通过loadUrl，跳转到local1.html
79              this.webviewController.loadUrl($rawfile("local1.html"));
80            } catch (error) {
81              console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
82            }
83          })
84        // 组件创建时，通过$rawfile加载本地文件local.html
85        Web({ src: $rawfile("local.html"), controller: this.webviewController })
86      }
87    }
88  }
89  ```
90
91
92- local.html页面代码。
93
94  ```html
95  <!-- local.html -->
96  <!DOCTYPE html>
97  <html>
98    <body>
99      <p>Hello World</p>
100    </body>
101  </html>
102  ```
103
104
105## 加载HTML格式的文本数据
106
107Web组件可以通过[loadData()](../reference/apis/js-apis-webview.md#loaddata)接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。
108
109
110
111```ts
112// xxx.ets
113import web_webview from '@ohos.web.webview';
114
115@Entry
116@Component
117struct WebComponent {
118  controller: web_webview.WebviewController = new web_webview.WebviewController();
119
120  build() {
121    Column() {
122      Button('loadData')
123        .onClick(() => {
124          try {
125            // 点击按钮时，通过loadData，加载HTML格式的文本数据
126            this.controller.loadData(
127              '<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>',
128              'text/html',
129              'UTF-8'
130            );
131          } catch (error) {
132            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
133          }
134        })
135      // 组件创建时，加载www.example.com
136      Web({ src: 'www.example.com', controller: this.controller })
137    }
138  }
139}
140```
141