Làm thế nào để đánh dấu số điện thoại?

Tôi muốn đánh dấu một số điện thoại là liên kết có thể gọi được trong một tài liệu HTML. Tôi đã đọc phương pháp vi định dạng và tôi biết rằng tel:chương trình này sẽ là tiêu chuẩn, nhưng hoàn toàn không được thực hiện theo nghĩa đen.

Skype định nghĩa, theo như tôi biết, skype:và callto:sau này đã trở nên phổ biến. Tôi giả sử rằng các công ty khác có kế hoạch khác hoặc nhảy lên callto:tàu.

Điều gì sẽ là một cách thực hành tốt nhất để đánh dấu số điện thoại, để càng nhiều người càng tốt với phần mềm VoIP có thể chỉ cần nhấp vào liên kết để nhận cuộc gọi?

Câu hỏi thưởng: Có ai biết về các biến chứng với các số khẩn cấp như 911 ở Mỹ hoặc 110 ở Đức không?

Chúc mừng

Cập nhật: Microsoft NetMeeting có các callto:chương trình trong WinXP. Câu hỏi này cho thấy, Microsoft Office Communicator sẽ xử lý các tel:chương trình nhưng không phải callto:là kế hoạch . Tuyệt vời, Redmond!

Cập nhật 2: Hai năm rưỡi sau. Nó dường như sôi sục với những gì bạn muốn làm với số. Trong bối cảnh di động, tel:là con đường để đi. Nhắm mục tiêu máy tính để bàn tùy thuộc vào bạn, nếu bạn nghĩ rằng người dùng của bạn là người Skype nhiều hơn ( callto:) hoặc nhiều khả năng sẽ có thứ gì đó giống như Google Voice ( tel:) được cài đặt. Ý kiến ​​cá nhân của tôi là, khi nghi ngờ sử dụng tel:(phù hợp với câu trả lời của @Sidnicious ').

Cập nhật 3: Người dùng @ rybo111 lưu ý rằng Skype trong Chrome đã nhảy vào tel:bandwagon. Tôi không thể xác minh điều này, vì không có máy nào có cả hai trong tay, nhưng nếu nó là sự thật, điều đó có nghĩa là cuối cùng chúng ta đã có một người chiến thắng ở đây:tel:

Các tel:chương trình được sử dụng trong cuối những năm 1990 và ghi nhận vào đầu năm 2000 với RFC 2806 (được lỗi thời bởi các chi tiết kỹ lưỡng- RFC 3966 vào năm 2004) và tiếp tục được cải thiện . Hỗ trợ tel:trên iPhone không phải là một quyết định tùy tiện.

callto:, trong khi được Skype hỗ trợ, không phải là một tiêu chuẩn và nên tránh trừ khi nhắm mục tiêu cụ thể đến người dùng Skype.

Tôi? Tôi chỉ bắt đầu bao gồm tel:các URI được định dạng chính xác trên các trang của bạn (mà không đánh hơi tác nhân người dùng) và đợi phần còn lại của điện thoại trên thế giới bắt kịp :).

Ví dụ :

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

Kết quả kiểm tra của tôi:

gọi tới:

• Trình duyệt Nokia: không có gì xảy ra
• Google Chrome: yêu cầu chạy skype để gọi số
• Firefox: yêu cầu chọn một chương trình để gọi số
• IE: yêu cầu chạy skype để gọi số

điện thoại:

• Trình duyệt Nokia: đang hoạt động
• Google Chrome: không có gì xảy ra
• Firefox: "Firefox không biết cách mở url này"
• IE: không thể tìm thấy url

Đặt cược tốt nhất là bắt đầu với tel: hoạt động trên tất cả các điện thoại di động

Sau đó đặt mã này, mã này sẽ chỉ chạy khi trên máy tính để bàn và chỉ khi nhấp vào liên kết.

Tôi đang sử dụng http://detectmobilebrowsers.com/ để phát hiện trình duyệt di động, bạn có thể sử dụng bất kỳ phương pháp nào bạn thích

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

Vì vậy, về cơ bản bạn bao gồm tất cả các căn cứ của bạn.

tel: hoạt động trên tất cả các điện thoại để mở trình quay số với số

callto: hoạt động trên máy tính của bạn để kết nối với skype từ firefox, chrome

Như mọi người mong đợi, hỗ trợ của WebKit cũng tel:mở rộng cho trình duyệt di động Android - FYI

Tôi giữ câu trả lời này cho mục đích "lịch sử" nhưng không đề xuất nó nữa. Xem câu trả lời của @Sidnicious 'ở trên và Cập nhật 2 của tôi.

Vì nó trông giống như một sự thu hút giữa callto và tel guys, tôi muốn đưa ra một giải pháp khả thi với hy vọng, rằng những bình luận của bạn sẽ đưa tôi trở lại con đường ánh sáng ;-)

Sử dụng callto:, vì hầu hết các máy khách để bàn sẽ xử lý nó:

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

Sau đó, nếu ứng dụng khách là iPhone, hãy thay thế các liên kết:

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

Bất kỳ phản đối chống lại giải pháp này? Tôi có nên bắt đầu từ tel:?

Mobile Safari (iPhone và iPod Touch) sử dụng tel:chương trình này.

Làm cách nào để tôi quay số điện thoại từ một trang web trên iPhone?

RFC3966 định nghĩa URI tiêu chuẩn IETF cho các số điện thoại, đó là URI 'tel:'. Đó là tiêu chuẩn. Không có tiêu chuẩn tương tự chỉ định 'callto:', đó là một quy ước cụ thể cho Skype trên các nền tảng nơi cho phép đăng ký trình xử lý URI để hỗ trợ nó.

điều này làm việc cho tôi:

1. thực hiện một liên kết tuân thủ tiêu chuẩn:

        <a href="tel:1500100900">

2. thay thế nó khi trình duyệt di động không được phát hiện, đối với skype:

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

Chọn liên kết để thay thế qua lớp có vẻ hiệu quả hơn. Tất nhiên nó chỉ hoạt động trên các neo với .phonelớp.

Tôi đã đưa nó vào chức năng if( !isMobile() ) { ...để nó chỉ kích hoạt khi phát hiện trình duyệt máy tính để bàn. Nhưng điều này là lỗi thời đáng kinh ngạc ...

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

Tôi đã sử dụng tel:cho dự án của tôi.

Nó hoạt động trong Chrome, Firefox, IE9 & 8, Chrome mobile và Trình duyệt di động trên điện thoại thông minh Sony Ericsson của tôi.

Nhưng callto:không hoạt động trong Trình duyệt di động.

Tôi sẽ sử dụng tel:(theo khuyến nghị). Nhưng để có một trang dự phòng tốt hơn / không hiển thị lỗi, tôi sẽ sử dụng một cái gì đó như thế này (sử dụng 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:");
    }
});

Giả định là, các trình duyệt di động có tem di động trong chuỗi userAgent có hỗ trợ cho tel:giao thức. Đối với phần còn lại, chúng tôi thay thế liên kết vớicallto: giao thức để có dự phòng cho Skype nếu có.

Để chặn các trang lỗi cho (các) giao thức không được hỗ trợ, liên kết được nhắm mục tiêu đến một iframe ẩn mới.

Thật không may, dường như không thể kiểm tra, nếu url đã được tải thành công trong iframe. Dường như không có sự kiện lỗi nào được thực hiện.

Vì callto:mỗi mặc định được hỗ trợ bởi skype (được thiết lập trong cài đặt Skype) và những người khác cũng hỗ trợ nó, tôi khuyên bạn nên sử dụng callto:thay vì skype:.

Mặc dù Apple khuyến nghị tel:trong các tài liệu của họ cho Mobile Safari, nhưng hiện tại (iOS 4.3), nó chấp nhận callto:tương tự. Vì vậy, tôi khuyên bạn nên sử dụng callto:trên một trang web chung vì nó hoạt động với cả Skype và iPhone và tôi hy vọng nó cũng sẽ hoạt động trên điện thoại Android.

Cập nhật (tháng 6 năm 2013)

Đây vẫn là vấn đề quyết định những gì bạn muốn trang web của bạn cung cấp. Trên các trang web của tôi, tôi cung cấp cả hai tel:và callto:các liên kết (cái sau được gắn nhãn là dành cho Skype) vì các trình duyệt Desktop trên Mac không làm gì với tel:các liên kết trong khi Android di động không làm gì với callto:các liên kết. Ngay cả Google Chrome với plugin Google Talk cũng không phản hồi tel:các liên kết. Tuy nhiên, tôi thích cung cấp cả hai liên kết trên máy tính để bàn trong trường hợp ai đó gặp rắc rối khi nhậntel: liên kết hoạt động trên máy tính của họ.

Nếu thiết kế trang web ra lệnh rằng tôi chỉ cung cấp một liên kết, tôi sẽ sử dụng một tel:liên kết mà tôi sẽ cố gắng thay đổi callto:trên các trình duyệt máy tính để bàn.

Sử dụng jQuery, thay thế tất cả các số điện thoại của Hoa Kỳ trên trang bằng các lược đồ callto:hoặc tel:phương án thích hợp .

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

Cảm ơn @jonas_jonas cho ý tưởng. Yêu cầu chức năng findAndReplaceDOMText tuyệt vời .

Tôi sử dụng <a href="tel:+123456">12 34 56</a>đánh dấu bình thường và làm cho các liên kết đó không thể nhấp được cho người dùng máy tính để bàn thông quapointer-events: none;

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

đối với các trình duyệt không hỗ trợ các sự kiện con trỏ (IE <11), có thể ngăn chặn nhấp chuột bằng JavaScript (ví dụ dựa trên Modernizr và jQuery):

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