Question

我想在HTML文档中将电话号码标记为可调用链接。我已经阅读了the microformats approach，我知道，tel:方案是标准的，但实际上没有实现。

据我所知，Skype定义了skype:和callto:，后者已经获得了一些人气。我认为，其他公司有其他计划或跳上callto:列车。

标记电话号码的最佳做法是什么，以便尽可能多的人使用VoIP软件点击链接接听电话？

奖金问题：有没有人知道紧急号码的并发症，例如美国的911或德国的110？

干杯，

更新：Microsoft NetMeeting在WinXP下采用callto:个方案。 This question表示，Microsoft Office Communicator将处理tel:个计划，但不处理callto:个计划。太棒了，雷蒙德！

更新2：两年半以后。这似乎归结为你想用这个数字做什么。在移动环境中，tel:是最佳选择。如果您认为自己的用户更多是Skype用户（callto:），或者更有可能安装Google语音（tel:），则可以根据您的需求定位桌面。我的个人意见是，如果有疑问，请使用tel:（符合@Sidnicious的回答）。

更新3：用户@ rybo111指出，Chrome中的Skype同时加入tel:行列。我无法验证这一点，因为没有两台机器都在手边，但如果这是真的，那就意味着我们终于有了胜利者：

                                        tel:

Answer 1

tel:计划为used in the late 1990s并于2000年初与RFC 2806进行了记录（2004年更彻底的RFC 3966已废弃）和continues to be improved 。在iPhone上支持tel:并不是一个随意的决定。

callto:，虽然受Skype支持，不是标准，除非专门针对Skype用户，否则应该避免使用。

我吗？我刚刚开始在你的页面上包含格式正确的tel: URI（没有嗅探用户代理）并等待世界其他地方的手机赶上:)。

示例：

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

Answer 2

我的测试结果：

<强>致电第一

诺基亚浏览器：没有任何反应
谷歌浏览器：要求运行Skype来拨打号码
Firefox：要求选择一个程序来拨打号码
IE：要求运行Skype来拨打号码

<强>电话：

诺基亚浏览器：正常工作
谷歌浏览器：没有任何反应
Firefox：“Firefox不知道如何打开此网址”
IE：找不到网址

Answer 3

最好的选择是从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

Answer 4

正如人们所料，WebKit对tel:的支持也延伸到Android移动浏览器 - 仅供参考

Answer 5

我将此答案保留为“历史性”目的，但不再推荐它。请参阅上面的@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:开始吗？

Answer 6

Mobile Safari（iPhone和iPod Touch）使用tel:方案。

How do I dial a phone number from a webpage on iPhone?

Answer 7

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

Answer 8

这对我有用：

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 )
    );
}

Answer 9

我使用tel:作为我的项目。

它适用于我的索尼爱立信智能手机的Chrome，Firefox，IE9＆amp; 8，Chrome移动版和移动浏览器。

但是callto:在移动浏览器中不起作用。

Answer 10

我会使用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-string中具有移动标记的移动浏览器支持tel:协议。其余的我们用callto:协议替换链接，以便在可用的情况下回退到Skype。

要取消不受支持的协议的错误页面，该链接将定位到新的隐藏iframe。

不幸的是，如果网址已在iframe中成功加载，则似乎无法检查。似乎没有触发任何错误事件。

Answer 11

由于Skype默认支持callto:（在Skype设置中设置），而其他人也支持，我建议使用callto:而不是skype:。

Answer 12

虽然Apple在他们的Mobile Safari文档中推荐tel:，但目前（iOS 4.3）它只接受callto:。因此，我建议在通用网站上使用callto:，因为它适用于Skype和iPhone，我希望它也适用于Android手机。

更新（2013年6月）

这仍然是决定您希望网页提供什么的问题。在我的网站上，我提供tel:和callto:链接（后者标记为Skype），因为Mac上的桌面浏览器不会对tel:链接执行任何操作，而移动Android则不会使用callto:链接执行任何操作。即使使用Google Talk插件的Google Chrome也不会回复tel:个链接。尽管如此，我还是希望在桌面上提供这两个链接，以防有人在获取tel:链接在他们的计算机上工作时遇到麻烦。

如果网站设计规定我只提供一个链接，我会使用tel:链接，我会尝试在桌面浏览器上更改为callto:。

Answer 13

使用jQuery，使用相应的callto:或tel:方案替换页面上的所有美国电话号码。

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

感谢@jonas_jonas的想法。需要优秀的findAndReplaceDOMText function。

Answer 14

我使用普通的<a href="tel:+123456">12 34 56</a>标记，并通过pointer-events: none;

为桌面用户提供不可点击的链接

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

对于不支持指针事件（IE＆lt; 11）的浏览器，可以使用JavaScript阻止点击（示例依赖于Modernizr和jQuery）：

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}

如何标记电话号码？

14 个答案:

更新（2013年6月）