• 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';
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            // Upon button clicking, call loadUrl to redirect to 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      // When creating a Web component, set the default network page to be loaded to www.example.com.
40      Web({ src: 'www.example.com', controller: this.webviewController})
41    }
42  }
43}
44```
45
46
47## Loading Local Pages
48
49Local 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.
50
51
52The following example shows how to load a local page file.
53
54
55- Local page file in the application's resources/rawfile directory:
56
57    **Figure 1** Path of local page files
58
59    ![resource-path](figures/resource-path.png)
60
61
62- Application code:
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              // Upon button clicking, call loadUrl to redirect to local1.html.
79              this.webviewController.loadUrl($rawfile("local1.html"));
80            } catch (error) {
81              console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
82            }
83          })
84        // When creating a Web component, load the local.html file through $rawfile.
85        Web({ src: $rawfile("local.html"), controller: this.webviewController })
86      }
87    }
88  }
89  ```
90
91
92- Code of the **local.html** page:
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## Loading HTML Rich Text Data
106
107The **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.
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            // Upon button clicking, call loadData to load HTML rich text data.
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      // When creating a Web component, set the default network page to be loaded to www.example.com.
136      Web({ src: 'www.example.com', controller: this.controller })
137    }
138  }
139}
140```
141