HarmonyOS 鸿蒙Next中H5 <a>标签href属性设置tel:10086，点击跳转空白页

HarmonyOS 鸿蒙Next中H5 标签href属性设置tel:10086，点击跳转空白页 安卓ios都支持直接跳转打电话，为啥鸿蒙不行啊？

4 回复

可以通过Web组件的onLoadIntercept回调拦截“tel://”链接跳转，调用ArkTS API拉起对应应用。示例代码如下：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { call } from '@kit.TelephonyKit';
import { common, Want } from '@kit.AbilityKit';

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

  build() {
    Column() {
      Web({ src: $rawfile('call.html'), controller: this.webviewController })
        .onLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            // 判断链接是否为拨号链接
            if (url.indexOf('tel://') === 0) {
              // 跳转拨号界面
              call.makeCall(url.substring(6), (err) => {
                if (!err) {
                  console.info('make call succeeded.');
                } else {
                  console.error(`make call fail, err is: ${err}`);
                }
              });
              return true;
            }
            // 判断链接是否为发短信链接
            if (url.indexOf('sms:') === 0) {
              // 跳转到短信编辑界面
              let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
              let want: Want = {
                bundleName: 'com.ohos.mms',
                action: 'ohos.want.action.viewData',
                uri: url,
              }
              context.startAbility(want).then((data) => {
                console.info(`Success, ${data}`);
              }).catch(() => {
                console.error('error');
              });
              return true;
            }
            // 判断链接是否为发邮件链接
            if (url.indexOf('mailto:') === 0) {
              // 跳转到邮件应用
              let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
              let want: Want = {
                action: 'ohos.want.action.sendToData',
                uri: url
              }
              context.startAbility(want).then((data) => {
                console.info(`Success, ${data}`);
              }).catch(() => {
                console.error('error');
              });
              return true;
            }
          }
          return false;
        })
    }
  }
}

<!-- call.html -->
<!DOCTYPE html>
<html>
  <body>
    <div>
      <a href="tel://xxx">拨打电话</a>
      <a href="sms:xxx">发送信息</a>
      <a href="mailto:xxx@example">发送邮件</a>
    </div>
  </body>
</html>

【背景知识】

  • 跨应用跳转：Web组件可以实现点击前端页面超链接跳转到其他应用。
  • onLoadIntercept：当Web组件加载URL之前触发该回调，用于判断是否阻止此次访问。
  • makeCall：跳转到拨号界面，并显示待拨出的号码。
  • startAbility：启动一个Ability。使用callback异步回调。仅支持在主线程调用。

【约束与限制】 本示例支持API Version 19 Release及以上版本。 本示例支持HarmonyOS 5.1.1 Release SDK及以上版本。 本示例需要使用DevEco Studio 5.1.1 Release及以上版本进行编译运行。

更多关于HarmonyOS 鸿蒙Next中H5 <a>标签href属性设置tel:10086，点击跳转空白页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有解答在Web组件的onLoadIntercept事件中，检测请求URL是否以tel:开头；用户蚂蚁mpaas容器，不知道怎么拦截

在HarmonyOS鸿蒙Next中，H5页面的<a>标签使用href="tel:10086"时，点击跳转空白页是因为系统未识别电话协议处理程序。鸿蒙系统对H5自定义协议的支持机制与Android不同，需检查Web组件的协议处理配置。可尝试在WebView初始化时设置是否允许访问外部应用，或确认系统权限中电话相关权限是否开启。鸿蒙Next的Web引擎基于系统级安全策略，可能限制了自动拨号行为。

在HarmonyOS Next中，H5的<a>标签使用href="tel:10086"时跳转至空白页，通常是因为系统未默认配置电话协议处理程序。鸿蒙系统对这类协议的安全策略更严格，需要应用主动声明权限并调用系统电话接口。

建议在WebView组件中通过shouldOverrideUrlLoading方法拦截tel协议，使用鸿蒙的makeCall API实现拨号功能。示例代码：

webview.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("tel:")) {
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse(url));
            startActivity(intent);
            return true;
        }
        return false;
    }
});

同时需在config.json中声明ohos.permission.PLACE_CALL权限。这种实现方式既能保障系统安全性，又能保持与Android/iOS一致的用户体验。

回到顶部