点击a标签tel:链接如何不刷新页面且正常触发拨号功能

之前的方案失效是因为e.preventDefault()会拦截a标签所有默认行为，包括页面跳转和tel协议的拨号唤起动作，只需要在阻止页面重载的同时手动触发拨号逻辑即可。

方案1：手动调用tel协议（首选，兼容性最优） #

直接通过window.location.assign触发tel协议，不会触发当前页面的卸载与重载，代码实现极简：

HTML代码（和原有代码一致） #

<a class="phone" href="tel:+11111111">+1 (1111) 111- 11</a>

JS绑定逻辑 #

document.querySelector('.phone').addEventListener('click', function(e) {
  // 阻止a标签默认跳转行为，避免页面重载
  e.preventDefault()
  // 手动触发tel协议唤起拨号应用
  window.location.assign(this.getAttribute('href'))
})

方案2：隐藏iframe兼容方案 #

如果需要兼容极旧版本的移动端浏览器，可以用动态创建隐藏iframe的方式实现，完全不会影响当前页面状态：

document.querySelector('.phone').addEventListener('click', function(e) {
  e.preventDefault()
  const telLink = this.getAttribute('href')
  // 创建隐藏iframe触发tel协议
  const callIframe = document.createElement('iframe')
  callIframe.src = telLink
  callIframe.style.display = 'none'
  document.body.appendChild(callIframe)
  // 拨号触发后移除无用节点
  setTimeout(() => document.body.removeChild(callIframe), 100)
})

注意事项 #

• 不要使用window.open触发tel链接，部分浏览器会将其识别为广告弹窗拦截，导致拨号失败
• 两种方案均支持所有主流移动端、桌面端浏览器，不会触发当前页面刷新
• 如果页面存在多个tel拨号链接，可以用事件委托统一绑定逻辑，减少重复代码

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