Как помечать номера телефонов?


471

Я хочу пометить номер телефона как вызываемую ссылку в документе 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:


1
К сожалению нет. Кажется, все сводится к тому, что делает ваш провайдер (VoiP, мобильный телефон или что-то еще). Это также может быть плата за 800 номеров.
Болдевин

1
Я использую Google Voice в Chrome, и он не распознает tel:URI. Я все еще придерживаюсь callto:и показываю номер телефона на том основании, что браузеры мобильных телефонов все равно должны автоматически определять номер.
Старый Pro

5
Несмотря на заголовок, этот вопрос действительно «какую схему URL следует использовать для телефонных номеров», а не как их разметить.
Raedwald

1
@Boldewyn Skype запрашивается при использовании Chrome с, tel:поэтому, возможно, вам следует удалить свой комментарий в конце об использовании Skype callto:?
rybo111

1
Не могли бы вы попробовать отредактировать обновления вашего вопроса в соответствующих ответах. Вот так это вроде беспорядок.
idmean

Ответы:


495

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

callto:Хотя он поддерживается Skype, он не является стандартным и его следует избегать, если он не предназначен специально для пользователей Skype.

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

Пример :

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


Спасибо за подробный ответ! Поскольку я задал вопрос, у меня возникло желание следовать этому подходу. Используйте стандарт и сообщите жаловавшимся людям, что они используют плохое приложение / инструмент. Хотя это тяжело, но если это ваш клиент, я думаю, вы правы. Если, тем не менее, мне нужно учитывать пользователей Skype, я перейду к своему решению JavaScript с другой стороны.
Болдевин

1
Сейчас 2014 год и тел: теперь работает для скайпа. Но если вы хотите инициировать вызов в Службу эхо / звукового тестирования Skype, ссылка будет <a href="skype:echo123?call"> Позвонить в Службу эхо / звукового тестирования Skype </a> из msdn.microsoft. ru / en-us / library / office /…
OzBob

4
Кто-нибудь пробовал href="tel://1-555-555-5555"форматировать? ребята из Tutsplus рекомендуют его code.tutsplus.com/tutorials/…
Adrien Be

2
По моему опыту с тегом tel: Skype требуется код страны с +, который должен быть на номере (например, "+44" для номеров в Великобритании), чтобы правильно проанализировать номер. В противном случае он просто открывает Skype, но не пытается набрать номер.
ShaunUK

3
Разве не должен быть пример: <a href="tel:+18475555555">? Обратите внимание на + перед начальным 1.)
Стефан

73

Результаты моего теста:

позвонить:

  • Браузер Nokia: ничего не происходит
  • Google Chrome: просит запустить скайп, чтобы позвонить по номеру
  • Firefox: просит выбрать программу для вызова номера
  • IE: просит запустить Skype для вызова номера

тел:

  • Браузер Nokia: работает
  • Google Chrome: ничего не происходит
  • Firefox: «Firefox не знает, как открыть этот URL»
  • IE: не удалось найти URL

2
Чтобы добавить к этому, поведение аналогично для Google Chrome на Android 4.2.2 (Nexus 4). Если Android-версия Skype работает в фоновом режиме, даже не работает callto: ссылки работают. Короче говоря, вы не можете использовать ссылки callto: если вы хотите настроить таргетинг на мобильные устройства в данный момент.
aendrew

Теперь на Chrome 35 вы получите это всплывающее окно
pec

В Chrome и Firefox (может быть, IE), вы можете зарегистрировать свой веб-сервис для tel:префикса с помощью registerProtocolHandler .
Росс Роджерс

Вы должны использовать телефонный номер + код страны, который работает на Chrome. тел: ссылки не работают с скайпом на хроме без +
Стас Свишов

Обновление на OSX и Chrome: просит запустить Facetime.
Жюль

45

Лучше всего начать с тел: который работает на всех мобильных телефонах.

Затем вставьте этот код, который будет запускаться только на рабочем столе и только при нажатии на ссылку.

Я использую 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: работает на вашем компьютере, чтобы подключиться к Skype из Firefox, Chrome


Да, это - callto: вообще не работает на Android (см. Мой комментарий к ответу Мурата), а tel: на рабочем столе не работает. Это на самом деле неудачно.
aendrew

1
Хм, к сожалению, быстрое jsfiddle, похоже, тоже не позволяет эту работу ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai

Работая над Seamonkey 2.20 на Mac 10.8, поместите ниже <body <?php body_class(); ?>>код в файл header.php темы WordPress.
om01

Callto: не работал для Chrome в Mac, и версия актуальна
Ujjwal

К сожалению, это было признано
устаревшим

21

Как и следовало ожидать, поддержка WebKit tel:распространяется и на мобильный браузер Android - FYI


15
Было бы лучше в качестве комментария, но все равно хорошо знать.
о0 '.

10

Я держу этот ответ для «исторических» целей, но больше не рекомендую его. Смотрите ответ @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:?


Вполне возможно, что iPhone также поддерживает схему callto, но Apple предпочитает тел, так что это то, что упоминается в документации.
Ян Огард

5
Смотри мой ответ. callto:это запатентованная схема URI, поэтому я бы не стал там начинать.
s4y

Callto: не работал для Chrome в Mac, и версия актуальна.
Уджвал

Это меня не удивляет. Ландшафт был принципиально другим в 2009 году, когда был дан ответ. Также вам нужна сторонняя программа, которая регистрируется по callto:схеме, например, Skype. Сам Chrome понятия не имеет, что ему делать.
Болдевин

9

Mobile Safari (iPhone & iPod Touch) использует tel:схему.

Как набрать номер телефона с веб-страницы на iPhone?


2
Поэтому, если основными целевыми пользователями являются iPhone или iPod Tough (и, возможно, другие мобильные устройства, я не знаю ...), вам следует использовать тел: Если основные пользователи - это обычные веб-клиенты (IE, Firefox и т. Д.) используя Skype или другое программное обеспечение VoIP, я думаю, что callto: было бы лучше.
благоговение

3

RFC3966 определяет стандартный URI IETF для телефонных номеров, то есть URI «tel:». Это стандарт. Нет аналогичного стандарта, определяющего «callto:», это конкретное соглашение для Skype на платформах, где можно зарегистрировать обработчик URI для его поддержки.


Это то, что сказал Сидникус, да.
Болдевин

3

это сработало для меня:

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

«Правильный» способ обнаружить мобильные браузеры - это проверить строку с учетом регистра «mobile».
Кевин Кокс

2

Я использовал tel:для своего проекта.

Он работал в Chrome, Firefox, IE9 & 8, Chrome Mobile и мобильном браузере на моем смартфоне Sony Ericsson.

Но callto:не работал в мобильных браузерах.


2

Я бы использовал 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. Кажется, что никаких событий ошибки не происходит.


Хорошее использование скрытых фреймов!
Болдевин

1

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


3
Здесь я согласен. Но все вместе это, кажется, сводится к тел: vs callto:, и это не легко.
Болдевин

1

Хотя Apple рекомендует tel:в своих документах для 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:браузерах настольных компьютеров.


1
стандартный браузер в последней версии Android с открытым исходным кодом «Ice Cream Sandwich» по-прежнему поддерживает только tel:; переход по callto:ссылке приводит к «Веб-страница недоступна»
rymo

0

Используя 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 .


1
Это решение не является идеальным, поскольку анализ строки пользовательского агента считается плохой практикой. Рассмотрим устройство, которое поддерживает telURI, но не сообщает о себе как о мобильном устройстве.
Артуро Торрес Санчес

-1

Я использую обычную <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;
    });
}

1
Использование Modernizr.touchкоторой поддержка сенсорного события для поддержки Infer для tel:ненадежно. Легкие исключения: iPad, Windows-планшеты и т. Д.
zachleat

Даже Chrome, работающий на рабочем столе Windows, сообщает о себе как о сенсорном устройстве.
Артуро Торрес Санчес

Некоторые компьютеры настольного класса поддерживают тел: URL. Для конкретного примера Mac FaceTime на Mac является стандартным и работает с tel:, вплоть до того, что использует iPhone пользователя с Handoff / Continuity, поэтому использует события указателя: ни один для нацеливания на рабочие столы может быть нецелесообразным. ,
OxC0FFEE
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.