我想在HTML文档中标记一个电话号码为可调用链接。我读过微格式方法，我知道tel:方案是标准的，但实际上没有实现。
据我所知，Skype定义了Skype:和callto:，后者已经获得了一些流行。我想，其他公司要么有其他的计划，要么就搭上了“呼叫列车”。
什么是标记电话号码的最佳实践，以便尽可能多的人使用VoIP软件只需点击链接就可以接听电话?
额外的问题:有人知道紧急号码的并发症吗，比如美国的911或德国的110 ?
更新:Microsoft NetMeeting在WinXP下接受callto:方案。这个问题表明，Microsoft Office Communicator将处理tel:方案，但不处理callto: ones。好,雷蒙德!
更新2:现在已经过去两年半了。这似乎可以归结为你想用这个数字做什么。在移动环境中，tel:是可行的。如果你认为你的用户更多是Skype用户(callto:)，或者更可能安装谷歌Voice (tel:)之类的东西，这取决于你。我个人的观点是，有疑问时使用tel:(与@Sidnicious的回答一致)。
更新3:用户@rybo111指出，Chrome中的Skype同时也加入了tel:潮流。我无法证实这一点，因为没有一台机器同时拥有这两种设备，但如果这是真的，这意味着我们终于有了一个赢家:tel:
我使用正常的<a href="tel:+123456">12 3456 </a>标记，并使这些链接不可点击的桌面用户通过指针事件: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;
});
}
使用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.制作符合标准的链接:
<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 )
);
}
