NativeScript WebView中tel:链接点击无响应问题求助

这个问题挺常见的——NativeScript的WebView默认不会处理tel:这类非Web标准协议的链接，所以我们得手动拦截导航请求，再调用系统的拨号功能来解决。下面是具体的操作步骤：

步骤1：给WebView添加导航拦截事件 #

先修改你的XML布局，给WebView加上navigating事件监听，这样就能在页面跳转前拦截请求：

<Page class="page" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
    <GridLayout>
        <WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="https://xxxx.xxx" navigating="onWebViewNavigating" />
    </GridLayout>
</Page>

步骤2：实现导航拦截逻辑 #

接下来在对应的代码文件（.ts或.js）里写onWebViewNavigating函数，判断链接是否是tel:协议，然后取消WebView的默认跳转，转而调用系统拨号界面：

TypeScript版本 #

import { NavigatingEvent } from "@nativescript/core";
import { openUrl } from "@nativescript/core/utils";

export function onWebViewNavigating(args: NavigatingEvent) {
    const targetUrl = args.url;
    
    // 检测是否为tel协议链接
    if (targetUrl.startsWith("tel:")) {
        // 取消WebView的默认导航行为
        args.cancel = true;
        // 唤起系统拨号界面
        openUrl(targetUrl);
    }
}

JavaScript版本 #

const { openUrl } = require("@nativescript/core/utils");

exports.onWebViewNavigating = function(args) {
    const targetUrl = args.url;
    
    if (targetUrl.startsWith("tel:")) {
        args.cancel = true;
        openUrl(targetUrl);
    }
};

为什么这个方法能解决问题？ #

NativeScript的WebView组件默认只处理http://、https://这类标准Web协议的跳转，对于tel:、sms:这类系统级协议，它没有内置的处理逻辑。通过拦截navigating事件，我们可以接管这类链接的处理，用NativeScript提供的openUrl工具函数，让系统唤起对应的拨号应用。

额外说明 #

• 这个方式只会唤起系统拨号界面，用户需要手动点击拨号按钮，不需要额外申请权限。如果要实现自动拨号，Android端需要在AndroidManifest.xml中添加CALL_PHONE权限，iOS则不需要，但自动拨号的场景很少，一般唤起界面就足够了。
• 你可以用同样的逻辑处理sms:、mailto:这类其他协议的链接，只需要修改判断条件就行。

内容的提问来源于stack exchange，提问作者Hakim Nouas