网页发布后JS调用window.open唤起tel协议拨号盘失效问题

问题表现 #

• 业务逻辑：用户扫描二维码后跳转至携带位置参数的网页，页面加载后查询内置HTML表格匹配对应区域的危机热线号码，通过JS唤起系统电话拨号盘
• 故障现象：浏览器控制台手动执行功能完全正常，参数解析、表格匹配返回的号码均通过console日志验证无误；正式发布后仅拨号唤起环节失效，其余逻辑运行无异常

关联代码 #

LaunchCrisisLine();

function LaunchCrisisLine() {
  // 读取URL位置参数
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const location = urlParams.get('location');
  console.log(location); 
  
  var input, filter, table, tr, td, i, txtValue;
  input = location; 
  if(input != null){
    filter = input.toUpperCase();
    table = document.getElementById("crisisLineTable");
    tr = table.getElementsByTagName("tr");

    // 遍历表格匹配对应位置的热线号码
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      td2 = tr[i].getElementsByTagName("td")[2];
      if (td) {
        txtValue = td.textContent || td.innerText;
        crisisLine = td2.getElementsByTagName('a')[0].href;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          window.open(crisisLine); 
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}

故障成因 #

• 浏览器安全策略拦截：所有现代移动端浏览器（含各App内置webview）均有强制安全限制：非用户主动交互（点击、触摸等真实操作）触发的tel:/sms:等特殊协议跳转，会被静默拦截，控制台不会抛出任何报错。手动在控制台执行代码属于用户主动操作，符合策略要求可正常唤起；页面加载完成后自动执行的代码无用户交互关联，直接被拦截。
• 扫码场景webview限制更严格：二维码扫描后通常在微信、支付宝、系统相机内置webview中打开页面，这类容器对页面加载阶段的协议跳转限制比普通浏览器更严格，多数会直接禁止无交互的拨号唤起。
• 代码本身的兼容问题：
  • 变量未声明：td2、crisisLine未做变量声明，部分开启严格模式的运行环境会直接抛出异常中断执行，控制台测试时因全局变量污染不会触发该问题
  • 重复触发弹窗：如果表格匹配到多条符合条件的记录，会连续触发多次window.open，会被浏览器判定为恶意弹窗全部拦截
  • API兼容性差：window.open设计用于打开新窗口，触发拦截的概率远高于页面跳转，对tel:协议的兼容性差

修复方案 #

• 取消页面加载自动唤起逻辑，页面完成表格匹配后，展示匹配到的热线信息和明显的「一键拨打」按钮，在按钮的点击事件回调中触发拨号。不要尝试用脚本模拟点击绕过限制，所有现代浏览器均可识别脚本触发的虚假交互，依然会拦截请求。
• 替换拨号触发方式，使用window.location.href = 'tel:对应号码'替代window.open，降低拦截概率。
• 补全所有变量声明，表格遍历匹配到第一条符合要求的记录后即可终止循环，避免重复触发拨号。

参考实现片段：

let matchedCrisisLine = '';
// 先完成表格匹配逻辑，拿到正确号码
function initPage() {
  // ...原参数解析、表格遍历逻辑，匹配到号码后赋值给matchedCrisisLine，展示拨打按钮
  const callBtn = document.getElementById('callBtn');
  callBtn.addEventListener('click', () => {
    // 真实用户点击事件内触发，不会被拦截
    window.location.href = matchedCrisisLine;
  })
}
// 页面加载完成后执行初始化，不直接触发拨号
window.addEventListener('DOMContentLoaded', initPage);

注：部分安卓系统定制webview要求tel:号码内不能包含特殊符号、空格，需提前对取到的号码做格式清洗，避免格式错误导致唤起失败。

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