จะทำเครื่องหมายหมายเลขโทรศัพท์ได้อย่างไร?

ฉันต้องการทำเครื่องหมายหมายเลขโทรศัพท์เป็นลิงก์ที่โทรได้ในเอกสาร HTML ฉันได้อ่านวิธีการไมโครฟอร์แมตแล้วและฉันรู้ว่าtel:โครงการจะเป็นแบบมาตรฐาน แต่ไม่มีการนำไปใช้เลยทีเดียว

Skype ให้คำจำกัดความเท่าที่ฉันรู้skype:และcallto:สิ่งหลังได้รับความนิยม ฉันคิดว่า บริษัท อื่นมีแผนการอื่นหรือกระโดดขึ้นcallto:รถไฟ

อะไรจะเป็นแนวปฏิบัติที่ดีที่สุดในการทำเครื่องหมายหมายเลขโทรศัพท์เพื่อให้คนจำนวนมากที่สุดด้วยซอฟต์แวร์ VoIP สามารถคลิกที่ลิงค์เพื่อรับสายได้

คำถามโบนัส: ไม่มีใครรู้เกี่ยวกับภาวะแทรกซ้อนกับหมายเลขฉุกเฉินเช่น 911 ในสหรัฐอเมริกาหรือ 110 ในเยอรมนี?

ไชโย

ปรับปรุง: Microsoft NetMeeting ใช้callto:รูปแบบภายใต้ WinXP คำถามนี้แสดงให้เห็นว่า Microsoft Office Communicator จะจัดการtel:รูปแบบ แต่ไม่callto:คน เยี่ยมมากเรดมันด์!

อัปเดต 2:สองปีครึ่งต่อมาในขณะนี้ ดูเหมือนว่าจะเดือดลงไปในสิ่งที่คุณต้องการจะทำกับจำนวน ในบริบทมือถือtel:เป็นวิธีที่จะไป การกำหนดเป้าหมายเดสก์ท็อปนั้นขึ้นอยู่กับคุณหากคุณคิดว่าผู้ใช้ของคุณเป็นคน Skype มากกว่า ( callto:) หรือมีแนวโน้มที่จะมีสิ่งที่tel:ติดตั้งเช่น Google Voice ( ) ความคิดเห็นส่วนตัวของฉันคือเมื่อมีข้อสงสัยในการใช้งานtel:(สอดคล้องกับ @Sidnicious 'คำตอบ)

อัปเดต 3: User @ rybo111 ตั้งข้อสังเกตว่า Skype ใน Chrome ได้เพิ่มขึ้นในขณะที่tel:bandwagon ฉันไม่สามารถตรวจสอบสิ่งนี้ได้เพราะไม่มีเครื่องที่มีทั้งสองมือ แต่ถ้าเป็นจริงก็หมายความว่าเราได้ผู้ชนะที่นี่:tel:

tel:โครงการที่ถูกนำมาใช้ในปลายปี 1990และบันทึกไว้ในช่วงต้นปี 2000 กับRFC 2806 (ซึ่งถูกจำหน่ายแล้วโดยมากขึ้นอย่างละเอียดRFC 3966ในปี 2004) และยังคงได้รับการปรับปรุง การสนับสนุนtel:บน iPhone ไม่ใช่การตัดสินใจโดยพลการ

callto:ในขณะที่ Skype สนับสนุนนั้นไม่ใช่มาตรฐานและควรหลีกเลี่ยงเว้นแต่จะกำหนดเป้าหมายไปที่ผู้ใช้ Skype โดยเฉพาะ

ผม? ฉันจะเริ่มรวมtel:URIs ที่สร้างขึ้นอย่างถูกต้องบนหน้าเว็บของคุณ (โดยไม่ต้องดมตัวแทนผู้ใช้) และรอให้โทรศัพท์ทั่วโลกที่เหลือติดตาม :)

ตัวอย่าง :

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

ผลการทดสอบของฉัน:

เรียกร้องให้:

• Nokia Browser: ไม่มีอะไรเกิดขึ้น
• Google Chrome: ขอให้เรียกใช้ skype เพื่อโทรไปยังหมายเลข
• Firefox: ขอให้เลือกโปรแกรมเพื่อโทรไปยังหมายเลข
• IE: ขอให้เรียกใช้ skype เพื่อโทรไปยังหมายเลข

โทรศัพท์:

• Nokia Browser: กำลังทำงาน
• Google Chrome: ไม่มีอะไรเกิดขึ้น
• Firefox: "Firefox ไม่รู้วิธีเปิด URL นี้"
• IE: ไม่สามารถหา URL

ทางออกที่ดีที่สุดคือการเริ่มต้นด้วยโทรศัพท์: ซึ่งทำงานบนโทรศัพท์มือถือทั้งหมด

จากนั้นใส่รหัสนี้ซึ่งจะทำงานเฉพาะเมื่อบนเดสก์ท็อปและเฉพาะเมื่อมีการคลิกลิงก์

ฉันใช้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: ทำงานบนคอมพิวเตอร์ของคุณเพื่อเชื่อมต่อ skype จาก firefox, chrome

อย่างที่คาดไว้การสนับสนุนของ WebKit tel:จะขยายไปยังเบราว์เซอร์มือถือ Android และ FYI

ฉันเก็บคำตอบนี้เพื่อจุดประสงค์ "ประวัติศาสตร์" แต่ไม่แนะนำอีกต่อไป ดูคำตอบ @Sidnicious 'ด้านบนและอัปเดตของฉัน 2

เนื่องจากดูเหมือนว่าวาดระหว่าง callto และคนที่โทรหาฉันต้องการที่จะแก้ปัญหาที่เป็นไปได้ในความหวังว่าความคิดเห็นของคุณจะนำฉันกลับไปในทางของแสง ;-)

การใช้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:?

Safari มือถือ (iPhone และ iPod Touch) ใช้tel:รูปแบบ

ฉันจะหมุนหมายเลขโทรศัพท์จากเว็บเพจบน iPhone ได้อย่างไร

RFC3966กำหนด URI มาตรฐาน IETF สำหรับหมายเลขโทรศัพท์นั่นคือ 'tel:' URI นั่นคือมาตรฐาน ไม่มีมาตรฐานที่คล้ายกันที่ระบุ 'callto:' ซึ่งเป็นแบบแผนเฉพาะสำหรับ Skype บนแพลตฟอร์มที่อนุญาตให้ลงทะเบียนตัวจัดการ URI เพื่อสนับสนุน

สิ่งนี้ใช้ได้กับฉัน:

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

ฉันใช้tel:สำหรับโครงการของฉัน

ใช้งานได้ใน Chrome, Firefox, IE9 & 8, Chrome mobile และเบราว์เซอร์มือถือในสมาร์ทโฟน Sony Ericsson ของฉัน

แต่callto:ไม่ได้ทำงานในเบราว์เซอร์มือถือ

ฉันจะใช้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 ดูเหมือนว่าจะไม่มีเหตุการณ์ข้อผิดพลาดเกิดขึ้น

ตั้งแต่callto:เป็นต่อเริ่มต้นการสนับสนุนจาก Skype (ตั้งค่าในการตั้งค่า Skype) และอื่น ๆ จะยังสนับสนุนมันฉันจะแนะนำให้ใช้มากกว่าcallto:skype:

แม้ว่า Apple แนะนำtel:ใน docs สำหรับ Mobile Safari แต่ปัจจุบัน (iOS 4.3) ยอมรับได้callto:เหมือนกัน ดังนั้นฉันแนะนำให้ใช้callto:บนเว็บไซต์ทั่วไปเพราะมันใช้ได้กับทั้ง Skype และ iPhone และฉันคาดว่ามันจะทำงานบนโทรศัพท์ Android ด้วย

อัปเดต (มิถุนายน 2013)

นี่เป็นเรื่องของการตัดสินใจว่าคุณต้องการให้หน้าเว็บของคุณให้อะไร ในเว็บไซต์ของฉันฉันให้ทั้งสองtel:และcallto:ลิงค์ (หลังมีข้อความว่าเป็น Skype) เนื่องจากเบราว์เซอร์เดสก์ท็อปบน Mac ไม่ได้ทำอะไรกับการtel:เชื่อมโยงในขณะที่ Android มือถือไม่ได้ทำอะไรกับการcallto:เชื่อมโยง แม้แต่ Google Chrome ที่มีปลั๊กอิน Google Talk ก็ไม่ตอบสนองต่อtel:ลิงก์ แต่ถึงกระนั้นฉันก็ชอบที่จะเสนอลิงค์ทั้งสองบนเดสก์ท็อปในกรณีที่มีใครบางคนประสบปัญหาในการรับtel:ลิงค์เพื่อทำงานบนคอมพิวเตอร์

หากการออกแบบเว็บไซต์กำหนดให้ฉันมีเพียงลิงค์เดียวฉันจะใช้tel:ลิงก์ที่ฉันจะลองเปลี่ยนเป็นcallto:บนเบราว์เซอร์เดสก์ท็อป

ใช้ 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

ฉันใช้<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;
    });
}