494

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

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

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

额外问题：有谁知道紧急电话号码的并发症，例如美国的 911 或德国的 110？

干杯，

更新： Microsoft NetMeeting 采用callto:WinXP 下的方案。这个问题表明，Microsoft Office Communicator 将处理tel:方案而不是方案callto:。太好了，雷德蒙德！

更新 2：两年半后的现在。它似乎归结为你想用这个数字做什么。在移动环境中，tel:这是要走的路。如果您认为您的用户更多是 Skype 用户callto:（tel:我个人的意见是，当有疑问时使用tel:（与@Sidncious' 的回答一致）。

更新 3：用户 @rybo111 指出，Chrome 中的 Skype 同时也加入了tel:潮流。我无法验证这一点，因为手头没有机器，但如果这是真的，这意味着我们终于在这里有了赢家：tel:

4

14 回答 14

526

该tel:方案在 1990 年代后期使用，并在 2000 年初与RFC 2806一起记录（该方案在 2004 年被更彻底的RFC 3966淘汰）并继续得到改进。支持tel:iPhone 并不是一个武断的决定。

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

我？我只是开始tel:在您的页面上包含格式正确的 URI（无需嗅探用户代理），然后等待世界其他地方的手机赶上 :)。

示例：

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

于 2009-09-23T16:45:57.677 回答
76

我的测试结果：

拨电至：

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

电话：

  • 诺基亚浏览器：工作
  • 谷歌浏览器：没有任何反应
  • Firefox：“Firefox 不知道如何打开此网址”
  • IE：找不到网址
于 2012-06-14T23:14:46.380 回答
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:'));
    });
}

所以基本上你涵盖了所有的基础。

电话：适用于所有电话以打开带有号码的拨号器

callto：在您的计算机上工作以从 firefox、chrome 连接到 Skype

于 2012-06-21T17:26:56.267 回答
22

正如人们所期望的那样，WebKit 的支持也tel:扩展到了 Android 移动浏览器 - 仅供参考

于 2010-07-28T20:10:02.073 回答
10

我出于“历史”目的保留此答案，但不再推荐它。请参阅上面的@Sidncious' 答案和我的更新 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:？

于 2009-07-22T10:02:10.777 回答
9

Mobile Safari (iPhone & iPod Touch) 使用该tel:方案。

如何从 iPhone 上的网页拨打电话号码？

于 2009-07-22T09:20:21.330 回答
3

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

于 2013-05-20T20:18:34.447 回答
3

这对我有用：

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

        <a href="电话: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 )
    );
}
于 2013-06-04T14:38:31.813 回答
2

我用于tel:我的项目。

它适用于 Chrome、Firefox、IE9&8、Chrome 手机和我索尼爱立信智能手机上的移动浏览器。

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

于 2013-03-01T14:01:58.930 回答
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-string 中有移动标记的移动浏览器支持该tel:协议。对于其余部分，我们将链接替换为callto:协议，以便在可用的情况下回退到 Skype。

为了抑制不受支持的协议的错误页面，该链接将定位到一个新的隐藏 iframe。

不幸的是，似乎无法检查 url 是否已成功加载到 iframe 中。似乎没有触发任何错误事件。

于 2013-09-20T16:53:16.477 回答
1

由于callto:默认情况下由 Skype 支持（在 Skype 设置中设置），并且其他人也支持它，我建议使用callto:而不是skype:.

于 2009-07-22T09:29:53.073 回答
1

尽管 Appletel:在他们的文档中推荐 Mobile Safari，但目前（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:在桌面浏览器上更改的链接。

于 2011-04-18T04:52:26.533 回答
0

使用 jQuery，将页面上的所有美国电话号码替换为适当的callto:ortel:方案。

// 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 功能。

于 2014-09-20T19:23:19.207 回答
-1

我使用普通<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 < 11）的浏览器，可以使用 JavaScript 阻止点击（示例依赖于 Modernizr 和 jQuery）：

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}
于 2014-07-31T16:38:03.513 回答