目录

How do I use the <a> tag to open HTML5 pages of the Web component?

Case 1: Redirecting to the ArkTS Page of the Application

Use onLoadIntercept of the Web component to listen to the Web component loading URL, and then determine whether to redirect to the native ArkTS page based on the callback result. If the value is true, use router for redirection.

The parameter can be obtained by obtaining the URL and performing string operations.

ArkTS page 1:

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Column() {
        Web({ src: $rawfile('hello.html'), controller: this.controller })
          .onLoadIntercept((event) => {
            if(event){
              let url = event.data.getRequestUrl();
              console.log(url);
              if(url.indexOf('native://') === 0){
                this.getUIContext().getRouter().pushUrl({ url : url.substring(9)})
                return true;
              }
            }
            return false;
          })
          .width('100%')
          .height('100%')
      }
      .layoutWeight(1)
    }
  }
}

ArkTS page 2:

@Entry
@Component
struct Second {
  build() {
    Column() {
      Text('This is the second page of this application')
    }
  }
}

HTML5 side:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
</head>
<body>
<div id="bg">
    hello world!<br>
    <a href="native://pages/Second">Jump to the second ads page of this application</a>
</div>
</body>
</html>

Case 2: Redirecting to the HTML5 Page of the Application

Use the relative path to locate the second HTML5 page.

HTML5 page 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
</head>
<body>
<div id="bg">
    hello world!<br>
    <a href="Second.html">Jump to the second H5 page of this application</a>
</div>
</body>
</html>

HTML5 page 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
</head>
<body>
<div id="bg">
    hello world
    <br>
    <br>
    I am the second H5 page of this application
</div>
</body>
</html>

Case 3: Redirecting to the System Application Page

Store the URL of the system application in the URL of the <a> tag, and use startAbility to open the system application.

ArkTS page:

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

function startSettingsInfo(context: common.UIAbilityContext,uri : string): void {
  let want: Want = {
    bundleName: 'com.huawei.hmos.settings',
    abilityName: 'com.huawei.hmos.settings.MainAbility',
    uri: uri
  };
  context.startAbility(want)
    .then(() => {
      // ...
    })
    .catch((err: BusinessError) => {
      console.error(`Failed to startAbility. Code: ${err.code}, message: ${err.message}`);
    });
}
@Entry
@Component
struct WebComponent {
  context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Column() {
        Web({ src: $rawfile('hello.html'), controller: this.controller })
          .onLoadIntercept((event) => {
            if(event){
              let url = event.data.getRequestUrl();
              console.log(url);
              if(url.indexOf('hmos://') === 0){
                startSettingsInfo(this.context,url.substring(7))
                return true;
              }
            }
            return false;
          })
          .width('100%')
          .height('100%')
      }
      .layoutWeight(1)
    }
  }
}

HTML5 side:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>

</head>
<body>
<div id="bg">
    hello world!<br>
    <a href="hmos://volume_settings">Jump to system application (taking sound and vibration as examples)</a>
</div>
</body>
</html>

Case 4: Redirecting to the Third-Party Application Page

Use onLoadIntercept of the Web component to monitor the Web component loading URL, and then determine whether to redirect to the third-party application based on the callback result. If the value is true, use startAbility for redirection.

ArkTS page:

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Column() {
        Web({ src: $rawfile('hello.html'), controller: this.controller })
          .onLoadIntercept((event) => {
            let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext; // UIAbilityContext
            let want: Want = {
              deviceId: '', // An empty DeviceId indicates that this device
              bundleName: '***', // BundleName of the third-party application you want to jump to
              moduleName: 'entry', // ModuleName is not mandatory
              abilityName: 'EntryAbility',
              parameters: {
                // Customize parameters to transmit page information
                router: 'index'
              }
            }
            context.startAbility(want).then(() => {
              console.log('success')
            }).catch((err: BusinessError) => {
              console.log('error:' + JSON.stringify(err))
            });
            return false;
          })
      }
      .layoutWeight(1)
    }

  }
}

HTML5 side:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<a  href="">Jump to third-party applications</a>
</body>
</html>