如何標記電話號碼？

Question

我想在 HTML 文檔中將電話號碼標記為可調用鏈接。 我已經閱讀了微格式方法，並且我知道tel:方案將是標准的，但實際上並沒有實現。

據我所知，Skype 定義了skype:和callto: ，后者已經流行起來。 我假設，其他公司要么有其他計划，要么跳上callto:火車。

標記電話號碼的最佳做法是什么，以便盡可能多的使用 VoIP 軟件的人只需單擊鏈接即可接聽電話？

獎勵問題：有誰知道緊急號碼的並發症，例如美國的 911 或德國的 110？

干杯，

更新： Microsoft NetMeeting 在 WinXP 下采用callto:方案。 這個問題表明，Microsoft Office Communicator 將處理tel:方案但不處理callto:方案。 太好了，雷德蒙德！

更新 2：兩年半后的現在。 它似乎歸結為你想用這個數字做什么。 在移動上下文中， tel:是必經之路。 如果您認為您的用戶更多的是 Skype 用戶 ( callto:或更有可能安裝 Google Voice ( tel: :) 之類的東西，那么針對台式機這取決於您。 我個人的意見是，如有疑問，請使用tel:與@Sidnicious 的回答一致）。

更新 3：用戶 @rybo111 指出，Chrome 中的 Skype 同時加入了tel:潮流。 我無法證實這一點，因為手邊沒有機器，但如果這是真的，那就意味着我們終於在這里有一個贏家： tel:

Answer 1

tel:方案在 1990 年代后期使用，並在 2000 年初與RFC 2806一起記錄（在 2004 年被更全面的RFC 3966淘汰）並繼續得到改進。 支持tel:在 iPhone 上並不是一個武斷的決定。

callto:雖然受 Skype 支持，但不是標准，除非專門針對 Skype 用戶，否則應避免使用。

我？ 我只是開始在您的頁面上包含格式正確的tel: URI（不嗅探用戶代理），然后等待世界其他地方的電話趕上:)。

示例：

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

Answer 2

我的測試結果：

撥電至：

• 諾基亞瀏覽器：沒有任何反應
• 谷歌瀏覽器：要求運行 skype 來撥打號碼
• Firefox：要求選擇一個程序來呼叫該號碼
• IE：要求運行 skype 來呼叫該號碼

電話：

• 諾基亞瀏覽器：工作
• 谷歌瀏覽器：沒有任何反應
• Firefox：“Firefox 不知道如何打開此 URL”
• 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:'));
    });
}

所以基本上你涵蓋了所有的基礎。

電話：適用於所有電話以使用號碼打開撥號器

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:方案。

如何從 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&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 字符串中帶有移動標記的移動瀏覽器支持tel:協議。 對於其余部分，我們將鏈接替換為callto:協議，以便在可用時回退到 Skype。

為了抑制不支持的協議的錯誤頁面，鏈接指向一個新的隱藏 iframe。

不幸的是，似乎無法檢查 url 是否已成功加載到 iframe 中。 似乎沒有觸發任何錯誤事件。

Answer 11

由於callto:是 skype 默認支持的（在 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 插件的谷歌瀏覽器也不會響應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 函數。

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 < 11），可以使用 JavaScript 阻止點擊（示例依賴於 Modernizr 和 jQuery）：

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