点击调用html

Uma*_*ana 46 html5 cross-browser modernizr

我想在我的网站上使用html5标签进行移动视图,当用户从移动设备点击此链接时,它会在给定的号码上拨打电话.

<p>Book now, call <a href="tel:01234567890">01234 567 890</a></p>
Run Code Online (Sandbox Code Playgroud)

当用户移动设备是非html5时,我该怎么做才能隐藏此链接..我已经通过了modenizer但似乎它不会检测到链接属性. http://www.tutorialspoint.com/html5/html5_modernizr.htm

有什么建议吗?此按钮仅在我的网站在移动设备上打开时出现,对于移动设备,我想在旧手机中打开时隐藏此链接.

Adr*_*tti 72

tl; dr在现代(2018)次做什么?假设tel:支持,使用它并忘记其他任何事情.


tel:URI方案RFC5431(以及sms:feed:,maps:,youtube:及其他)由处理的协议处理程序(如mailto:http:是).

它们与HTML5规范无关(它已经从90年代开始出现,并且第一次用RFC2806记录在2k中)然后你无法使用工具作为现代化来检查它们的支持.协议处理程序可以由应用程序安装(例如,Skype安装callto:具有相同含义和行为tel:但不是标准的协议处理程序),由浏览器本机支持或由网站本身安装(有一些限制).

HTML5添加的内容是支持安装基于Web的自定义协议处理程序(带有registerProtocolHandler()相关功能),简化了对isProtocolHandlerRegistered()功能支持的检查.

有一些简单的方法可以确定是否存在处理程序:" 如何检测浏览器的协议处理程序?".

总的来说,我的建议是:

  1. 如果您在移动设备上运行,那么您可以安全地假设tel:支持(是的,对于非常旧的设备不是这样,但IMO可以忽略它们).
  2. 如果JS不活跃则不执行任何操作.
  3. 如果您在桌面浏览器上运行,则可以使用链接帖子中的某种技术来确定它是否受支持.
  4. 如果tel:不支持,则更改链接以使用callto:并在3中重复检查desctibed .
  5. 如果tel:callto:不支持(或者 - 在桌面浏览器中 - 您无法检测到他们的支持),那么只需删除该链接替换URL中hrefjavascript:void(0)和(如果数字不在文本范围内重复)put,电话号码title.这里HTML5微数据不会帮助用户(只是搜索引擎).请注意,较新版本的Skype同时处理callto:tel:.

请注意(至少在最新的Windows版本上)总是有一个假的注册协议处理程序叫做App Picker(这个烦人的窗口让你选择你想要打开一个未知文件的应用程序).这可能会消失您的测试,因此如果您不想将Windows环境作为特殊情况处理,您可以简化此过程:

  1. 如果您在移动设备上运行,tel:则支持假设.
  2. 如果你在桌面上运行 然后替换tel:callto:.然后丢弃tel:或保持原样(假设有很好的机会安装Skype).

  • @Cody geo的完整规范:在[RFC5870](https://tools.ietf.org/html/rfc5870)中.geo:和maps:大致相同的_syntax_(即使它们用于不同的目的).快速[维基百科介绍](https://en.wikipedia.org/wiki/Geo_URI). (2认同)
  • 为了完整起见,tel:URI方案是[RFC3966](https://tools.ietf.org/html/rfc3966). (2认同)