Как для телефонов?
Я хочу пометить номер телефона как вызываемую ссылку в 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:
14 ответов:
The
tel:схемы использовать в конце 1990-х годов и задокументировано в начале 2000 года с RFC 2806 (который был заменен на более основательный RFC 3966 в 2004 году) и продолжает совершенствоваться. Поддержкаtel:на iPhone не было произвольного решения.
callto:, в то время как поддерживается Skype,не является стандартным и следует избегать, если специально не нацелены на пользователей Skype.меня? Я бы просто начал включать правильно сформированные
tel:URI на ваших страницах (без нюхания агента пользователя) и ждать, пока остальные телефоны в мире, чтобы догнать :) .пример:
<a href="tel:+18475555555">1-847-555-5555</a>
мои результаты теста:
callto:
- браузер Nokia: ничего не происходит
- Google Chrome: просит запустить skype, чтобы позвонить по номеру
- Firefox: просит выбрать программу для вызова номера
- IE: просит запустить skype, чтобы позвонить по номеру
tel:
- браузер 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: работает на вашем компьютере для подключения к skype из firefox, chrome
Как и следовало ожидать, поддержка WebKit
tel:распространяется на мобильные Android-браузера, а также - к вашему сведению
я сохраняю этот ответ для "исторической" цели, но больше не рекомендую его. См. ответ @Sidnicious выше и мое обновление 2.
поскольку это похоже на ничью между callto и tel guys, я хочу бросить возможное решение в надежде, что ваши комментарии вернут меня на путь света ; -)
используя
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:?
RFC3966 определяет стандартный URI IETF для телефонных номеров, то есть 'tel:' URI. Это стандарт. Нет аналогичного стандарта, который указывает " callto:", это особое Соглашение для Skype на платформах, где is позволяет регистрировать обработчик 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:не работает в мобильных браузерах.
хотя Apple рекомендует
tel:в своих документах для мобильного 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:на настольных браузерах.
Я хотел бы использовать
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. Похоже, что никакие события ошибок не запускаются.
С
callto:по умолчанию поддерживается skype (настраивается в настройках Skype), а другие также поддерживают его, я бы рекомендовал использоватьcallto:, а неskype:.
используя 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
if(!Modernizr.touch) { $(document).on('click', '[href^="tel:"]', function(e) { e.preventDefault(); return false; }); }
Comments