Blazor手机App中tel协议锚点无法唤起拨号应用如何解决

问题核心原因：Blazor默认会拦截站内所有<a>标签的跳转行为，交由自身路由系统处理单页导航，tel:这类系统特殊协议链接会被直接拦截，无法传递给移动端操作系统触发拨号。

方案1：零代码修改（优先尝试） #

给现有a标签新增target="_blank"属性即可，Blazor识别到带target属性的链接会跳过自身路由拦截，直接交给系统处理：

<a href="tel:@NavMenu.contact.Mobile" target="_blank">@NavMenu.contact.Mobile</a>

绝大多数场景下添加这一个属性就能正常唤起拨号。

方案2：少量C#代码实现（方案1无效时使用） #

使用Blazor内置的导航工具强制触发原生跳转，不需要额外写JS，复制代码即可使用：

1. 在当前razor文件的最顶部，添加导航服务注入：

@inject NavigationManager NavManager

2. 替换原有a标签代码：

<a href="#" @onclick="() => NavManager.NavigateTo($"tel:{NavMenu.contact.Mobile}", forceLoad: true)">
    @NavMenu.contact.Mobile
</a>

代码里的forceLoad: true参数是核心，作用是告知Blazor不要拦截本次导航，直接交由系统处理，系统识别到tel协议后会自动唤起拨号应用。

方案3：JS兜底方案（前两种方案均无效时使用） #

完全绕开Blazor的导航拦截逻辑，用原生JS触发跳转：

1. 打开项目下wwwroot/index.html文件，在页面底部所有已有script标签附近，添加如下JS函数：

function triggerCall(phoneNum) {
    window.location.href = "tel:" + phoneNum;
}

2. 在当前razor文件顶部注入JS运行时服务：

@inject IJSRuntime JS

3. 替换原有a标签，添加对应点击方法：

<a href="#" @onclick="MakeCall">@NavMenu.contact.Mobile</a>

@code {
    private async Task MakeCall()
    {
        await JS.InvokeVoidAsync("triggerCall", NavMenu.contact.Mobile);
    }
}

避坑提示 #

• 存储的电话号码尽量使用纯数字格式，部分安卓系统的WebView无法识别带横杠、括号、空格等特殊符号的tel协议链接，会出现点击无反应的情况
• 如果是MAUI Blazor/Hybrid模式开发，默认配置已支持tel协议跳转，若自行修改过WebView导航配置，需要将tel协议加入允许跳转的白名单。

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