telefonico - link para llamar por telefono html

¿Cómo marcar números de teléfono?

Question

Quiero marcar un número de teléfono como enlace llamable en un documento HTML. He leído el enfoque de los microformatos , y sé, que el esquema tel: sería estándar, pero literalmente no está implementado en ninguna parte.

Skype define, que yo sepa, skype: y callto: este último ha ganado algo de popularidad. Supongo que otras compañías tienen otros esquemas o saltan al callto: train.

¿Cuál sería la mejor práctica para marcar un número de teléfono, para que tantas personas como sea posible con el software VoIP puedan hacer clic en un enlace para recibir una llamada?

Pregunta extra: ¿Alguien sabe acerca de las complicaciones con los números de emergencia como el 911 en los Estados Unidos o el 110 en Alemania?

Aclamaciones,

Actualización: Microsoft NetMeeting toma los esquemas de callto: bajo WinXP. Esta pregunta sugiere que Microsoft Office Communicator manejará los esquemas de tel: pero no los callto: ones. Genial, Redmond!

Actualización 2: Dos años y medio más tarde ahora. Parece que se reduce a lo que quieres hacer con el número. En el contexto móvil, tel: es el camino a seguir. Dirigirse a los equipos de escritorio depende de usted, si cree que sus usuarios son más personas de Skype ( callto: o es más probable que tengan instalado algo como Google Voice ( tel: callto: . Mi opinión personal es, cuando tenga dudas, use tel: (en línea con la respuesta de @Sidnicious).

Actualización 3: el usuario @ rybo111 señaló que Skype en Chrome, mientras tanto, se ha subido al tel: vagón. No puedo verificar esto, porque no hay una máquina con ambas a la mano, pero si es verdad, significa que finalmente tenemos un ganador aquí:

                                        tel:

Answer 1

Aunque Apple recomienda tel: en sus documentos para Mobile Safari, actualmente (iOS 4.3) acepta callto: igual. Por lo tanto, recomiendo usar callto: en un sitio web genérico, ya que funciona con Skype y iPhone, y espero que también funcione en teléfonos con Android.

Actualización (junio de 2013)

Esto sigue siendo una cuestión de decidir qué desea que ofrezca su página web. En mis sitios web callto: enlaces tel: y callto: (el último etiquetado como para Skype) ya que los navegadores de escritorio en Mac no hacen nada con tel: links mientras que Android móvil no hace nada con callto: links. Incluso Google Chrome con el complemento Google Talk no responde a tel: links. Aún así, prefiero ofrecer ambos enlaces en el escritorio en caso de que alguien se haya tomado la molestia de obtener tel: enlaces para trabajar en su computadora.

Si el diseño del sitio me dictara que solo proporcionara un enlace, usaría un tel: enlace que intentaría cambiar por callto: en los navegadores de escritorio.

Answer 2

Como era de esperar, la compatibilidad de WebKit con tel: extiende también al navegador móvil Android: FYI

Answer 3

Con jQuery, reemplace todos los números de teléfono de los EE. UU. En la página con los callto: o tel: apropiados.

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

Gracias a @jonas_jonas por la idea. Requiere la excelente función findAndReplaceDOMText .

Answer 4

El sistema tel: se usó a fines de la década de 1990 y se documentó a principios de 2000 con RFC 2806 (que fue obsoleto por el más exhaustivo RFC 3966 en 2004) y continúa mejorándose . Apoyar tel: en el iPhone no fue una decisión arbitraria.

callto: si bien es compatible con Skype, no es un estándar y debe evitarse a menos que se dirija específicamente a los usuarios de Skype.

¿Yo? Acabo de comenzar a incluir los URIs de tel: Correctamente formados en sus páginas (sin detectar al agente de usuario) y esperar a que el resto de los teléfonos del mundo se pongan al día :).

Ejemplo :

<a href="tel:[phone]">1-847-555-5555</a>

Answer 5

La mejor opción es comenzar con tel: que funciona en todos los teléfonos móviles.

Luego ingrese este código, que solo se ejecutará en un escritorio y solo cuando se haga clic en un enlace.

Estoy usando http://detectmobilebrowsers.com/ para detectar navegadores móviles, puedes usar el método que prefieras

if (!jQuery.browser.mobile) {
    jQuery(''body'').on(''click'', ''a[href^="tel:"]'', function() {
            jQuery(this).attr(''href'', 
                jQuery(this).attr(''href'').replace(/^tel:/, ''callto:''));
    });
}

Así que básicamente cubres todas tus bases.

tel: funciona en todos los teléfonos para abrir el marcador con el número

callto: funciona en tu computadora para conectarse a Skype desde Firefox, Chrome

Answer 6

Los resultados de mi prueba:

llamar a:

• Nokia Browser: no pasa nada
• Google Chrome: solicita ejecutar Skype para llamar al número
• Firefox: pide elegir un programa para llamar al número.
• IE: pide ejecutar skype para llamar al número

tel:

• Nokia Browser: trabajando
• Google Chrome: no pasa nada
• Firefox: "Firefox no sabe cómo abrir esta URL"
• IE: no se pudo encontrar url

Answer 7

Mobile Safari (iPhone y iPod Touch) utiliza el esquema tel: .

¿Cómo puedo marcar un número de teléfono desde una página web en iPhone?

Answer 8

Utilicé tel: para mi proyecto.

Funcionó en Chrome, Firefox, IE9 & 8, Chrome mobile y el navegador móvil en mi teléfono inteligente Sony Ericsson.

Pero callto: no funcionaba en los navegadores móviles.

Answer 9

Utilizo el <a href="tel:+123456">12 34 56</a> normal <a href="tel:+123456">12 34 56</a> y hago que esos enlaces no sean accesibles para los usuarios de escritorio a través pointer-events: none;

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

para los navegadores que no admiten eventos de puntero (IE <11), se puede evitar el clic con JavaScript (el ejemplo se basa en Modernizr y jQuery):

if(!Modernizr.touch) {
    $(document).on(''click'', ''[href^="tel:"]'', function(e) {
        e.preventDefault();
        return false;
    });
}

Answer 10

Ya que callto: es por defecto soportado por skype (configurado en la configuración de Skype), y otros también lo admiten, recomendaría usar callto: lugar de skype:

Answer 11

Yo usaría tel: (como recomendado). Pero para tener un mejor respaldo / no mostrar páginas de error usaría algo como esto (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:");
    }
});

El supuesto es que los navegadores móviles que tienen un sello móvil en la cadena de agente de usuario tienen soporte para el protocolo tel: . Por lo demás, reemplazamos el enlace con el protocolo callto: para tener un respaldo a Skype cuando esté disponible.

Para suprimir las páginas de error de los protocolos no compatibles, el enlace está dirigido a un nuevo iframe oculto.

Desafortunadamente, no parece ser posible verificar si la url se ha cargado correctamente en el iframe. Parece que no se disparan eventos de error.

Answer 12

esto funcionó para mí:

1.hacer un enlace de conformidad con las normas:

<a href="tel:[phone]">

2. Colóquelo cuando no se detecte el navegador móvil, para skype:

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

Seleccionar un enlace para reemplazar a través de la clase parece más eficiente. Por supuesto que funciona solo en anclajes con clase .phone .

Lo puse en funcionamiento if( !isMobile() ) { ... así que se dispara solo cuando detecta el navegador de escritorio. Pero este es probablemente 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 )
    );
}

Answer 13

RFC3966 define el URI estándar de IETF para los números de teléfono, que es el URI ''tel:''. Esa es la norma. No hay un estándar similar que especifique ''callto:'', esa es una convención particular para Skype en plataformas donde se permite registrar un controlador de URI para admitirlo.

Answer 14

Mantengo esta respuesta con un propósito "histórico", pero ya no la recomiendo. Vea la respuesta de @Sidnicious ''arriba y mi Actualización 2.

Ya que parece un empate entre los tipos de call y tel, quiero lanzar una posible solución con la esperanza de que sus comentarios me traigan de nuevo el camino de la luz ;-)

Usando callto: ya que la mayoría de los clientes de escritorio lo manejarán:

<a href="callto:0123456789">call me</a>

Luego, si el cliente es un iPhone, reemplaza los enlaces:

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

¿Alguna objeción contra esta solución? ¿Preferiblemente debería comenzar desde tel: :?