web-dev-qa-db-fra.com

Comment marquer les numéros de téléphone?

Je souhaite marquer un numéro de téléphone en tant que lien appelable dans un document HTML. J'ai lu l'approche des microformats , et je sais, que le schéma tel: serait standard, mais n'est littéralement mis en œuvre nulle part.

Skype définit, autant que je sache, skype: et callto:, ce dernier ayant acquis une certaine popularité. Je suppose que d’autres entreprises ont soit d’autres systèmes, soit sauté dans le train callto:.

Quelle serait la meilleure pratique pour marquer un numéro de téléphone, de sorte que le logiciel VoIP puisse être utilisé par un maximum de personnes, en cliquant simplement sur un lien pour passer un appel?

Question bonus: Quelqu'un est-il au courant de complications liées à des numéros d'urgence tels que le 911 aux États-Unis ou le 110 en Allemagne?

À votre santé,

Mise à jour: Microsoft NetMeeting utilise les schémas callto: sous WinXP. Cette question suggère que Microsoft Office Communicator gère les schémas tel: mais pas ceux callto:. Génial, Redmond!

Mise à jour 2: Deux ans et demi plus tard. Cela semble se résumer à ce que vous voulez faire avec le nombre. Dans le contexte mobile, tel: est la voie à suivre. Vous pouvez cibler les ordinateurs de bureau si vous pensez que vos utilisateurs sont davantage des utilisateurs de Skype (callto:) ou auront probablement installé quelque chose comme Google Voice (tel:). Mon opinion personnelle est la suivante: en cas de doute, utilisez tel: (conformément à la réponse @Sidnicious ').

Mise à jour 3: L'utilisateur @ rybo111 a noté que Skype dans Chrome avait entre-temps sauté sur le mouvement tel:. Je ne peux pas le vérifier car aucune machine n’a les deux sous la main, mais si c’est vrai, cela signifie que nous avons enfin un gagnant ici:

                                        tel:
htmlmarkupurl-schemephone-number
449
Boldewyn

Le schéma tel: était tilisé à la fin des années 199 et documenté au début de 2000 avec RFC 2806 (obsolète par le plus approfondi RFC 3966 en 2004) et continue d’être améliorée . Prendre en charge tel: sur l'iPhone n'était pas une décision arbitraire.

callto:, bien que supporté par Skype, n'est pas un standard et doit être évité sauf si les utilisateurs de Skype sont spécifiquement ciblés.

Moi? Je commençais simplement à inclure des URI tel: correctement formés sur vos pages (sans renifler l'agent utilisateur) et à attendre que les autres téléphones du monde se rattrapent :).

Exemple :

<a href="tel:+18475555555">1-847-555-5555</a>
467
s4y

Mes résultats de test:

callto:

  • Navigateur Nokia: rien ne se passe
  • Google Chrome: demande à skype d'appeler le numéro
  • Firefox: demande à choisir un programme pour appeler le numéro
  • IE: demande à skype d'appeler le numéro

tel:

  • Nokia Browser: fonctionne
  • Google Chrome: rien ne se passe
  • Firefox: "Firefox ne sait pas comment ouvrir cette URL"
  • IE: impossible de trouver l'URL
73
Murat

Le mieux est de commencer par tel: qui fonctionne sur tous les mobiles

Ensuite, insérez ce code, qui ne fonctionnera que sur un bureau et uniquement lorsqu'un lien est cliqué.

J'utilise http://detectmobilebrowsers.com/ pour détecter les navigateurs mobiles, vous pouvez utiliser la méthode de votre choix.

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

Donc, fondamentalement, vous couvrez toutes vos bases.

tel: fonctionne sur tous les téléphones pour ouvrir le numéroteur avec le numéro

callto: fonctionne sur votre ordinateur pour vous connecter à skype depuis firefox, chrome

44
mordy

Comme on pouvait s'y attendre, la prise en charge de tel: par WebKit s'étend également au navigateur mobile Android - pour votre information.

21
rymo

Je garde cette réponse à des fins "historiques" mais je ne le recommande plus. Voir la réponse de @Sidnicious ci-dessus et ma mise à jour 2.

Comme cela ressemble à un match nul entre les gars de callto et de tel, je veux mettre une solution possible dans l’espoir que vos commentaires me ramèneront sur le chemin de la lumière ;-)

En utilisant callto:, puisque la plupart des clients de bureau le géreront:

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

Ensuite, si le client est un iPhone, remplacez les liens:

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

Des objections contre cette solution? Devrais-je de préférence commencer par tel:?

10
Boldewyn

Mobile Safari (iPhone & iPod Touch) utilise le schéma tel:.

Comment composer un numéro de téléphone à partir d'une page Web sur iPhone?

8
Jan Aagaard

cela a fonctionné pour moi:

1. créer un lien conforme aux normes:

        <a href="tel:1500100900">

2. le remplacer lorsque le navigateur mobile n'est pas détecté, pour skype:

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

La sélection du lien à remplacer via la classe semble plus efficace. Bien sûr, cela ne fonctionne que sur les ancres avec la classe .phone.

Je l'ai mis dans la fonction if( !isMobile() ) { ... afin qu'il ne se déclenche que lorsque le navigateur de bureau est détecté. Mais celui-ci est probablement obsolète ...

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 )
    );
}
3
devein

RFC3966 définit l'URI standard de l'IETF pour les numéros de téléphone, c'est-à-dire l'URI 'tel:'. C'est la norme. Aucune norme similaire ne spécifie 'callto:', c'est une convention particulière pour Skype sur les plates-formes où cela permet d'enregistrer un gestionnaire d'URI pour le prendre en charge.

3
Leroy Jenkins

Je voudrais utiliser tel: (comme recommandé). Mais pour avoir un meilleur repli/pas d’affichage des pages d’erreur, j’utiliserais quelque chose comme ceci (en utilisant 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:");
    }
});

L'hypothèse est la suivante: les navigateurs mobiles qui ont un cachet mobile dans la chaîne userAgent prennent en charge le protocole tel:. Pour le reste, nous remplaçons le lien par le protocole callto: afin de permettre un repli sur Skype, le cas échéant.

Pour supprimer les pages d'erreur pour les protocoles non pris en charge, le lien est ciblé sur une nouvelle iframe masquée.

Malheureusement, il ne semble pas possible de vérifier si l'URL a été chargée avec succès dans l'iframe. Il semble qu'aucun événement d'erreur ne soit déclenché.

2
jonas_jonas

J'ai utilisé tel: pour mon projet.

Il fonctionnait sous Chrome, Firefox, IE9 et 8, Chrome mobile et le navigateur mobile de mon smartphone Sony Ericsson.

Mais callto: ne fonctionnait pas dans les navigateurs mobiles.

2
fuma

Puisque callto: est pris en charge par défaut par Skype (configuré dans les paramètres de Skype), et que d'autres le prennent également en charge, je vous recommande d'utiliser callto: plutôt que skype:.

1
awe

Bien que Apple recommande tel: dans leur documentation pour Mobile Safari, il accepte actuellement (iOS 4.3) _ de même callto:. Je vous recommande donc d'utiliser callto: sur un site Web générique, car cela fonctionne à la fois avec Skype et sur iPhone et je m'attends à ce que cela fonctionne également sur les téléphones Android.

Mise à jour (juin 2013)

Il s’agit toujours de décider de ce que vous souhaitez que votre page Web propose. Sur mes sites Web, je fournis à la fois les liens tel: et callto: (ce dernier étant désigné pour Skype), car les navigateurs de bureau sur Mac ne font rien avec les liens tel: lorsque vous êtes mobile Android ne fait rien avec les liens callto:. Même Google Chrome avec le plug-in Google Talk ne répond pas aux liens tel:. Néanmoins, je préfère proposer les deux liens sur le bureau au cas où quelqu'un aurait eu du mal à obtenir les liens tel: pour qu'ils fonctionnent sur leur ordinateur.

Si la conception du site indiquait que je ne fournissais qu'un seul lien, j'utiliserais un lien tel: que je tenterais de changer en callto: sur les navigateurs de bureau.

1
Old Pro

À l’aide de jQuery, remplacez tous les numéros de téléphone américains de la page par les schémas appropriés 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;
        }
    });
});

Merci à @jonas_jonas pour l'idée. Nécessite l'excellent fonction findAndReplaceDOMText .

0
bishop