Wie markiere ich Telefonnummern?

Ich möchte eine Telefonnummer als aufrufbaren Link in einem HTML-Dokument markieren. Ich habe den Mikroformat-Ansatz gelesen und weiß, dass das tel:Schema Standard wäre, aber buchstäblich nirgends implementiert wird.

Skype definiert, soweit ich weiß, skype:und callto:letzteres hat an Popularität gewonnen. Ich gehe davon aus, dass andere Unternehmen entweder andere Pläne haben oder in den callto:Zug steigen.

Was wäre eine bewährte Methode, um eine Telefonnummer zu markieren, damit möglichst viele Personen mit VoIP-Software einfach auf einen Link klicken können, um einen Anruf zu erhalten?

Bonusfrage: Kennt jemand Komplikationen mit Notrufnummern wie 911 in den USA oder 110 in Deutschland?

Prost,

Update: Microsoft NetMeeting verwendet callto:Schemata unter WinXP. Diese Frage legt nahe, dass Microsoft Office Communicator tel:Schemata verarbeitet , jedoch keine callto:. Großartig, Redmond!

Update 2: Zweieinhalb Jahre später. Es scheint sich darauf zu beschränken, was Sie mit der Nummer machen wollen. Im mobilen Kontext tel:ist der Weg zu gehen. Die Ausrichtung auf Desktops liegt bei Ihnen, wenn Sie der Meinung sind, dass Ihre Benutzer mehr Skype-Benutzer sind ( callto:) oder eher Google Voice ( tel:) installiert haben. Meine persönliche Meinung ist, im Zweifelsfall zu verwenden tel:(im Einklang mit der Antwort von @Sidnicious).

Update 3: User @ rybo111 hat festgestellt, dass Skype in Chrome inzwischen auf den Plan getreten ist tel:. Ich kann dies nicht überprüfen, da keine Maschine mit beiden zur Hand ist, aber wenn es wahr ist, bedeutet dies, dass wir hier endlich einen Gewinner haben:tel:

Das tel:Schema wurde Ende der 1990er Jahre angewendet und Anfang 2000 mit RFC 2806 (das 2004 durch den gründlicheren RFC 3966 überholt wurde) dokumentiert und wird weiter verbessert . Die Unterstützung tel:auf dem iPhone war keine willkürliche Entscheidung.

callto:Obwohl es von Skype unterstützt wird, ist es kein Standard und sollte vermieden werden, es sei denn , es richtet sich speziell an Skype-Benutzer.

Mir? Ich würde einfach anfangen, richtig geformte tel:URIs in Ihre Seiten aufzunehmen (ohne den Benutzeragenten zu beschnüffeln) und warten, bis der Rest der Telefone der Welt aufholt :).

Beispiel :

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

Meine Testergebnisse:

Aufruf:

• Nokia Browser: nichts passiert
• Google Chrome: fordert Skype auf, die Nummer anzurufen
• Firefox: fordert Sie auf, ein Programm zum Anrufen der Nummer auszuwählen
• IE: fordert Skype auf, die Nummer anzurufen

tel:

• Nokia Browser: funktioniert
• Google Chrome: Es passiert nichts
• Firefox: "Firefox weiß nicht, wie man diese URL öffnet"
• IE: URL konnte nicht gefunden werden

Am besten beginnen Sie mit tel: das auf allen Handys funktioniert

Geben Sie dann diesen Code ein, der nur auf einem Desktop und nur beim Klicken auf einen Link ausgeführt wird.

Ich verwende http://detectmobilebrowsers.com/ , um mobile Browser zu erkennen. Sie können jede Methode verwenden, die Sie bevorzugen

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

Sie decken also im Grunde alle Ihre Basen ab.

tel: funktioniert auf allen Telefonen, um den Dialer mit der Nummer zu öffnen

callto: Funktioniert auf Ihrem Computer, um von Firefox, Chrome, eine Verbindung zu Skype herzustellen

Wie zu erwarten ist, tel:erstreckt sich die Unterstützung von WebKit auch auf den mobilen Android-Browser - FYI

Ich behalte diese Antwort für "historische" Zwecke, empfehle sie aber nicht mehr. Siehe die Antwort von @Sidnicious oben und mein Update 2.

Da es wie ein Unentschieden zwischen Callto- und Tel-Leuten aussieht, möchte ich eine mögliche Lösung in der Hoffnung einbringen, dass Ihre Kommentare mich wieder auf den Weg des Lichts bringen ;-)

Verwenden callto:, da die meisten Desktop-Clients damit umgehen:

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

Wenn der Client ein iPhone ist, ersetzen Sie die 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:"));
      }
    }
  }
};

Irgendwelche Einwände gegen diese Lösung? Soll ich vorzugsweise von anfangen tel:?

Mobile Safari (iPhone & iPod Touch) verwendet das tel:Schema.

Wie wähle ich eine Telefonnummer von einer Webseite auf dem iPhone?

RFC3966 definiert den IETF-Standard-URI für Telefonnummern, dh den URI 'tel:'. Das ist der Standard. Es gibt keinen ähnlichen Standard, der "callto:" spezifiziert. Dies ist eine spezielle Konvention für Skype auf Plattformen, auf denen die Registrierung eines URI-Handlers zur Unterstützung dieses Konzepts möglich ist.

das hat bei mir funktioniert:

1. Erstellen Sie einen standardkonformen Link:

        <a href="tel:1500100900">

2. Ersetzen Sie es, wenn der mobile Browser nicht erkannt wird, für Skype:

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

Die Auswahl des Links, der über die Klasse ersetzt werden soll, scheint effizienter zu sein. Natürlich funktioniert es nur bei Ankern mit .phoneKlasse.

Ich habe es in Funktion gesetzt, if( !isMobile() ) { ...so dass es nur ausgelöst wird, wenn Desktop-Browser erkannt wird. Aber dieser ist wahrscheinlich veraltet ...

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

Ich habe tel:für mein Projekt verwendet.

Es funktionierte in Chrome, Firefox, IE9 & 8, Chrome Mobile und dem mobilen Browser auf meinem Sony Ericsson-Smartphone.

Funktionierte aber callto:nicht in den mobilen Browsern.

Ich würde verwenden tel:(wie empfohlen). Aber um ein besseres Fallback zu haben / Fehlerseiten nicht anzuzeigen, würde ich so etwas verwenden (mit 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:");
    }
});

Die Annahme ist, dass mobile Browser, die einen mobilen Stempel in der userAgent-Zeichenfolge haben, das tel:Protokoll unterstützen. Im Übrigen ersetzen wir den Link durch das callto:Protokoll, um einen Fallback auf Skype zu erhalten, sofern verfügbar.

Um Fehlerseiten für die nicht unterstützten Protokolle zu unterdrücken, wird der Link auf einen neuen versteckten Iframe ausgerichtet.

Leider scheint es nicht möglich zu sein zu überprüfen, ob die URL erfolgreich in den Iframe geladen wurde. Es scheint, dass keine Fehlerereignisse ausgelöst werden.

Da dies callto:standardmäßig von Skype unterstützt wird (in den Skype-Einstellungen eingerichtet) und andere es ebenfalls unterstützen, würde ich callto:eher die Verwendung als empfehlen skype:.

Obwohl Apple tel:in seinen Dokumenten für Mobile Safari empfiehlt , akzeptiert es derzeit (iOS 4.3) callto:genau dasselbe. Daher empfehle ich die Verwendung callto:auf einer generischen Website, da diese sowohl mit Skype als auch mit dem iPhone funktioniert, und ich gehe davon aus, dass sie auch auf Android-Handys funktioniert.

Update (Juni 2013)

Dies ist immer noch eine Frage der Entscheidung, was Ihre Webseite bieten soll. Auf meinen Websites stelle ich sowohl Links tel:als auch callto:Links zur Verfügung (letzteres wird als für Skype bezeichnet), da Desktop-Browser auf dem Mac nichts mit tel:Links tun, während mobiles Android nichts mit callto:Links macht. Selbst Google Chrome mit dem Google Talk-Plugin reagiert nicht auf tel:Links. Trotzdem bevorzuge ich es, beide Links auf dem Desktop anzubieten, falls sich jemand die Mühe gemacht hat, tel:Links auf seinem Computer zum Laufen zu bringen .

Wenn das Site-Design vorschreibt, dass ich nur einen Link bereitstelle, würde ich einen tel:Link verwenden, zu dem ich in callto:Desktop-Browsern wechseln möchte .

Ersetzen Sie mit jQuery alle US-Telefonnummern auf der Seite durch die entsprechenden callto:oder tel:Schemata.

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

Vielen Dank an @jonas_jonas für die Idee. Erfordert die hervorragende Funktion findAndReplaceDOMText .

Ich verwende das normale <a href="tel:+123456">12 34 56</a>Markup und mache diese Links für Desktop-Benutzer über nicht anklickbarpointer-events: none;

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

Für Browser, die keine Zeigerereignisse unterstützen (IE <11), kann das Klicken mit JavaScript verhindert werden (Beispiel basiert auf Modernizr und jQuery):

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