Loading Web Pages

Page 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.

To obtain network resources during page loading, configure the network access permission in the module.json5 file. For details, see Declaring Permissions in the Configuration File.

"requestPermissions":[
    {
      "name" : "ohos.permission.INTERNET"
    }
  ]

Loading Network Pages

You can specify the default network page to be loaded when creating a Web component. After the default network page is loaded, call 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().

In 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.

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // Upon button clicking, call loadUrl to redirect to www.example1.com.
            this.controller.loadUrl('www.example1.com');
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // When creating a Web component, set the default network page to be loaded to www.example.com.
      Web({ src: 'www.example.com', controller: this.controller });
    }
  }
}

LoadingWebPages.ets

Loading Local Pages

To reduce user waiting time in scenarios such as startup, redirection, and weak network, and save time for dynamic content loading, you can load local pages to optimize user experience.

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

Local 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() to change the displayed page of the Web component.

To reference a local CSS file when loading a local HTML file, perform the following steps:

<link rel="stylesheet" href="resource://rawfile/xxx.css">
<link rel="stylesheet" href="file:///data/storage/el2/base/haps/entry/cache/xxx.css">// Load the local CSS file in the sandbox path.

Local page file in the application's resources/rawfile directory:

Figure 1 Path of local page files

Application code:

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // Upon button clicking, call loadUrl to redirect to local1.html.
            this.controller.loadUrl($rawfile('local1.html'));
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // When creating a Web component, load the local.html file through $rawfile.
      Web({ src: $rawfile('local.html'), controller: this.controller });
    }
  }
}

LoadingLocalPages.ets

Code of the local.html page:

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

Code of the local1.html page:

<!-- local1.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>This is local1 page</p>
  </body>
</html>

Example of loading local page files in the sandbox:

Obtain the sandbox path through the constructed singleton object GlobalContext. You need to enable the fileAccess permission of the file system in the application.

export class GlobalContext {
  private constructor() {}
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

GlobalContext.ets

import { webview } from '@kit.ArkWeb';
import { GlobalContext } from './GlobalContext';

let url = 'file://' + GlobalContext.getContext().getObject('filesDir') + '/index.html';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
    // ···
      // Load the files in the sandbox.
      Web({ src: url, controller: this.controller })
      .fileAccess(true);
    }
  }
}

LoadLocalPageFileInSandboxPath_one.ets

Modify the EntryAbility.ets file.

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.

// xxx.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { webview } from '@kit.ArkWeb';
import { GlobalContext } from '../GlobalContext';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    // Data synchronization between the UIAbility component and UI can be implemented by binding filesDir to the GlobalContext object.
    GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
    console.info("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"));
  }
}

HTML file to be loaded:

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

Loading HTML Rich Text Data

The Web component provides the 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".

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // Upon button clicking, call loadData to load HTML rich text data.
            this.controller.loadData(
              '<html><body bgcolor=\'white\'>Source:<pre>source</pre></body></html>',
              'text/html',
              'UTF-8'
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      // When creating a Web component, set the default network page to be loaded to www.example.com.
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

LoadingHTMLRichTextData.ets

The Web component can load HTML strings using data urls.

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  htmlStr: string = 'data:text/html, <html><body bgcolor=\'white\'>Source:<pre>source</pre></body></html>';

  build() {
    Column() {
      // When creating a Web component, set the default network page to be loaded to htmlStr.
      Web({ src: this.htmlStr, controller: this.controller });
    }
  }
}

LoadLocalPageFileInSandboxPath_two.ets

Loading Local Resources Using the Resource Protocol

The resource protocol allows access to files in the application resource directory.

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct ResourceWebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('LoadResource')
        .onClick(() => {
          try {
            // Load the index1.html file in resources/rawfile using the resource protocol.
            this.controller.loadUrl('resource://rawfile/index1.html');
          } catch (error) {
            console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
          }
        })

      // When the component is created, use the resource protocol to load resources.
      Web({ src: 'resource://rawfile/index.html', controller: this.controller });
    }
  }
}

ResourceLoadPage.ets

Create the index.html file in src/main/resources/rawfile.

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

Create the index1.html file in src/main/resources/rawfile.

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

Samples

The following samples are provided to help you better understand how to develop Web component:

Browser (ArkTS) (Full SDK) (API9)