如何标记电话号码？

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 Voice (tel:) 之类的东西，则以桌面为目标由您决定。我个人的看法是，如有疑问，请使用tel:（与@Sidnious 的回答一致）。

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

Answer 1

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

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

Answer 2

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

Answer 3

我出于“历史”目的保留此答案，但不再推荐它。请参阅上面的@Sidnious 回答和我的更新 2。

由于 callto 和 tel 之间看起来像是平局，我想提出一个可能的解决方案，希望你们的 cmets 能让我重回光明之路 ;-)

使用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 4

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 5

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

Answer 6

虽然 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 7

我的测试结果：

调用：

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

电话：

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

Answer 8

最好的办法是从 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

Answer 9

我在我的项目中使用了tel:。

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

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

Answer 10

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

Answer 11

这对我有用：

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

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 12

我会使用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 中。似乎没有触发任何错误事件。

Answer 13

我使用普通的<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

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

Answer 14

使用 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。