Jak oznaczyć numery telefonów?

471

Chcę oznaczyć numer telefonu jako link do wywołania w dokumencie HTML. Przeczytałem podejście do mikroformatów i wiem, że tel:schemat byłby standardowy, ale dosłownie nigdzie nie został wdrożony.

Definiuje Skype, o ile wiem, skype:i callto:ten ostatni po zyskała pewną popularność. Zakładam, że inne firmy mają albo inne plany, albo wskakują do callto:pociągu.

Jaka byłaby najlepsza praktyka oznaczania numeru telefonu, aby jak najwięcej osób korzystających z oprogramowania VoIP mogło po prostu kliknąć łącze, aby uzyskać połączenie?

Pytanie dodatkowe: Czy ktoś wie o komplikacjach związanych z numerami alarmowymi, takimi jak 911 w USA lub 110 w Niemczech?

Twoje zdrowie,

Aktualizacja: Microsoft NetMeeting przyjmuje callto:schematy pod WinXP. To pytanie sugeruje, że Microsoft Office Communicator będzie obsługiwał tel:schematy, ale nie callto:te. Świetnie, Redmond!

Aktualizacja 2: Dwa i pół roku później. Wydaje się, że sprowadza się do tego, co chcesz zrobić z liczbą. W kontekście mobilnym tel:jest to najlepsza droga. Kierowanie na komputery zależy od Ciebie, jeśli uważasz, że Twoimi użytkownikami jest więcej użytkowników Skype ( callto:) lub prawdopodobnie tel:zainstalujesz coś takiego jak Google Voice ( ). Moje osobiste zdanie brzmi: w razie wątpliwości użyj tel:(zgodnie z odpowiedzią @Sidnicious).

Aktualizacja 3: Użytkownik @ rybo111 zauważył, że Skype w Chrome w międzyczasie wskoczył na tel:modę. Nie mogę tego zweryfikować, ponieważ żadna maszyna nie jest pod ręką, ale jeśli to prawda, oznacza to, że w końcu mamy tutaj zwycięzcę:tel:

Boldewyn
źródło
1
Niestety nie. Wydaje się, że sprowadza się to do tego, co robi twój dostawca (VoiP, telefon komórkowy itp.). Może to być również opłata za 800 numerów.
Boldewyn
1
Korzystam z Google Voice w Chrome i nie rozpoznaje tel:URI. Nadal trzymam się callto:i wyświetlałem numer telefonu w teorii, że przeglądarki telefonów komórkowych i tak powinny automatycznie wykrywać numer.
Old Pro
5
Pomimo tytułu to pytanie brzmi „raczej, jakiego schematu adresów URL należy użyć w przypadku numerów telefonów”, a nie jak je oznaczyć.
Raedwald
1
@Boldewyn Skype jest monitowany podczas korzystania z Chrome, tel:więc może powinieneś usunąć swój komentarz na końcu na temat korzystania ze Skype callto:?
rybo111
1
Czy możesz spróbować edytować swoje aktualizacje pytań w odpowiednich odpowiedziach? W ten sposób to trochę bałagan.
idmean

Odpowiedzi:

495

Program tel:ten został zastosowany pod koniec lat 90. XX wieku i udokumentowany na początku 2000 r. RFC 2806 (który został przestarzały w wyniku bardziej szczegółowego RFC 3966 w 2004 r.) I nadal jest udoskonalany . Wsparcie tel:na iPhonie nie było decyzją arbitralną.

callto:, chociaż jest obsługiwany przez Skype, nie jest standardem i należy go unikać, chyba że jest skierowany konkretnie do użytkowników Skype.

Mnie? Po prostu zacznę uwzględniać poprawnie utworzone tel:identyfikatory URI na twoich stronach (bez wąchania agenta użytkownika) i czekam, aż reszta telefonów na świecie nadąży :)

Przykład :

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

s4y
źródło
Dzięki za szczegółową odpowiedź! Ponieważ zadałem to pytanie, również miałem ochotę zastosować to podejście. Skorzystaj ze standardu i powiedz skarżącym się, że używają złej aplikacji / narzędzia. Chociaż staje się trudny, jeśli ten jest twoim klientem, myślę, że masz rację. Jeśli jednak muszę wziąć pod uwagę użytkowników Skype, skorzystam z mojego rozwiązania JavaScript na odwrót.
Boldewyn
1
Jest 2014 i Tel: teraz działa na Skype. Ale jeśli chcesz zainicjować połączenie z usługą Skype Echo / Sound Test, link będzie <a href="skype:echo123?call"> Zadzwoń do Skype Echo / Sound Test Service </a> z msdn.microsoft. com / en-us / library / office /…
OzBob
4
Ktoś próbował href="tel://1-555-555-5555"formatować? chłopaki z Tutsplus polecają to code.tutsplus.com/tutorials/...
Adrien Be
2
Z mojego doświadczenia z tel: tag Skype wymaga, aby numer kierunkowy kraju z + znajdował się na numerze (np. „+44” dla numerów w Wielkiej Brytanii), aby poprawnie parsować numer. W przeciwnym razie po prostu otwiera Skype, ale nie próbuje się połączyć.
ShaunUK
3
Czy nie powinien to być przykład: <a href="tel:+18475555555">? Uwaga + przed początkowym 1.)
Stéphane
73

Moje wyniki testu:

Dzwonić do:

  • Przeglądarka Nokia: nic się nie dzieje
  • Google Chrome: prosi o uruchomienie skype, aby zadzwonić pod ten numer
  • Firefox: prosi o wybranie programu do połączenia z tym numerem
  • IE: prosi o uruchomienie skype, aby zadzwonić pod ten numer

tel:

  • Przeglądarka Nokia: działa
  • Google Chrome: nic się nie dzieje
  • Firefox: „Firefox nie wie, jak otworzyć ten adres URL”
  • IE: nie można znaleźć adresu URL
Murat
źródło
2
Aby dodać do tego, zachowanie jest takie samo dla Google Chrome na Androida 4.2.2 (Nexus 4). Wersja Skype na Androida działająca w tle nie sprawia, że ​​callto: linki działają. Krótko mówiąc, tak naprawdę nie możesz użyć linków callto:, jeśli chcesz w tej chwili kierować reklamy na telefon komórkowy.
aendrew
Teraz na Chrome 35 dostajesz to okienko
pec
W chrome i firefox (może również IE) możesz zarejestrować swoją usługę internetową dla tel:prefiksu za pomocą registerProtocolHandler .
Ross Rogers
Musisz użyć + numeru telefonu Countrycode, który działa na Chrome. tel: linki nie wydają się działać w skype na chrome w / o +
Stas Svishov
Aktualizacja w OSX i Chrome: prosi o uruchomienie Facetime.
Jules
45

Najlepiej jest zacząć od tel: który działa na wszystkich telefonach komórkowych

Następnie wprowadź ten kod, który będzie działał tylko na komputerze i tylko po kliknięciu łącza.

Używam http://detectmobilebrowsers.com/ do wykrywania przeglądarek mobilnych, możesz użyć dowolnej metody

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

Więc w zasadzie obejmujesz wszystkie swoje bazy.

tel: działa na wszystkich telefonach, aby otworzyć dialer z numerem

callto: działa na twoim komputerze, aby połączyć się ze skype z Firefoxa, Chrome

mordy
źródło
Tak, to - callto: w ogóle nie działa na Androidzie (zobacz mój komentarz do odpowiedzi Murata), a tel: tak naprawdę nie działa na komputerze. To naprawdę niefortunne.
aendrew
1
Hmmm, niestety szybki jsfiddle nie wydaje się pozwalać na to ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai
Pracując na Seamonkey 2.20 na Macu 10.8 umieść poniżej <body <?php body_class(); ?>>kodu w pliku header.php kompozycji wordpress.
om01
callto: nie działało dla Chrome w systemie Mac, a wersja jest aktualna
Ujjwal
Niestety zostało to amortyzowane w JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed
Casebash
21

Jak można się spodziewać, obsługa WebKit tel:obejmuje również przeglądarkę mobilną z systemem Android - FYI

rymo
źródło
15
Byłoby lepiej jako komentarz, ale i tak dobrze wiedzieć.
o0 ”.
10

Zachowuję tę odpowiedź do celów „historycznych”, ale już jej nie polecam. Zobacz odpowiedź @Sidnicious powyżej i moją aktualizację 2.

Ponieważ wygląda to na remis między callto a telem, chcę wrzucić możliwe rozwiązanie w nadziei, że wasze komentarze przywrócą mnie na światło ;-)

Korzystanie callto:, ponieważ większość klientów stacjonarnych sobie z tym poradzi:

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

Następnie, jeśli klientem jest iPhone, zamień łącza:

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

Jakieś zastrzeżenia wobec tego rozwiązania? Czy powinienem zacząć od tel:?

Boldewyn
źródło
Możliwe, że iPhone obsługuje również schemat callto, ale Apple preferuje tel, więc to ten wymieniony w dokumentacji.
Jan Aagaard
5
Zobacz moją odpowiedź. callto:jest zastrzeżonym schematem URI, więc nie zacznę od tego.
s4y
callto: nie działało dla Chrome w systemie Mac, a wersja jest aktualna.
Ujjwal
To mnie nie dziwi. Krajobraz był zasadniczo inny w 2009 roku, kiedy udzielono odpowiedzi. Potrzebny jest również program innej firmy, który rejestruje się w callto:programie, taki jak Skype. Sam Chrome nie ma pojęcia, co powinien zrobić.
Boldewyn
9

Mobile Safari (iPhone i iPod Touch) korzysta ze tel:schematu.

Jak wybrać numer telefonu ze strony internetowej na iPhonie?

Jan Aagaard
źródło
2
Więc jeśli głównymi docelowymi użytkownikami są iPhone lub iPod Tough (i może inne urządzenia mobilne, nie wiem ...), powinieneś użyć tel: Jeśli głównymi użytkownikami są normalni klienci sieci (IE, Firefox itp.) używając skype lub innego oprogramowania VoIP, myślę, że callto: byłoby najlepsze.
respekt
3

RFC3966 definiuje standardowy identyfikator URI IETF dla numerów telefonów, tj. Identyfikator URI „tel:”. To jest standard. Nie ma podobnego standardu, który określa „callto:”, jest to szczególna konwencja dla Skype'a na platformach, na której można zarejestrować obsługę URI w celu jej obsługi.

Leroy Jenkins
źródło
Tak powiedział Sidnicious, tak.
Boldewyn
3

to działało dla mnie:

1. wykonaj link zgodny ze standardami:

        <a href="tel:1500100900">

2. zastąp go, gdy przeglądarka mobilna nie zostanie wykryta, dla skype:

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

Wybór linku do zastąpienia przez klasę wydaje się bardziej wydajny. Oczywiście działa tylko na kotwicach z .phoneklasą.

Włączyłem tę funkcję, if( !isMobile() ) { ...aby uruchamiała się tylko po wykryciu przeglądarki pulpitu. Ale ten jest prawdopodobnie przestarzały ...

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
źródło
„Właściwym” sposobem wykrywania przeglądarek mobilnych jest sprawdzenie, czy ciąg „mobile” nie rozróżnia wielkości liter.
Kevin Cox,
2

Użyłem tel:do mojego projektu.

Działa w Chrome, Firefox, IE9 i 8, Chrome Mobile i mobilnej przeglądarce na moim smartfonie Sony Ericsson.

Ale callto:nie działało w przeglądarkach mobilnych.

fuma
źródło
2

Chciałbym użyć tel:(zgodnie z zaleceniami). Ale aby mieć lepszą rezerwę / brak wyświetlania stron błędów, użyłbym czegoś takiego (używając 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:");
    }
});

Zakłada się, że przeglądarki mobilne, które mają znaczek mobilny w ciągu użytkownikaAgent-string, obsługują tel:protokół. W pozostałej części zastępujemy łącze callto:protokołem, aby zapewnić powrót do Skype'a, jeśli jest dostępny.

Aby ukryć strony błędów dla nieobsługiwanych protokołów, odsyłacz jest kierowany do nowej ukrytej ramki iframe.

Niestety nie wydaje się możliwe sprawdzenie, czy adres URL został pomyślnie załadowany do elementu iframe. Wygląda na to, że nie są wywoływane żadne zdarzenia błędów.

jonas_jonas
źródło
Ładne użycie ukrytych ramek iframe!
Boldewyn
1

Ponieważ callto:jest domyślnie obsługiwany przez skype (skonfigurowany w ustawieniach Skype), a inni też go obsługują, zalecałbym używanie callto:zamiast skype:.

groza
źródło
3
Zgadzam się. Ale wszystko razem wydaje się sprowadzać do tel: vs callto :, i to nie jest łatwe.
Boldewyn
1

Chociaż Apple zaleca tel:w swoich dokumentach Mobile Safari, obecnie (iOS 4.3) akceptuje callto:to samo. Dlatego polecam korzystanie callto:z ogólnej strony internetowej, ponieważ działa ona zarówno ze Skype, jak i iPhone'em i spodziewam się, że będzie działać również na telefonach z Androidem.

Aktualizacja (czerwiec 2013)

Nadal pozostaje kwestia decydowania o tym, co ma oferować Twoja strona internetowa. Na moich stronach internetowych udostępniam zarówno linki, jak tel:i te callto:(oznaczone jako Skype), ponieważ przeglądarki Desktop na Macu nie robią nic z tel:linkami, podczas gdy mobilny Android nie robi nic z callto:linkami. Nawet Google Chrome z wtyczką Google Talk nie reaguje na tel:linki. Mimo to wolę oferować oba łącza na pulpicie, na wypadek gdyby ktoś miał problem z uzyskaniem tel:linków do pracy na swoim komputerze.

Jeśli projekt witryny podyktowałby, że podam tylko jeden link, użyłbym tel:linku, który chciałbym zmienić callto:w przeglądarkach komputerowych.

Old Pro
źródło
1
wydaje się, że przeglądarka zapasowa w najnowszej wersji Androida „Ice Cream Sandwich” typu open source obsługuje tylko tel:; kliknięcie callto:linku powoduje „Strona niedostępna”
rymo
0

Korzystając z jQuery, zamień wszystkie amerykańskie numery telefonów na stronie na odpowiednie callto:lub tel:schematy.

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

Dzięki @jonas_jonas za pomysł. Wymaga doskonałej funkcji findAndReplaceDOMText .

biskup
źródło
1
To rozwiązanie nie jest idealne, ponieważ analiza ciągu agenta użytkownika jest uważana za złą praktykę. Rozważ urządzenie, które obsługuje telidentyfikator URI, ale nie zgłasza się jako urządzenie mobilne.
Arturo Torres Sánchez
-1

Używam normalnego języka <a href="tel:+123456">12 34 56</a>znaczników i uniemożliwiam klikanie tych linków użytkownikom komputerów za pośrednictwempointer-events: none;

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

w przeglądarkach, które nie obsługują zdarzeń wskaźnika (IE <11), można zapobiec kliknięciu za pomocą JavaScript (przykład opiera się na Modernizr i jQuery):

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}
Alex
źródło
1
Korzystanie Modernizr.touchktóry jest wsparcie dotykowy zdarzenia na wsparcie wnioskować o tel:to niewiarygodne. Łatwe wyjątki: iPad, tablet z Windows itp.
zachleat
Nawet Chrome działający na pulpicie systemu Windows zgłasza się jako urządzenie dotykowe.
Arturo Torres Sánchez
Niektóre maszyny klasy stacjonarnej obsługują tel: urls. Na przykład dla komputerów Mac FaceTime na komputerze Mac jest standardem i działa z tel :, posuwając się tak daleko, że używa iPhone'a użytkownika w Handoff / Continuity, więc użycie wskaźnika-event: żaden cel na pulpicie może nie być mądrym rozwiązaniem .
OxC0FFEE