HarmonyOS—Loading pages using web components

Page loading is the basic function of Web components. According to the source of page loading data, it can be divided into three common scenarios, including loading network pages, loading local pages, and loading rich text data in HTML format.

During page loading, if network resource acquisition is involved, ohos.permission.INTERNET network access permission needs to be configured.

Load web page

Developers can specify the default loaded network page when creating a Web component. After the default page is loaded, if the developer needs to change the network page displayed by this web component, he can load the specified network page by calling the loadUrl() interface.

In the following example, after the Web component loads the "www.example.com" page, the developer can change the page displayed by the Web component to "www.example1.com" through the loadUrl interface.

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent {
   
     webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
   
       Column() {
   
         Button('loadUrl')        .onClick(() => {
   
             try {
   
               // 点击按钮时，通过loadUrl，跳转到www.example1.com            this.webviewController.loadUrl('www.example1.com');          } catch (error) {
   
               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);          }        })      // 组件创建时，加载www.example.com      Web({ src: 'www.example.com', controller: this.webviewController})    }  }}

Load local page

By placing the local page file in the rawfile directory of the application, developers can specify the local page to be loaded by default when the Web component is created, and after the loading is completed, the page of the current Web component can be changed by calling the loadUrl() interface .

The following example shows how to load a local page file:

● Place resource files in the application's resources/rawfile directory. Figure 1 Resource file path

● Application side code

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent {
   
     webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
   
       Column() {
   
         Button('loadUrl')        .onClick(() => {
   
             try {
   
               // 点击按钮时，通过loadUrl，跳转到local1.html            this.webviewController.loadUrl($rawfile("local1.html"));          } catch (error) {
   
               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);          }        })      // 组件创建时，通过$rawfile加载本地文件local.html      Web({ src: $rawfile("local.html"), controller: this.webviewController })    }  }}

● local.html page code.

<!-- local.html --><!DOCTYPE html><html>  <body>    <p>Hello World</p>  </body></html>

Load text data in HTML format

Web components can load text data in HTML format through the loadData interface. When developers do not need to load the entire page, but only need to display some page fragments, this feature can be used to quickly load the page.

// xxx.etsimport web_webview from '@ohos.web.webview';
@Entry@Componentstruct WebComponent {
   
     controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
   
       Column() {
   
         Button('loadData')        .onClick(() => {
   
             try {
   
               // 点击按钮时，通过loadData，加载HTML格式的文本数据            this.controller.loadData(              '<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>',              'text/html',              'UTF-8'            );          } catch (error) {
   
               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);          }        })      // 组件创建时，加载www.example.com      Web({ src: 'www.example.com', controller: this.controller })    }  }}

Click to follow and read the original text for more information