• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Loading Pages by Using the Web Component
2
3
4Page loading is a basic function of the **Web** component. Depending on the data source, page loading falls into three types: loading of network pages, loading of local pages, and loading of HTML rich text data.
5
6
7If acquisition of network resources is involved in page loading, you need to declare the [ohos.permission.INTERNET](../security/accesstoken-guidelines.md) permission.
8
9
10## Loading Network Pages
11
12You can specify the default network page to be loaded when creating a **Web** component. After the default network page is loaded, call [loadUrl()](../reference/apis/js-apis-webview.md#loadurl) if you want to change the network page displayed by the **Web** component.
13
14
15In the following example, after the **www.\example.com** page is loaded by the **Web** component, **loadUrl** is called to change the displayed page to **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            // Upon button clicking, call loadUrl to redirect to 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      // When creating a Web component, set the default network page to be loaded to www.example.com.
42      Web({ src: 'www.example.com', controller: this.webviewController})
43    }
44  }
45}
46```
47
48
49## Loading Local Pages
50
51Local page files are stored in the application's **rawfile** directory. You can specify the local page to be loaded by default when creating a **Web** component. After page loading is complete, you can call [loadUrl()](../reference/apis/js-apis-webview.md#loadurl) to change the displayed page of the **Web** component.
52
53
54The following example shows how to load a local page file.
55
56
57- Local page file in the application's resources/rawfile directory:
58
59    **Figure 1** Path of local page files
60
61    ![resource-path](figures/resource-path.png)
62
63
64- Application code:
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              // Upon button clicking, call loadUrl to redirect to 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        // When creating a Web component, load the local.html file through $rawfile.
89        Web({ src: $rawfile("local.html"), controller: this.webviewController })
90      }
91    }
92  }
93  ```
94
95
96- Code of the **local.html** page:
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## Loading HTML Rich Text Data
110
111The **Web** component provides the [loadData()](../reference/apis/js-apis-webview.md#loaddata) API for you to load HTML rich text data. This API is applicable if you want to display some page sections instead of the entire page.
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            // Upon button clicking, call loadData to load HTML rich text data.
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      // When creating a Web component, set the default network page to be loaded to www.example.com.
142      Web({ src: 'www.example.com', controller: this.controller })
143    }
144  }
145}
146```
147