logo标签列表

如何标记电话号码？

htmlmarkupurl-schemephone-number
503

我希望在HTML文档中将电话号码标记为可拨打链接。我已经阅读了微格式的方法，并且知道tel:方案是标准的，但实际上几乎没有实现。

据我所知，Skype定义了skype:和callto:，后者已经有了一定的流行度。我认为其他公司可能有其他方案或跟随callto:的列车。

如何最佳地标记电话号码，以便尽可能多的使用VoIP软件的人只需点击链接即可进行通话？

奖励问题：有人知道像美国的911或德国的110这样的紧急号码是否存在问题吗？

更新： Microsoft NetMeeting在WinXP下接受callto:方案。 这个问题建议，Microsoft Office Communicator将处理tel:方案，但不是callto:方案。太好了，Redmond！

更新2：两年半后现在。似乎归结为您想要使用号码做什么。在移动上下文中，tel:是最好的选择。针对桌面，如果您认为用户更喜欢Skype（callto:），或者更有可能安装类似Google Voice（tel：）的东西，则取决于您。我个人的意见是，如果不确定，请使用tel:（与@Sidnicious的答案一致）。

更新3：用户@rybo111指出，Chrome中的Skype现在已经跟随tel:方案。我无法验证这一点，因为没有同时拥有两台电脑，但如果确实如此，这意味着我们终于有了一个胜利者：tel:

1
不幸的是，这似乎取决于您的供应商（VoiP，手机公司或其他）。这可能会收费用于800号码。 - Boldewyn
1
我在Chrome中使用Google语音，但它无法识别tel: URI。我仍然坚持使用callto:和电话号码的显示，因为移动电话浏览器应该会自动检测到该号码。 - Old Pro
6
标题可能有些误导，实际上这个问题是关于“电话号码应该使用哪种URL格式”，而不是如何标记它们。 - Raedwald
1
当使用Chrome和tel:时，Skype会被提示，因此您最好删除关于Skype使用callto:的评论。 - rybo111
1
请问您能否尝试将您的问题更新编辑为相应的答案呢？这样会更加清晰明了。 - idmean
显示剩余6条评论
14个回答
542

tel:方案在20世纪90年代末得到使用，并在2000年初有了RFC 2806的文档（该文档已被更全面的RFC 3966所取代）。目前，tel: 仍在不断改进。支持iPhone上的tel:并非一项随意决定。

callto:虽然被Skype支持，但并非标准，除非专门针对Skype用户，否则应避免使用。

我会在你的页面上开始包含正确格式的tel: URI（无需检测用户代理），等待世界其他手机的跟进 :)。

示例：

<a href="tel:+18475555555">1-847-555-5555</a>

感谢您提供详细的答案！自从我提出这个问题以来，我也很想采用这种方法。使用标准并告诉抱怨的人，他们使用了不好的应用程序/工具。虽然如果这是您的客户，这会变得困难，但我认为您是正确的。如果我必须考虑Skype用户，我将采用我的JavaScript解决方案，反其道而行之。 - Boldewyn
1
现在是2014年，Tel: 现在为Skype工作。但是如果您想要启动与Skype回声/声音测试服务的通话，链接将会是<a href="skype:echo123?call">Call the Skype Echo / Sound Test Service</a>，链接地址为https://msdn.microsoft.com/en-us/library/office/dn745878#sectionSection0 - OzBob
4
有人尝试过href="tel://1-555-555-5555"这种格式吗？Tutsplus的人员推荐使用它，链接在http://code.tutsplus.com/tutorials/mobile-web-quick-tip-phone-number-links--mobile-7667。 - Adriano
2
根据我的经验，使用tel标签时，Skype需要在号码前加上国家代码和+号（例如英国号码为“+44”），以便正确解析号码。否则，它只会打开Skype，而不会尝试拨号。 - ShaunUK
3
这个例子应该是不是这样的：<a href="tel:+18475555555">（请注意在1之前有个+号）？ - Stéphane
显示剩余2条评论
76

我的测试结果：

callto:

  • Nokia浏览器：没有反应
  • Google Chrome：要求运行Skype以拨打号码
  • Firefox：要求选择一个程序来拨打号码
  • IE：要求运行Skype以拨打号码

tel:

  • Nokia浏览器：正常工作
  • Google Chrome：没有反应
  • Firefox："Firefox不知道如何打开此网址"
  • IE：找不到网址
2
此外，Google Chrome在Android 4.2.2（Nexus 4）上的行为也是相同的。在后台运行Skype的Android版本甚至无法使callto：链接起作用。简而言之，如果您想针对移动设备进行目标定位，那么目前您实际上无法使用callto：链接。 - aendra
现在在Chrome 35上，您会看到这个弹出窗口。 - pec
在Chrome和Firefox（也许还有IE）中，您可以使用registerProtocolHandler为tel:前缀注册自己的Web服务。 - Ross Rogers
你可以配置你的（非移动）浏览器调用另一个程序来处理“tel:” URI方案。我在Firefox上这样做了，它可以工作（但我在实际应用中并没有发现“tel:” URI方案...）。 - ysdx
callto:链接的行为方式相同，但由于这是Skype专有的，应该避免使用。 - interDist
显示剩余4条评论
45

最好的方法是从tel:开始，这对所有手机都有效。

然后输入此代码，仅在桌面上运行，并且仅在单击链接时运行。

我正在使用http://detectmobilebrowsers.com/来检测移动浏览器，您可以使用任何您喜欢的方法。

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

基本上，你包含了所有的选项。

tel：在所有手机上都可以使用，用于打开拨号器并输入号码。

callto：在计算机上可以在Firefox、Chrome等浏览器中使用，用于连接Skype。

是的，在Android上这个--callto:根本不起作用（请参见我在Murat答案下的评论），而tel:在桌面上也不太起作用。真的很不幸。 - aendra
1
哎呀，很遗憾，快速的 jsfiddle 似乎也无法让它工作... http://jsfiddle.net/tchalvakspam/gVZYt/3/ - Kzqai
在Mac 10.8上使用Seamonkey 2.20，在wordpress主题的header.php文件中的<body <?php body_class(); ?>>代码下方进行工作。 - om01
callto: 在 Mac 上的 Chrome 中无法工作，而且版本是最新的。 - Ujjwal
遗憾的是，JQuery 1.9已经弃用了此功能。https://jquery.com/upgrade-guide/1.9/#jquery-browser-removed - Casebash
21
作为预期的，WebKit对tel:的支持也扩展到了Android移动浏览器上 - 供您参考。
10

我保留这个答案以作“历史”参考，但不再推荐使用。请参见上面@Sidnicious的答案和我的更新2。

由于看起来在callto和tel之间无法取舍，我想提供一个可能的解决方案，希望您的评论能让我重返正确的道路;-)

使用callto：，因为大多数桌面客户端都会处理它：

<a href="callto:0123456789">call me</a>

如果客户端是 iPhone，则替换链接：

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

你对这个解决方案有什么异议吗？最好从tel:开始吗？

可能iPhone也支持callto协议，但是苹果更喜欢tel，所以文档中提到的是tel。 - Jan Aagaard
5
看到我的回答。'callto:' 是一种专有的 URI 方案，因此我不会从那里开始。 - s4y
在Mac上，callto:在Chrome中没有起作用，而且版本是最新的。 - Ujjwal
这并不让我感到惊讶。当时给出答案的2009年，情况已经根本不同了。此外，您需要一个第三方程序来注册callto:方案，比如Skype。Chrome本身不知道该怎么做。 - Boldewyn
9
2
所以，如果主要的目标用户是iPhone或iPod Touch（也许还有其他移动设备，我不确定...），你应该使用tel:。如果主要用户是普通的Web客户端（IE，Firefox等），使用Skype或其他VoIP软件，我认为callto:是最好的选择。 - awe
3

这对我很有帮助：

1. 制作符合标准的链接:

        <a href="tel:1500100900">

2. 当手机浏览器未检测到时，替换为Skype：

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

通过类选择要替换的链接似乎更有效率。

当然，它只适用于具有.phone类的锚点。

我将其放在函数if( !isMobile() ) { ...中，所以仅在检测到桌面浏览器时才触发。但这可能已经过时了...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}
检测移动浏览器的“正确”方法是检查不区分大小写的字符串“mobile”。 - Kevin Cox
3

RFC3966定义了电话号码的IETF标准URI，即“tel:”URI。这是标准。没有类似的标准规定“callto:”，这是Skype在允许注册URI处理程序以支持它的平台上的特定约定。

那就是Sidnicious所说的，没错。 - Boldewyn
2

我会使用建议的tel:。但为了更好地回退/不显示错误页面，我会使用类似于以下内容的东西（使用jquery）：

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

假设在userAgent字符串中带有移动标记的移动浏览器支持“tel:”协议。对于其余情况，我们将链接替换为“callto:”协议，以便在可用时回退到Skype。
为了抑制不支持的协议的错误页面，该链接针对一个新的隐藏iframe。
不幸的是，似乎无法检查url是否已成功加载到iframe中。似乎没有触发任何错误事件。
很好的使用了隐藏的iframe！ - Boldewyn
2

我在项目中使用了tel:。

在Chrome、Firefox、IE9&8、Chrome移动版和我的Sony Ericsson智能手机的移动浏览器上都能正常使用。

但是，在移动浏览器中callto:无法使用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接