Как разметить телефонные номера?
Я хочу пометить номер телефона как вызываемую ссылку в документе HTML. Я прочитал подход к микроформатам, и я знаю, что tel: Схема была бы стандартной, но в буквальном смысле нигде не реализована.
Скайп определяет, насколько я знаю, 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 ответов
tel: Схема была использована в конце 1990-х годов и документирована в начале 2000 года с RFC 2806 (который был устаревшим из-за более тщательного RFC 3966 в 2004 году) и продолжает совершенствоваться. поддержки tel: на айфоне не было произвольного решения.
callto:Хотя он поддерживается Skype, он не является стандартным и его следует избегать, если он не предназначен специально для пользователей Skype.
Мне? Я бы просто начал в том числе правильно сформирован tel: URI на ваших страницах (не нюхая пользовательский агент), и подождите, пока остальные телефоны мира не догонят:) .
Пример:
<a href="tel:+18475555555">1-847-555-5555</a>
Результаты моего теста:
позвонить:
- Браузер Nokia: ничего не происходит
- Google Chrome: просит запустить Skype для вызова номера
- Firefox: просит выбрать программу для вызова номера
- IE: просит запустить Skype для вызова номера
тел:
- Браузер Nokia: работает
- 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:'));
});
}
Таким образом, в основном вы охватываете все свои базы.
тел: работает на всех телефонах, чтобы открыть звонилку с номером
Callto: работает на вашем компьютере, чтобы подключиться к Skype из 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:?
Mobile Safari (iPhone и iPod Touch) использует tel: схема.
RFC3966 определяет стандартный URI IETF для телефонных номеров, то есть URI "tel:". Это стандарт. Нет аналогичного стандарта, определяющего "callto:", это особое соглашение для Skype на платформах, где можно зарегистрировать обработчик URI для его поддержки.
Это сработало для меня:
1. сделать ссылку, соответствующую стандартам:
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, поддерживают tel: протокол. В остальном мы заменим ссылку на callto: протокол, чтобы иметь запасной вариант для Skype, где это возможно.
Чтобы подавить страницы ошибок для неподдерживаемых протоколов, ссылка нацелена на новый скрытый iframe.
К сожалению, кажется невозможным проверить, был ли URL успешно загружен в iframe. Кажется, что никаких событий ошибки не происходит.
Хотя 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: в настольных браузерах.
Поскольку 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 < 11), щелчок можно предотвратить с помощью JavaScript (пример опирается на Modernizr и jQuery):
if(!Modernizr.touch) {
$(document).on('click', '[href^="tel:"]', function(e) {
e.preventDefault();
return false;
});
}