1# Loading Web Pages
2
3
4Page loading is a basic capability 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 you need to load online resources, declare the network access permission in the **module.json5** file. For details, see [Declaring Permissions](../security/AccessToken/declare-permissions.md).
8
9  ```
10  "requestPermissions":[
11      {
12        "name" : "ohos.permission.INTERNET"
13      }
14    ]
15  ```
16
17## Loading Network Pages
18
19You 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-arkweb/js-apis-webview.md#loadurl) if you want to change the network page displayed by the **Web** component. The value of the first parameter **src** of the **Web** component cannot be dynamically changed through a state variable (for example, @State). To change the value, call [loadUrl()](../reference/apis-arkweb/js-apis-webview.md#loadurl).
20
21
22In 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**.
23
24
25
26```ts
27// xxx.ets
28import { webview } from '@kit.ArkWeb';
29import { BusinessError } from '@kit.BasicServicesKit';
30
31@Entry
32@Component
33struct WebComponent {
34  controller: webview.WebviewController = new webview.WebviewController();
35
36  build() {
37    Column() {
38      Button('loadUrl')
39        .onClick(() => {
40          try {
41            // Upon button clicking, call loadUrl to redirect to www.example1.com.
42            this.controller.loadUrl('www.example1.com');
43          } catch (error) {
44            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
45          }
46        })
47      // When creating a Web component, set the default network page to be loaded to www.example.com.
48      Web({ src: 'www.example.com', controller: this.controller })
49    }
50  }
51}
52```
53
54
55## Loading Local Pages
56
57The following example shows how to load a local page file.
58
59Local 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-arkweb/js-apis-webview.md#loadurl) to change the displayed page of the **Web** component.
60
61To reference a local CSS file when loading a local HTML file, perform the following steps:
62
63```html
64<link rel="stylesheet" href="resource://rawfile/xxx.css">
65<link rel="stylesheet" href="file:// /data/storage/el2/base/haps/entry/cache/xxx.css">// Load the local CSS file in the sandbox path.
66```
67
68- Local page file in the application's resources/rawfile directory:
69
70    **Figure 1** Path of local page files
71
72    ![resource-path](figures/resource-path.png)
73
74
75- Application code:
76
77  ```ts
78  // xxx.ets
79  import { webview } from '@kit.ArkWeb';
80  import { BusinessError } from '@kit.BasicServicesKit';
81
82  @Entry
83  @Component
84  struct WebComponent {
85    controller: webview.WebviewController = new webview.WebviewController();
86
87    build() {
88      Column() {
89        Button('loadUrl')
90          .onClick(() => {
91            try {
92              // Upon button clicking, call loadUrl to redirect to local1.html.
93              this.controller.loadUrl($rawfile("local1.html"));
94            } catch (error) {
95              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
96            }
97          })
98        // When creating a Web component, load the local.html file through $rawfile.
99        Web({ src: $rawfile("local.html"), controller: this.controller })
100      }
101    }
102  }
103  ```
104
105
106- Code of the **local.html** page:
107
108  ```html
109  <!-- local.html -->
110  <!DOCTYPE html>
111  <html>
112    <body>
113      <p>Hello World</p>
114    </body>
115  </html>
116  ```
117
118- Code of the **local1.html** page:
119
120  ```html
121  <!-- local1.html -->
122  <!DOCTYPE html>
123  <html>
124    <body>
125      <p>This is local1 page</p>
126    </body>
127  </html>
128  ```
129
130Example of loading local page files in the sandbox:
131
1321. To obtain the sandbox path through the constructed singleton object **GlobalContext**, you need to enable [fileAccess](../reference/apis-arkweb/ts-basic-components-web.md#fileaccess) in the application.
133
134   ```ts
135   // GlobalContext.ets
136   export class GlobalContext {
137     private constructor() {}
138     private static instance: GlobalContext;
139     private _objects = new Map<string, Object>();
140
141     public static getContext(): GlobalContext {
142       if (!GlobalContext.instance) {
143         GlobalContext.instance = new GlobalContext();
144       }
145       return GlobalContext.instance;
146     }
147
148     getObject(value: string): Object | undefined {
149       return this._objects.get(value);
150     }
151
152     setObject(key: string, objectClass: Object): void {
153       this._objects.set(key, objectClass);
154     }
155   }
156   ```
157
158   ```ts
159   // xxx.ets
160   import { webview } from '@kit.ArkWeb';
161   import { GlobalContext } from '../GlobalContext';
162
163   let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html';
164
165   @Entry
166   @Component
167   struct WebComponent {
168     controller: webview.WebviewController = new webview.WebviewController();
169
170     build() {
171       Column() {
172         // Load the files in the sandbox.
173         Web({ src: url, controller: this.controller })
174         .fileAccess(true)
175       }
176     }
177   }
178   ```
179
1802. Modify the **EntryAbility.ets** file.
181
182   The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../application-models/application-context-stage.md#obtaining-application-file-paths).
183
184   ```ts
185   // xxx.ets
186   import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
187   import { webview } from '@kit.ArkWeb';
188   import { GlobalContext } from '../GlobalContext';
189
190   export default class EntryAbility extends UIAbility {
191     onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
192       // Data synchronization between the UIAbility component and UI can be implemented by binding filesDir to the GlobalContext object.
193       GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
194       console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"));
195     }
196   }
197   ```
198
199   HTML file to be loaded:
200
201   ```html
202   <!-- index.html -->
203   <!DOCTYPE html>
204   <html>
205       <body>
206           <p>Hello World</p>
207       </body>
208   </html>
209   ```
210
211
212## Loading HTML Rich Text Data
213
214The **Web** component provides the [loadData()](../reference/apis-arkweb/js-apis-webview.md#loaddata) API for you to load HTML rich text data. If you need to display only some page fragments, you can use this feature to quickly load the page. To load a large number of HTML files, set **baseUrl** to data.
215
216```ts
217// xxx.ets
218import { webview } from '@kit.ArkWeb';
219import { BusinessError } from '@kit.BasicServicesKit';
220
221@Entry
222@Component
223struct WebComponent {
224  controller: webview.WebviewController = new webview.WebviewController();
225
226  build() {
227    Column() {
228      Button('loadData')
229        .onClick(() => {
230          try {
231            // Upon button clicking, call loadData to load HTML rich text data.
232            this.controller.loadData(
233              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
234              "text/html",
235              "UTF-8"
236            );
237          } catch (error) {
238            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
239          }
240        })
241      // When creating a Web component, set the default network page to be loaded to www.example.com.
242      Web({ src: 'www.example.com', controller: this.controller })
243    }
244  }
245}
246```
247
248The **Web** component can load HTML strings using data urls.
249
250```ts
251// xxx.ets
252import { webview } from '@kit.ArkWeb';
253import { BusinessError } from '@kit.BasicServicesKit';
254
255@Entry
256@Component
257struct WebComponent {
258  controller: webview.WebviewController = new webview.WebviewController();
259  htmlStr: string = "data:text/html, <html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>";
260
261  build() {
262    Column() {
263      // When creating a Web component, set the default network page to be loaded to htmlStr.
264      Web({ src: this.htmlStr, controller: this.controller })
265    }
266  }
267}
268```
269
270## Samples
271
272The following samples are provided to help you better understand how to develop the **Web** component:
273
274- [Browser (ArkTS) (Full SDK) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)
275