Як розмітити телефонні номери?

Я хочу позначати номер телефону як посилання для дзвінка в документі HTML. Я читав підхід до мікроформатів , і знаю, що tel:схема була б стандартною, але вона буквально ніде не реалізована.

Skype визначає, наскільки я знаю, skype:і callto:, останній придбав деяку популярність. Я припускаю, що інші компанії мають або інші схеми, або стрибають на callto:поїзд.

Яка найкраща практика позначити номер телефону, щоб якомога більше людей за допомогою програмного забезпечення VoIP могли просто натиснути на посилання, щоб отримати дзвінок?

Питання про бонус: хтось знає про ускладнення з аварійними номерами, такими як 911 в США або 110 у Німеччині?

Ура,

Оновлення: Microsoft NetMeeting приймає callto:схеми під WinXP. Це питання говорить про те, що Microsoft Office Communicator буде обробляти tel:схеми, але не схеми callto:. Чудово, Редмонд!

Оновлення 2: Через два з половиною роки. Здається, це зводиться до того, що ви хочете зробити з номером. У мобільному контексті tel:це шлях. Орієнтація на настільні комп’ютери залежить від вас, якщо ви вважаєте, що ваші користувачі більше людей Skype ( callto:) або, швидше за все, буде встановлено щось на кшталт Google Voice ( tel:). Моя особиста думка полягає у використанні сумнівів tel:(відповідно до відповіді @Sidnicious).

Оновлення 3: Користувач @ rybo111 зауважив, що Skype в Chrome тим часом перескочив на tel:прокладку. Я не можу це перевірити, тому що жодна машина з обома під рукою, але якщо це правда, це означає, що ми нарешті перемогли тут:tel:

Ця tel:схема була використана в кінці 1990-х і була задокументована на початку 2000 року з RFC 2806 (який був застарілий більш ретельним RFC 3966 в 2004 році) і продовжує вдосконалюватися . Підтримка tel:iPhone не була довільним рішенням.

callto:, хоча його підтримує Skype, не є стандартом і його слід уникати, якщо спеціально не націлено користувачів Skype.

Я? Я просто почав би включати належним чином сформовані tel:URI на ваші сторінки (не нюхаючи користувальницького агента) і чекаю, поки решта телефонів у світі наздогнать :).

Приклад :

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

Мої результати тесту:

виклик:

• Nokia Browser: нічого не відбувається
• Google Chrome: просить запустити скайп, щоб зателефонувати на номер
• Firefox: просить вибрати програму для виклику номера
• IE: просить запустити skype для виклику номера

тел:

• Браузер Nokia: працює
• Google Chrome: нічого не відбувається
• Firefox: "Firefox не знає, як відкрити цю URL-адресу"
• IE: не вдалося знайти URL

Найкраще починати з 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

Як і слід було очікувати, підтримка WebKit tel:поширюється і на мобільний браузер Android - FYI

Я зберігаю цю відповідь з "історичною" метою, але більше не рекомендую її. Дивіться відповідь @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:?

Мобільні Safari (iPhone і iPod Touch) використовують tel:схему.

Як набрати номер телефону з веб-сторінки на iPhone?

RFC3966 визначає стандарт URI IETF для телефонних номерів, тобто URI 'tel:'. Це стандарт. Не існує аналогічного стандарту, який визначає "callto:", це особлива умова для Skype на платформах, де дозволяється зареєструвати обробник URI для його підтримки.

це працювало для мене:

1.складіть посилання, що відповідає стандартам:

        <a href="tel:1500100900">

2.замініть його, коли браузер мобільного зв’язку не виявлений, для скайпу:

$("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, підтримують tel:протокол. Для решти ми замінюємо посилання наcallto: протокол, щоб мати зворотний доступ до Skype, коли це можливо.

Щоб придушити сторінки помилок для непідтримуваних протоколів, посилання націлене на новий прихований кадр.

На жаль, здається, неможливо перевірити, чи URL-адреса успішно завантажена у рамку iframe. Здається, що жодних подій помилок не запускається.

Оскільки callto:за замовчуванням Skype підтримується (налаштовано в налаштуваннях Skype), а інші також підтримують його, я рекомендую callto:скоріше використовувати skype:.

Хоча Apple рекомендує tel:у своїх документах для мобільних Safari, в даний час (iOS 4.3) він приймає callto:саме те саме. Тому я рекомендую використовувати callto:на загальному веб-сайті, оскільки він працює як зі Skype, так і з iPhone, і я сподіваюся, що він також працюватиме на телефонах Android.

Оновлення (червень 2013 р.)

Це все-таки питання вирішення того, що ви хочете запропонувати для веб-сторінки. На своїх веб-сайтах я надаю tel:і callto:посилання, і посилання (останні позначені як Skype), оскільки браузери Desktop на 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;
    });
}