Wie markiere ich Telefonnummern?

471

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:

Boldewyn
quelle
1
Leider nicht. Es scheint darauf hinauszulaufen, was Ihr Provider (VoiP, Handy-Comp oder was auch immer) tut. Dies kann auch für 800 Nummern berechnet werden.
Boldewyn
1
Ich verwende Google Voice in Chrome und es werden keine tel:URIs erkannt . Ich halte mich immer noch callto:an die Theorie und zeige die Telefonnummer an, dass die Browser des Mobiltelefons die Nummer sowieso automatisch erkennen sollten.
Old Pro
5
Trotz des Titels lautet diese Frage wirklich "Welches URL-Schema sollten Sie für Telefonnummern verwenden" und nicht, wie Sie sie markieren.
Raedwald
1
@Boldewyn Skype wird bei der Verwendung von Chrome mit aufgefordert. tel:Vielleicht sollten Sie am Ende Ihren Kommentar zu Skype mit entfernen callto:.
Rybo111
1
Könnten Sie bitte versuchen, Ihre Fragenaktualisierungen in die entsprechenden Antworten zu bearbeiten. So ist es eine Art Chaos.
idmean

Antworten:

495

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>

s4y
quelle
Danke für die ausführliche Antwort! Da ich die Frage gestellt habe, war ich versucht, auch diesem Ansatz zu folgen. Verwenden Sie den Standard und teilen Sie den Beschwerdeführern mit, dass sie die schlechte App / das schlechte Tool verwenden. Obwohl es schwierig wird, wenn dieser Ihr Kunde ist, denke ich, haben Sie Recht. Wenn ich trotzdem Skype-Benutzer berücksichtigen muss, werde ich mit meiner JavaScript-Lösung umgekehrt vorgehen.
Boldewyn
1
Es ist 2014 und Tel: funktioniert jetzt für Skype. Wenn Sie jedoch einen Anruf beim Skype Echo / Sound Test Service einleiten möchten, lautet der Link <a href="skype:echo123?call"> Rufen Sie den Skype Echo / Sound Test Service </a> von msdn.microsoft aus an. com / de-de / Bibliothek / Büro /…
OzBob
4
Hat jemand das href="tel://1-555-555-5555"Format ausprobiert ? Die Jungs von Tutsplus empfehlen es code.tutsplus.com/tutorials/…
Adrien Be
2
Nach meiner Erfahrung mit dem tel: tag Skype muss der Ländercode mit einem + auf der Nummer stehen (z. B. "+44" für UK-Nummern), um die Nummer richtig zu analysieren. Andernfalls wird nur Skype geöffnet, es wird jedoch nicht versucht zu wählen.
ShaunUK
3
Sollte das Beispiel nicht lauten: <a href="tel:+18475555555">? Beachten Sie das + vor dem ersten 1.)
Stéphane
73

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
Murat
quelle
2
Hinzu kommt, dass das Verhalten für Google Chrome unter Android 4.2.2 (Nexus 4) dasselbe ist. Wenn die Android-Version von Skype im Hintergrund ausgeführt wird, funktioniert callto: links nicht einmal. Kurz gesagt, Sie können Callto: Links nicht wirklich verwenden, wenn Sie momentan auf Mobilgeräte abzielen möchten.
Aendrew
Jetzt auf Chrom 35 erhalten Sie dieses Popup
Pec
In Chrome und Firefox (möglicherweise auch im Internet Explorer) können Sie bei registerProtocolHandler einen Ihrer Webdienste für das tel:Präfix registrieren .
Ross Rogers
Sie müssen eine + Ländercode-Telefonnummer verwenden, die auf Chrom funktioniert. tel: links scheinen nicht zu funktionieren w skype auf chrome ohne +
Stas Svishov
Update unter OSX und Chrome: Es wird gefragt, ob Facetime gestartet werden soll.
Jules
45

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

mordy
quelle
Ja, das - callto: funktioniert überhaupt nicht auf Android (siehe meinen Kommentar zu Murats Antwort) und tel: funktioniert nicht wirklich auf dem Desktop. Es ist wirklich unglücklich.
Aendrew
1
Hmmm, leider scheint eine schnelle jsfiddle dies auch nicht funktionieren zu lassen ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai
Wenn Sie an Seamonkey 2.20 unter Mac 10.8 arbeiten, fügen Sie den <body <?php body_class(); ?>>Code in die header.php-Datei eines WordPress-Themas ein.
Om01
callto: funktionierte nicht für Chrome in Mac und die Version ist aktuell
Ujjwal
21

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

Rymo
quelle
15
Wäre als Kommentar besser gewesen, aber trotzdem gut zu wissen.
o0 '.
10

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:?

Boldewyn
quelle
Es könnte sein, dass das iPhone auch das Callto-Schema unterstützt, Apple jedoch Tel bevorzugt, so dass dies in der Dokumentation erwähnt wird.
Jan Aagaard
5
Siehe meine Antwort. callto:ist ein proprietäres URI-Schema, daher würde ich dort nicht anfangen.
s4y
callto: funktionierte nicht für Chrome in Mac und die Version ist aktuell.
Ujjwal
Das überrascht mich nicht. Die Landschaft war 2009, als die Antwort gegeben wurde, grundlegend anders. Außerdem benötigen Sie ein Programm eines Drittanbieters, das sich für das callto:Schema registriert, z . B. Skype. Chrome selbst hat keine Ahnung, was es tun soll.
Boldewyn
9

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

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

Jan Aagaard
quelle
2
Wenn die Hauptbenutzer das iPhone oder der iPod Tough sind (und möglicherweise andere mobile Geräte, ich weiß nicht ...), sollten Sie tel verwenden: Wenn die Hauptbenutzer normale Webclients sind (IE, Firefox usw.) Mit Skype oder einer anderen VoIP-Software denke ich, dass Callto: am besten wäre.
Ehrfurcht
3

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.

Leroy Jenkins
quelle
Das hat Sidnicious gesagt, ja.
Boldewyn
3

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 )
    );
}
devein
quelle
Der "richtige" Weg, um mobile Browser zu erkennen, besteht darin, nach der Zeichenfolge "mobile" zu suchen, bei der die Groß- und Kleinschreibung nicht berücksichtigt wird.
Kevin Cox
2

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.

Fuma
quelle
2

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.

jonas_jonas
quelle
Gute Verwendung von versteckten Iframes!
Boldewyn
1

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:.

Scheu
quelle
3
Hier stimme ich zu. Aber alles in allem scheint es sich um tel: vs callto: zu handeln, und das ist nicht einfach.
Boldewyn
1

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 .

Alter Pro
quelle
1
Der Aktienbrowser im neuesten Open-Source-Build von Android "Ice Cream Sandwich" scheint weiterhin nur zu unterstützen tel:. Wenn Sie auf einen callto:Link klicken, wird "Webseite nicht verfügbar"
angezeigt
0

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 .

Bischof
quelle
1
Diese Lösung ist nicht ideal, da die Analyse der Benutzeragentenzeichenfolge als schlechte Praxis angesehen wird. Stellen Sie sich ein Gerät vor, das den telURI unterstützt , sich jedoch nicht als Mobiltelefon meldet.
Arturo Torres Sánchez
-1

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;
    });
}
Alex
quelle
1
Die Verwendung Modernizr.touchder Touch Event-Unterstützung zum Ableiten der Unterstützung tel:ist unzuverlässig. Einfache Ausnahmefälle: iPad, Windows-Tablets usw.
zachleat
Sogar Chrome, das auf einem Windows-Desktop ausgeführt wird, meldet sich als Touch-Gerät.
Arturo Torres Sánchez
Einige Computer der Desktop-Klasse unterstützen tel: urls. Für ein Mac-spezifisches Beispiel ist FaceTime auf dem Mac Standard und funktioniert mit tel:. Dabei wird das iPhone des Benutzers mit Handoff / Continuity verwendet, sodass Zeigerereignisse verwendet werden: Keine für Desktops als Ziel ist möglicherweise nicht mehr sinnvoll .
OxC0FFEE