1e41f4b71Sopenharmony_ci# Loading Pages 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciPage loading is a basic function of the [Web](../reference/apis-arkweb/ts-basic-components-web.md#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. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciIf acquisition of network resources is involved in page loading, you need to declare the [ohos.permission.INTERNET](../security/AccessToken/declare-permissions.md) permission. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci## Loading Network Pages 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciYou 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). 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci 15e41f4b71Sopenharmony_ciIn 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**. 16e41f4b71Sopenharmony_ci 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci```ts 20e41f4b71Sopenharmony_ci// xxx.ets 21e41f4b71Sopenharmony_ciimport { webview } from '@kit.ArkWeb'; 22e41f4b71Sopenharmony_ciimport { BusinessError } from '@kit.BasicServicesKit'; 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ci@Entry 25e41f4b71Sopenharmony_ci@Component 26e41f4b71Sopenharmony_cistruct WebComponent { 27e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci build() { 30e41f4b71Sopenharmony_ci Column() { 31e41f4b71Sopenharmony_ci Button('loadUrl') 32e41f4b71Sopenharmony_ci .onClick(() => { 33e41f4b71Sopenharmony_ci try { 34e41f4b71Sopenharmony_ci // Upon button clicking, call loadUrl to redirect to www.example1.com. 35e41f4b71Sopenharmony_ci this.controller.loadUrl('www.example1.com'); 36e41f4b71Sopenharmony_ci } catch (error) { 37e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 38e41f4b71Sopenharmony_ci } 39e41f4b71Sopenharmony_ci }) 40e41f4b71Sopenharmony_ci // When creating a Web component, set the default network page to be loaded to www.example.com. 41e41f4b71Sopenharmony_ci Web({ src: 'www.example.com', controller: this.controller }) 42e41f4b71Sopenharmony_ci } 43e41f4b71Sopenharmony_ci } 44e41f4b71Sopenharmony_ci} 45e41f4b71Sopenharmony_ci``` 46e41f4b71Sopenharmony_ci 47e41f4b71Sopenharmony_ci 48e41f4b71Sopenharmony_ci## Loading Local Pages 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ciLocal 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. 51e41f4b71Sopenharmony_ci 52e41f4b71Sopenharmony_ci 53e41f4b71Sopenharmony_ciThe following example shows how to load a local page file. 54e41f4b71Sopenharmony_ci 55e41f4b71Sopenharmony_ci 56e41f4b71Sopenharmony_ci- Local page file in the application's resources/rawfile directory: 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ci **Figure 1** Path of local page files 59e41f4b71Sopenharmony_ci 60e41f4b71Sopenharmony_ci  61e41f4b71Sopenharmony_ci 62e41f4b71Sopenharmony_ci 63e41f4b71Sopenharmony_ci- Application code: 64e41f4b71Sopenharmony_ci 65e41f4b71Sopenharmony_ci ```ts 66e41f4b71Sopenharmony_ci // xxx.ets 67e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 68e41f4b71Sopenharmony_ci import { BusinessError } from '@kit.BasicServicesKit'; 69e41f4b71Sopenharmony_ci 70e41f4b71Sopenharmony_ci @Entry 71e41f4b71Sopenharmony_ci @Component 72e41f4b71Sopenharmony_ci struct WebComponent { 73e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 74e41f4b71Sopenharmony_ci 75e41f4b71Sopenharmony_ci build() { 76e41f4b71Sopenharmony_ci Column() { 77e41f4b71Sopenharmony_ci Button('loadUrl') 78e41f4b71Sopenharmony_ci .onClick(() => { 79e41f4b71Sopenharmony_ci try { 80e41f4b71Sopenharmony_ci // Upon button clicking, call loadUrl to redirect to local1.html. 81e41f4b71Sopenharmony_ci this.controller.loadUrl($rawfile("local1.html")); 82e41f4b71Sopenharmony_ci } catch (error) { 83e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 84e41f4b71Sopenharmony_ci } 85e41f4b71Sopenharmony_ci }) 86e41f4b71Sopenharmony_ci // When creating a Web component, load the local.html file through $rawfile. 87e41f4b71Sopenharmony_ci Web({ src: $rawfile("local.html"), controller: this.controller }) 88e41f4b71Sopenharmony_ci } 89e41f4b71Sopenharmony_ci } 90e41f4b71Sopenharmony_ci } 91e41f4b71Sopenharmony_ci ``` 92e41f4b71Sopenharmony_ci 93e41f4b71Sopenharmony_ci 94e41f4b71Sopenharmony_ci- Code of the **local.html** page: 95e41f4b71Sopenharmony_ci 96e41f4b71Sopenharmony_ci ```html 97e41f4b71Sopenharmony_ci <!-- local.html --> 98e41f4b71Sopenharmony_ci <!DOCTYPE html> 99e41f4b71Sopenharmony_ci <html> 100e41f4b71Sopenharmony_ci <body> 101e41f4b71Sopenharmony_ci <p>Hello World</p> 102e41f4b71Sopenharmony_ci </body> 103e41f4b71Sopenharmony_ci </html> 104e41f4b71Sopenharmony_ci ``` 105e41f4b71Sopenharmony_ci 106e41f4b71Sopenharmony_ci- Code of the **local1.html** page: 107e41f4b71Sopenharmony_ci 108e41f4b71Sopenharmony_ci ```html 109e41f4b71Sopenharmony_ci <!-- local1.html --> 110e41f4b71Sopenharmony_ci <!DOCTYPE html> 111e41f4b71Sopenharmony_ci <html> 112e41f4b71Sopenharmony_ci <body> 113e41f4b71Sopenharmony_ci <p>This is local1 page</p> 114e41f4b71Sopenharmony_ci </body> 115e41f4b71Sopenharmony_ci </html> 116e41f4b71Sopenharmony_ci ``` 117e41f4b71Sopenharmony_ci 118e41f4b71Sopenharmony_ci 119e41f4b71Sopenharmony_ci## Loading HTML Rich Text Data 120e41f4b71Sopenharmony_ci 121e41f4b71Sopenharmony_ciThe **Web** component provides the [loadData()](../reference/apis-arkweb/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. 122e41f4b71Sopenharmony_ci 123e41f4b71Sopenharmony_ci 124e41f4b71Sopenharmony_ci 125e41f4b71Sopenharmony_ci```ts 126e41f4b71Sopenharmony_ci// xxx.ets 127e41f4b71Sopenharmony_ciimport { webview } from '@kit.ArkWeb'; 128e41f4b71Sopenharmony_ciimport { BusinessError } from '@kit.BasicServicesKit'; 129e41f4b71Sopenharmony_ci 130e41f4b71Sopenharmony_ci@Entry 131e41f4b71Sopenharmony_ci@Component 132e41f4b71Sopenharmony_cistruct WebComponent { 133e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 134e41f4b71Sopenharmony_ci 135e41f4b71Sopenharmony_ci build() { 136e41f4b71Sopenharmony_ci Column() { 137e41f4b71Sopenharmony_ci Button('loadData') 138e41f4b71Sopenharmony_ci .onClick(() => { 139e41f4b71Sopenharmony_ci try { 140e41f4b71Sopenharmony_ci // Upon button clicking, call loadData to load HTML rich text data. 141e41f4b71Sopenharmony_ci this.controller.loadData( 142e41f4b71Sopenharmony_ci "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>", 143e41f4b71Sopenharmony_ci "text/html", 144e41f4b71Sopenharmony_ci "UTF-8" 145e41f4b71Sopenharmony_ci ); 146e41f4b71Sopenharmony_ci } catch (error) { 147e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 148e41f4b71Sopenharmony_ci } 149e41f4b71Sopenharmony_ci }) 150e41f4b71Sopenharmony_ci // When creating a Web component, set the default network page to be loaded to www.example.com. 151e41f4b71Sopenharmony_ci Web({ src: 'www.example.com', controller: this.controller }) 152e41f4b71Sopenharmony_ci } 153e41f4b71Sopenharmony_ci } 154e41f4b71Sopenharmony_ci} 155e41f4b71Sopenharmony_ci``` 156e41f4b71Sopenharmony_ci 157e41f4b71Sopenharmony_ci## Dynamically Creating Web Components 158e41f4b71Sopenharmony_ci**Web** components can be created with commands. Components created in this mode are not immediately mounted to the component tree, that is, they are not presented to users (their state is **Hidden** or **InActive**). You can dynamically mount the components as required in subsequent use. It is recommended that the number of **Web** instances started in the background be less than or equal to 200. 159e41f4b71Sopenharmony_ci 160e41f4b71Sopenharmony_ci```ts 161e41f4b71Sopenharmony_ci// Carrier ability 162e41f4b71Sopenharmony_ci// EntryAbility.ets 163e41f4b71Sopenharmony_ciimport { createNWeb } from "../pages/common" 164e41f4b71Sopenharmony_cionWindowStageCreate(windowStage: window.WindowStage): void { 165e41f4b71Sopenharmony_ci windowStage.loadContent('pages/Index', (err, data) => { 166e41f4b71Sopenharmony_ci // Dynamically create a Web component (UIContext needs to be passed in). The component can be created at any time after loadContent is called. 167e41f4b71Sopenharmony_ci createNWeb("https://www.example.com", windowStage.getMainWindowSync().getUIContext()); 168e41f4b71Sopenharmony_ci if (err.code) { 169e41f4b71Sopenharmony_ci return; 170e41f4b71Sopenharmony_ci } 171e41f4b71Sopenharmony_ci }); 172e41f4b71Sopenharmony_ci} 173e41f4b71Sopenharmony_ci``` 174e41f4b71Sopenharmony_ci```ts 175e41f4b71Sopenharmony_ci// Create a NodeController instance. 176e41f4b71Sopenharmony_ci// common.ets 177e41f4b71Sopenharmony_ciimport { UIContext, NodeController, BuilderNode, Size, FrameNode } from '@kit.ArkUI'; 178e41f4b71Sopenharmony_ciimport { webview } from '@kit.ArkWeb'; 179e41f4b71Sopenharmony_ci 180e41f4b71Sopenharmony_ci// @Builder contains the specific content of the dynamically created component. 181e41f4b71Sopenharmony_ci// Data is an input parameter of encapsulation class. 182e41f4b71Sopenharmony_ciclass Data{ 183e41f4b71Sopenharmony_ci url: string = "https://www.example.com"; 184e41f4b71Sopenharmony_ci controller: WebviewController = new webview.WebviewController(); 185e41f4b71Sopenharmony_ci} 186e41f4b71Sopenharmony_ci 187e41f4b71Sopenharmony_ci@Builder 188e41f4b71Sopenharmony_cifunction WebBuilder(data:Data) { 189e41f4b71Sopenharmony_ci Column() { 190e41f4b71Sopenharmony_ci Web({ src: data.url, controller: data.controller }) 191e41f4b71Sopenharmony_ci .width("100%") 192e41f4b71Sopenharmony_ci .height("100%") 193e41f4b71Sopenharmony_ci } 194e41f4b71Sopenharmony_ci} 195e41f4b71Sopenharmony_ci 196e41f4b71Sopenharmony_cilet wrap = wrapBuilder<Data[]>(WebBuilder); 197e41f4b71Sopenharmony_ci 198e41f4b71Sopenharmony_ci// NodeController is used to control and feed back the behavior of the corresponding node in the NodeContainer. It must be used together with NodeContainer. 199e41f4b71Sopenharmony_ciexport class myNodeController extends NodeController { 200e41f4b71Sopenharmony_ci private rootnode: BuilderNode<Data[]> | null = null; 201e41f4b71Sopenharmony_ci // This function must be overridden. It is used to build the number of nodes and return the number of nodes mounted to the corresponding NodeContainer. 202e41f4b71Sopenharmony_ci // Call it when the NodeContainer is created or call rebuild() to refresh. 203e41f4b71Sopenharmony_ci makeNode(uiContext: UIContext): FrameNode | null { 204e41f4b71Sopenharmony_ci console.log(" uicontext is undefined : "+ (uiContext === undefined)); 205e41f4b71Sopenharmony_ci if (this.rootnode != null) { 206e41f4b71Sopenharmony_ci // Return the FrameNode. 207e41f4b71Sopenharmony_ci return this.rootnode.getFrameNode(); 208e41f4b71Sopenharmony_ci } 209e41f4b71Sopenharmony_ci // Return null to detach the dynamic component from the bound node. 210e41f4b71Sopenharmony_ci return null; 211e41f4b71Sopenharmony_ci } 212e41f4b71Sopenharmony_ci // Called when the layout size changes. 213e41f4b71Sopenharmony_ci aboutToResize(size: Size) { 214e41f4b71Sopenharmony_ci console.log("aboutToResize width : " + size.width + " height : " + size.height ); 215e41f4b71Sopenharmony_ci } 216e41f4b71Sopenharmony_ci 217e41f4b71Sopenharmony_ci // Called when the NodeContainer bound to the controller is about to appear. 218e41f4b71Sopenharmony_ci aboutToAppear() { 219e41f4b71Sopenharmony_ci console.log("aboutToAppear"); 220e41f4b71Sopenharmony_ci } 221e41f4b71Sopenharmony_ci 222e41f4b71Sopenharmony_ci // Called when the NodeContainer bound to the controller is about to disappear. 223e41f4b71Sopenharmony_ci aboutToDisappear() { 224e41f4b71Sopenharmony_ci console.log("aboutToDisappear"); 225e41f4b71Sopenharmony_ci } 226e41f4b71Sopenharmony_ci 227e41f4b71Sopenharmony_ci // This function is a custom function and can be used as an initialization function. 228e41f4b71Sopenharmony_ci // Initialize BuilderNode through UIContext, and then initialize the content in @Builder through the build API in BuilderNode. 229e41f4b71Sopenharmony_ci initWeb(url:string, uiContext:UIContext, control:WebviewController) { 230e41f4b71Sopenharmony_ci if(this.rootnode != null) 231e41f4b71Sopenharmony_ci { 232e41f4b71Sopenharmony_ci return; 233e41f4b71Sopenharmony_ci } 234e41f4b71Sopenharmony_ci // Create a node. UIContext is required. 235e41f4b71Sopenharmony_ci this.rootnode = new BuilderNode(uiContext); 236e41f4b71Sopenharmony_ci // Create a dynamic Web component. 237e41f4b71Sopenharmony_ci this.rootnode.build(wrap, { url:url, controller:control }); 238e41f4b71Sopenharmony_ci } 239e41f4b71Sopenharmony_ci} 240e41f4b71Sopenharmony_ci// Create a map to save the required NodeController. 241e41f4b71Sopenharmony_cilet NodeMap:Map<string, myNodeController | undefined> = new Map(); 242e41f4b71Sopenharmony_ci// Create a map to save the required WebViewController. 243e41f4b71Sopenharmony_cilet controllerMap:Map<string, WebviewController | undefined> = new Map(); 244e41f4b71Sopenharmony_ci 245e41f4b71Sopenharmony_ci// UIContext is required for initialization and needs to be obtained from the ability. 246e41f4b71Sopenharmony_ciexport const createNWeb = (url: string, uiContext: UIContext) => { 247e41f4b71Sopenharmony_ci // Create a NodeController instance. 248e41f4b71Sopenharmony_ci let baseNode = new myNodeController(); 249e41f4b71Sopenharmony_ci let controller = new webview.WebviewController() ; 250e41f4b71Sopenharmony_ci // Initialize the custom Web component. 251e41f4b71Sopenharmony_ci baseNode.initWeb(url, uiContext, controller); 252e41f4b71Sopenharmony_ci controllerMap.set(url, controller) 253e41f4b71Sopenharmony_ci NodeMap.set(url, baseNode); 254e41f4b71Sopenharmony_ci} 255e41f4b71Sopenharmony_ci// Customize the API for obtaining the NodeController. 256e41f4b71Sopenharmony_ciexport const getNWeb = (url : string) : myNodeController | undefined => { 257e41f4b71Sopenharmony_ci return NodeMap.get(url); 258e41f4b71Sopenharmony_ci} 259e41f4b71Sopenharmony_ci``` 260e41f4b71Sopenharmony_ci```ts 261e41f4b71Sopenharmony_ci// Use the Page page of the NodeController. 262e41f4b71Sopenharmony_ci// Index.ets 263e41f4b71Sopenharmony_ciimport { getNWeb } from "./common" 264e41f4b71Sopenharmony_ci@Entry 265e41f4b71Sopenharmony_ci@Component 266e41f4b71Sopenharmony_cistruct Index { 267e41f4b71Sopenharmony_ci build() { 268e41f4b71Sopenharmony_ci Row() { 269e41f4b71Sopenharmony_ci Column() { 270e41f4b71Sopenharmony_ci // NodeContainer is used to bind to the NodeController. A rebuild call triggers makeNode. 271e41f4b71Sopenharmony_ci // The Page page is bound to the NodeController through the NodeContainer API to display the dynamic component. 272e41f4b71Sopenharmony_ci NodeContainer(getNWeb("https://www.example.com")) 273e41f4b71Sopenharmony_ci .height("90%") 274e41f4b71Sopenharmony_ci .width("100%") 275e41f4b71Sopenharmony_ci } 276e41f4b71Sopenharmony_ci .width('100%') 277e41f4b71Sopenharmony_ci } 278e41f4b71Sopenharmony_ci .height('100%') 279e41f4b71Sopenharmony_ci } 280e41f4b71Sopenharmony_ci} 281e41f4b71Sopenharmony_ci 282e41f4b71Sopenharmony_ci``` 283e41f4b71Sopenharmony_ci## Samples 284e41f4b71Sopenharmony_ci 285e41f4b71Sopenharmony_ciThe following samples are provided to help you better understand how to develop the **Web** component: 286e41f4b71Sopenharmony_ci 287e41f4b71Sopenharmony_ci- [Browser (ArkTS) (Full SDK) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser) 288
