Como marcar números de telefone?
quero marcar um número de telefone como ligação ligável num documento HTML. Eu li a abordagem dos microformatos, e eu sei, que o esquema tel:
seria padrão, mas não é literalmente implementado em lado nenhum.
O Skype define, tanto quanto sei, skype:
e callto:
, este último tendo ganho alguma popularidade. Presumo que outras empresas tenham outros esquemas ou saltem para o comboio.
Update: Microsoft NetMeeting toma callto:
os esquemas do WinXP. esta pergunta sugere que o Microsoft Office Communicator irá lidar com os esquemas tel:
mas não com os esquemas callto:
. Óptimo, Redmond!
Actualização 2: Dois e meio anos depois. Parece resumir-se ao que queres fazer com o número. No contexto móvel, tel:
é o caminho a seguir. A escolha dos ecrãs de alvo depende de si, se pensa que os seus utilizadores são mais pessoas do Skype (callto:
) ou terá mais probabilidades de ter algo como o Google Voice (tel:
instalado. Minha opinião pessoal é, quando em dúvida usar tel:
(em linha com a resposta @Sidnicious').
atualização 3: o Usuário @rybo111 observou, que o Skype no Chrome, entretanto, saltou para o tel:
movimento. Não posso verificar isto, porque nenhuma máquina com ambos à mão, mas se for verdade, significa que temos finalmente um vencedor aqui:
tel:
14 answers
A tel:
regime usado no final da década de 1990 e documentado no início de 2000, com RFC 2806 (que foi substituída pela mais completa RFC 3966, em 2004) e continua a ser melhorada. Apoiar tel:
no iPhone não foi uma decisão arbitrária.
callto:
, embora suportado pelo Skype, não é uma norma e deve ser evitada, a menos que vise especificamente os utilizadores do Skype.
Exemplo:
<a href="tel:+18475555555">1-847-555-5555</a>
Os resultados dos meus testes:
Callto:
- navegador Nokia: nada acontece
- o Google Chrome: pede para executar o skype para ligar para o número
- Firefox: pede para escolher um programa para ligar para o número
- IE: pede para executar o skype para ligar para o número
Tel:
- navegador Nokia: a trabalhar Google Chrome: nada acontece [[8]}Firefox:"Firefox não sabe como abrir este url"
- IE: não foi possível encontrar url
A melhor aposta é começar pelo tel: que funciona em todos os telemóveis
Em seguida, coloque este código, que só será executado quando em um desktop, e só quando um link é clicado.
Estou a usar http://detectmobilebrowsers.com/ para detectar navegadores móveis, pode usar qualquer método que preferir
if (!jQuery.browser.mobile) {
jQuery('body').on('click', 'a[href^="tel:"]', function() {
jQuery(this).attr('href',
jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
});
}
Então, basicamente, cobres todas as tuas bases.
Tel: funciona em todos os telefones para abrir o mostrador com o número
Callto: trabalha no seu computador para se ligar a skype do firefox, chromeComo seria de esperar, o suporte do WebKit de tel:
estende - se ao navegador móvel Android, bem como FYI
mantenho esta resposta para um propósito "histórico", mas não a recomendo mais. Veja a resposta @Sidnicious acima e minha atualização 2.
Uma vez que parece um empate entre o callto e o tel guys, quero lançar uma possível solução na esperança de que os teus comentários me tragam de volta ao caminho da luz; -)Usando callto:
, uma vez que a maioria dos clientes do ambiente de trabalho irá lidar com isso:
<a href="callto:0123456789">call me</a>
Então, se o cliente é um iPhone, substitua os links:
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:"));
}
}
}
};
[5] quaisquer objecções contra esta solução? Devo começar de preferência de tel:
?
Mobile Safari (iPhone & iPod Touch) use o esquema tel:
.
Como posso marcar um número de telefone a partir de uma página web no iPhone?
RFC3966 define o URI padrão da IETF para números de telefone, ou seja, o 'tel:' URI. É o padrão. Não existe um padrão semelhante que especifique " callto:", que é uma convenção particular para o Skype em plataformas onde é permitido registrar um manipulador URI para apoiá-lo.
1.estabelecer uma ligação conforme com as normas:
<a href="tel:1500100900">
2.substitui-o quando o navegador móvel não for detectado, para o skype:
$("a.phone")
.each(function()
{
this.href = this.href.replace(/^tel/,
"callto");
});
Seleccionar a ligação a substituir através da classe parece mais eficiente.
Claro que só funciona em âncoras com classe .phone
.
Coloquei - o na função if( !isMobile() ) { ...
por isso só despoleta quando detecta o navegador do ambiente de trabalho. Mas este é provavelmente obsoleto...
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 )
);
}
Usei {[[0]} para o meu projecto.
Funcionou no Chrome, Firefox, IE9 & 8, no Chrome mobile e no navegador móvel do meu smartphone Sony Ericsson.Mas callto:
não funcionou nos navegadores móveis.
Embora a Apple recomende {[[0]} nos seus documentos para o Safari móvel, actualmente (iOS 4.3) Aceita callto:
a mesma coisa. Então eu recomendo o uso callto:
em um site genérico como ele funciona tanto com Skype e iPhone e eu espero que ele irá funcionar em telefones Android, também.
Actualização (Junho De 2013)
Isto ainda é uma questão de decidir o que quer que a sua página web ofereça. Nos meus sites eu forneço tanto as ligaçõestel:
e callto:
(as últimas chamadas como sendo para o Skype) desde o Desktop os navegadores do Mac não fazem nada com ligações tel:
enquanto o Android móvel não faz nada com ligações callto:
. Mesmo o Google Chrome com o plugin Google Talk não responde às ligações tel:
. Ainda assim, eu prefiro oferecer ambos os links no desktop, no caso de alguém se deu ao trabalho de obter {[[0]} links para trabalhar em seu computador.
Se o design do site ditasse que eu só fornecia um link, eu usaria um link {[[0]} que eu tentaria mudar para callto:
em navegadores de desktop.
Eu usaria tel:
(como recomendado). Mas para ter um melhor recurso/não mostrar páginas de erro eu usaria algo assim (usando 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:");
}
});
A suposição é que os navegadores móveis que têm um selo móvel na cadeia userAgent têm suporte para o protocolo tel:
. Quanto ao resto, substituímos o link com o protocolo callto:
para ter um recurso para o Skype quando disponível.
Para suprimir as páginas de erro do(s) protocolo (s) não suportado (s), a ligação é direccionada para um novo iframe escondido.
Infelizmente não parece ser possível verificar, se o url foi carregado com sucesso na iframe. Parece que não houve erros.
Uma vez que callto:
é por padrão suportado pelo skype (configurado na configuração do Skype), e outros também o suportam, eu recomendaria o uso de callto:
em vez de skype:
.
Utilizando jQuery, substitua todos os números de telefone dos EUA na página pelos esquemas apropriados callto:
ou 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;
}
});
});
Obrigado a @jonas_ Jonas pela ideia. Requer a excelente função de Find e replacedomtext .
Uso a marcação normal <a href="tel:+123456">12 34 56</a>
e faço com que essas ligações não se tornem clicáveis para os utilizadores do ambiente de trabalho via pointer-events: none;
a[href^="tel:"] {
text-decoration: none;
}
.no-touch a[href^="tel:"] {
pointer-events: none;
cursor: text;
}
Para navegadores que não suportam eventos de ponteiros( IE
if(!Modernizr.touch) {
$(document).on('click', '[href^="tel:"]', function(e) {
e.preventDefault();
return false;
});
}