使用jQuery检测设备是不是可以拨打电话（支持“tel://”协议）

Posted 2023-02-18

【中文标题】使用jQuery检测设备是不是可以拨打电话（支持“tel://”协议）

【英文标题】：Use jQuery to detect whether a device can make telephone calls (supports "tel://" protocol)使用jQuery检测设备是否可以拨打电话（支持“tel://”协议）

【发布时间】：2013-06-25 01:46:51

【问题描述】：

在我的网站中，我有几个这样的链接：

<a href="tel://[phone]" class="call">218.111.2222</a>

我想使用 jQuery（或其他方法）来确定设备是否支持拨打电话 / 使用 tel:// 协议。世界上有这样的方法吗？

我想使用一些方法来启用或禁用链接，因为当在桌面上单击时，我们会进入类似“Firefox 不知道如何打开此地址，因为协议 (tel) 与任何程序。”

目前，我正在嗅探用户代理并检测它是否是移动设备。但是，有没有更好/更准确的方法？类似于 jQuery 的 $.support.xx?

if ( (/iPhone|iPod|iPad|android|BlackBerry/).test(navigator.userAgent) != true )
    $(".call").attr("href", "#");

【问题讨论】：

***.com/questions/12141909/…

@Zenith 这个问题是相关的，但它没有讨论如何检测到何时包含tel: 链接将起作用。

@Zenith 谢谢，这很有帮助，但正如 Pointy 提到的，它实际上并没有具体检测是否支持 tel://。这就是我想要实现的目标 - 用户代理测试，我已经处理了......只是想知道/希望更准确地描述设备是否可以处理 tel://。

@SetSailMedia 对不起，我的意思是说也看一下侧边栏（顺便说一句，我没有投票关闭）。查看有关此问题的 cmets - ***.com/questions/16810356/…

这个问题也很相关：***.com/questions/2872090/…，它包含如何检查某些浏览器是否支持协议

【参考方案1】：

一些有限的解决方案可能是检测某些纯手机的一种方法。但并非所有可能：

(function(a) 
	window.isPhone = /\bi?Phone\b|(?=.*\bAndroid\b)(?=.*\bMobile\b)|(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i.test(a);
)(navigator.userAgent || navigator.vendor || window.opera);

console.info('This device %s make phone calls', window.isPhone ? 'is originally intended to' : 'probably can\'t' );

【参考方案2】：

在将非链接元素增强为电话链接之前，我使用以下方法检测其可能电话：

var probablyPhone = (
    (/iphone|android|ie|blackberry|fennec/).test
     (navigator.userAgent.toLowerCase())
     && 'ontouchstart' in document.documentElement
  );

我排除 ipod|ipad，因为我知道它们不是手机

这里的重点是可能 它当然会在某些平板电脑设备上返回 true，但这足以满足我在非手机触摸设备上的目的，链接无论如何都会失败 - 我主要只是想排除桌面，因此检测触摸事件。我想还检查设备宽度 也会缩小范围，但最终无法保证检测到我找到的能够拨打电话的移动设备。

【讨论】：

触摸事件可以通过软件方式模拟，Android、黑莓可以是平板、电视、玩具、收音机等。

是的，但我确实在将近 4 年前发布了该帖子，我不建议在不寻找最新解决方案的情况下遵循 3 年前的内容。

:) 我的评论不是对你的回答，而是对那些从今天开始阅读这篇文章的人。在那个日子里 - 这个解决方案已经足够完美了

【参考方案3】：

也许可以找到第一个带有 tel:// 的 href 实例并发布 ajax 调用。如果成功，它的 readyState 应该是 1，所以什么也不做。失败时，找到所有带有 tel:// 的 href，然后抓取内部 html 并替换 a 标签。

这更像是一个假设，未经检验。

另一个想法是大多数浏览器都对电话号码格式的字符串有自定义支持，如果您将电话号码放入电话号码中，则不必创建 a 标签，因为它应该自动完成。

【讨论】：

OK 有趣的做法只是省略了标签。我的印象是，即使它是自动添加的，这是最佳实践？我也会用 ajax 试试你的建议。

如果你在写一个成千上万的人会花时间阅读的答案之前至少进行最低限度的测试会更好：upsidedown-smile：（是的，这个评论会在你阅读后自动销毁，所以为其他人节省时间... :wink:)

由于可以基于个人计算机注册自定义协议，因此我无法测试所有场景。有人可能已经在他们的计算机上注册了 tel://，在这种情况下，ajax 请求将返回 1 的 readyState。但是，upvoting 确实允许人们过滤可能的答案以找到最佳解决方案。在测试场景时，我已经在台式机/平板电脑上将它与其他自定义协议（不是 tel://）一起使用。

【参考方案4】：

我不确定是 Android 还是 BlackBerry，但 ios 会自动获取电话号码并将它们包装起来，如下所示：<a href="tel:xxx">xxx</a>...所以你可以在某个地方隐藏一个包含电话号码的 <div>，例如 1 -800-555-5555，然后，在页面加载时执行以下操作：

var isTelephone = $("a[href*='tel:']").length > 0;

这可能会或可能不会移植到其他平台，您必须尝试一下。

【讨论】：

Android 似乎假定一串数字是一个电话号码，并在点击时尝试拨打它

我知道我来晚了，但我发现this article 讨论了哪些格式可以被哪些类型的手机识别。您需要为隐藏的<div> 号码选择一种 Android 和 iPhone 都可以识别的格式，否则您的工作将是徒劳的！

这似乎不起作用。任何人都可以创建一个可以正常工作的测试页面吗？ Android 上的 Google Chrome 似乎忽略了 <div>，即使它没有隐藏，即使标题中有 <meta name="format-detection" content="telephone=yes"> 标签。

聪明的破解。但是，如果您的页面明确创建tel: 链接，则应始终通过元标记关闭电话格式检测。我发现 UserAgent 检测在所有浏览器和设备中都更加可靠且面向未来。

Skype 或其他类似软件可能是“tel:”协议的处理程序，所以这种方式不太好。通常在安装 Skype 时，它​​还会安装一些浏览器扩展，将几乎所有数字序列转换为“tel:”链接。