iPhone Chrome中iframe内tel链接失效：是已知问题还是iOS限制？

这是iOS系统对第三方浏览器的限制，属于广泛存在的已知行为。

原因说明 #

iOS上的第三方浏览器（包括Chrome）均基于WebKit内核运行，且受到系统沙箱机制的严格限制。iframe中的tel:协议链接无法直接唤起系统拨号界面，而Safari作为系统默认浏览器，拥有更高的系统权限，不受此限制，因此能正常触发拨号。该限制从iOS 9版本开始生效，覆盖所有后续iOS版本的iPhone设备。

可行的解决方法 #

• 将tel链接移至主页面：直接在顶层页面而非iframe内提供拨号入口，绕过iframe的权限限制。
• 通过postMessage跨页面触发：让iframe页面向主页面发送拨号请求，由主页面执行跳转操作：
  iframe内的代码：

  document.querySelector('a[href^="tel:"]').addEventListener('click', function(e) {
    e.preventDefault();
    window.parent.postMessage({ action: 'dial', number: this.href }, '*');
  });
  

  主页面的代码：

  window.addEventListener('message', function(e) {
    if (e.data?.action === 'dial') {
      window.location.href = e.data.number;
    }
  });
  

• 在顶层窗口打开链接：通过JavaScript创建链接并指定_top目标，强制在主页面上下文执行跳转：

  document.querySelector('a[href^="tel:"]').addEventListener('click', function(e) {
    e.preventDefault();
    const telLink = document.createElement('a');
    telLink.href = this.href;
    telLink.target = '_top';
    document.body.appendChild(telLink);
    telLink.click();
    document.body.removeChild(telLink);
  });
  

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