전화 번호를 어떻게 표시합니까?

HTML 문서에서 전화 번호를 호출 가능한 링크로 표시하고 싶습니다. 나는 microformats 접근법 을 읽었 으며 그 tel:체계가 표준이지만 문자 그대로 구현되지 않았다는 것을 알고 있습니다.

스카이프의 정의는, 내가 아는로 skype:하고 callto:, 후자는 일부 인기를 얻은 데. 나는 다른 회사들이 다른 계획을 가지고 있거나 callto:기차를 타는 것으로 가정합니다 .

가능한 많은 사람들이 VoIP 소프트웨어를 사용하여 전화를 걸 수있는 링크를 클릭 할 수 있도록 전화 번호를 마크 업하는 가장 좋은 방법은 무엇입니까?

보너스 질문 : 미국의 911 또는 독일의 110과 같은 긴급 전화 번호의 합병증에 대해 아는 사람이 있습니까?

건배,

업데이트 : Microsoft NetMeeting은 callto:WinXP 에서 구성표를 사용합니다. 이 질문 은 Microsoft Office Communicator가 tel:체계 를 처리 하지만 체계 는 처리 하지 않을 callto:것을 제안 합니다. 좋아요, 레드몬드!

업데이트 2 : 2 년 반이 지난 지금. 그것은 당신이 숫자로하고 싶은 일로 귀결되는 것 같습니다. 모바일 환경에서는 tel:갈 길입니다. 사용자가 더 많은 Skype 사용자 ( callto:)이거나 Google 보이스 ( tel:) 등이 설치되어 있다고 생각되면 데스크톱을 타겟팅하십시오 . 내 개인적인 의견은 의심 tel:스러운 사용 (@Sidnicious '답변과 일치)입니다.

업데이트 3 : @ rybo111 사용자는 Chrome의 Skype가 그 사이에 뛰어 들었다고 지적했습니다 tel:. 두 기계를 모두 갖춘 기계가 없기 때문에 이것을 확인할 수는 없지만 사실이라면 여기에 승자가 있습니다.tel:

이 tel:계획은 1990 년대 후반 에 사용되었으며 2000 년 초 RFC 2806 ( 2004 년에 보다 철저한 RFC 3966 에 의해 폐기 됨) 과 함께 문서화되었으며 계속 개선되고 있습니다. tel:iPhone 지원 은 임의의 결정이 아닙니다.

callto:Skype에서 지원하는 동안 하는 표준은 아니며 Skype 사용자를 구체적으로 타겟팅하지 않는 한 피해야합니다.

나를? 방금 올바른 형식을 포함하기 시작했습니다.tel: 사용자 에이전트를 스니핑하지 않고 페이지에 URI를 시키기 시작하고 전 세계의 다른 전화가 따라 올 때까지 기다립니다. :).

예 :

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

내 테스트 결과 :

에게 전화 해:

• Nokia 브라우저 : 아무 일도 일어나지 않습니다
• Chrome : 전화를 걸기 위해 스카이프를 실행하라는 메시지가 표시됨
• Firefox : 전화를 걸 프로그램을 선택하도록 요청합니다
• IE : 스카이프를 실행하여 번호를 요청합니다.

전화 :

• Nokia 브라우저 : 작동
• Chrome : 아무 일도 일어나지 않습니다
• Firefox : "Firefox가이 URL을 여는 방법을 모른다"
• IE : URL을 찾을 수 없습니다

가장 좋은 방법은 모든 휴대 전화에서 작동하는 tel로 시작하는 것입니다.

그런 다음이 코드를 입력하십시오.이 코드는 데스크탑에서만 링크를 클릭 할 때만 실행됩니다.

http://detectmobilebrowsers.com/ 을 사용하여 모바일 브라우저를 감지하므로 원하는 방법을 사용할 수 있습니다

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

기본적으로 모든 기지를 덮습니다.

전화 : 전화 번호를 사용하여 모든 전화에서 작동합니다.

callto : 컴퓨터에서 Firefox, Chrome의 스카이프에 연결합니다.

예상대로 WebKit의 지원은 tel:Android 모바일 브라우저로도 확장됩니다.-FYI

이 답변을 "역사적"목적으로 유지하지만 더 이상 권장하지 않습니다. 위의 @Sidnicious '답변과 내 업데이트 2를 참조하십시오.

그것은 callto와 tel 녀석 사이의 그림처럼 보이기 때문에, 희망에 가능한 해결책을 던지기를 원합니다. 당신의 의견은 빛의 길로 되돌아 갈 것입니다 ;-)

사용 callto:대부분의 데스크탑 클라이언트는 그것을 처리하기 때문에, :

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

그런 다음 클라이언트가 iPhone 인 경우 링크를 바꾸십시오.

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

이 솔루션에 대한 반대 의견이 있으십니까? 가급적부터 시작해야합니까 tel:?

Mobile Safari (iPhone 및 iPod Touch)는이 tel:구성표를 사용합니다 .

iPhone의 웹 페이지에서 전화 번호를 어떻게 다이얼합니까?

RFC3966 은 전화 번호에 대한 IETF 표준 URI, 즉 'tel :'URI를 정의합니다. 이것이 표준입니다. 'callto :'를 지정하는 유사한 표준은 없습니다. 이는 플랫폼에서 Skype를 지원하기 위해 URI 처리기를 등록 할 수있는 특정 규칙입니다.

이것은 나를 위해 일했다 :

1. 표준 준수 링크를 만듭니다.

        <a href="tel:1500100900">

2. 스카이프를 위해 모바일 브라우저가 감지되지 않으면 교체하십시오.

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

클래스를 통해 바꿀 링크를 선택하는 것이 더 효율적입니다. 물론 .phone클래스가있는 앵커에서만 작동합니다 .

if( !isMobile() ) { ...데스크톱 브라우저를 감지 할 때만 트리거되도록 기능에 넣었습니다 . 그러나 이것은 아마도 쓸모없는 것입니다 ...

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

나는 tel:내 프로젝트에 사용 했다.

Chrome, Firefox, IE9 & 8, Chrome 모바일 및 Sony Ericsson 스마트 폰의 모바일 브라우저에서 작동했습니다.

그러나 callto:모바일 브라우저에서는 작동하지 않았습니다.

내가 사용합니다 tel:(권장). 그러나 더 나은 폴백 / 표시 오류 페이지를 갖기 위해 다음과 같은 것을 사용합니다 (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:");
    }
});

userAgent-string에 모바일 스탬프가있는 모바일 브라우저는 tel:프로토콜 을 지원한다고 가정 합니다. 나머지는 링크를callto: 에서는 사용 가능한 경우 Skype로 대체되도록 프로토콜로 대체합니다.

지원되지 않는 프로토콜에 대한 오류 페이지를 억제하기 위해 링크는 새로운 숨겨진 iframe을 대상으로합니다.

불행히도 URL이 iframe에 성공적으로로드 된 경우 확인할 수없는 것 같습니다. 오류 이벤트가 발생하지 않은 것 같습니다.

이후 callto:(스카이프 설정에서 설정) 스카이프가 지원하는 기본 단위이며, 다른 사람들도 그것을지지 않는, 내가 사용하는 것이 좋습니다 것 callto:보다는 skype:.

Apple tel:은 현재 (iOS 4.3) Mobile Safari 문서를 권장하지만 callto:동일하게 적용됩니다. 그래서 나는 사용하는 것이 좋습니다callto: Skype 및 iPhone에서 모두 작동하므로 일반 웹 사이트에서 하는 . Android 전화에서도 작동 할 것으로 예상됩니다.

업데이트 (2013 년 6 월)

이것은 여전히 ​​웹 페이지가 제공 할 것을 결정하는 문제입니다. Mac의 데스크톱 브라우저는 링크 와 관련이 없으며 모바일 Android는 링크 와 관련 이 없으므로 내 웹 사이트에서 링크 tel:와 callto:링크를 제공합니다 (후자는 Skype 용으로 표시되어 있음) . Google 토크 플러그인이있는 Chrome조차도 링크에 응답하지 않습니다 . 그래도 누군가 누군가가 어려움을 겪을 경우를 대비하여 바탕 화면에 두 링크를 모두 제공하는 것을 선호합니다.tel:callto:tel:tel: 컴퓨터에서 링크를 작동 합니다.

사이트 디자인에서 하나의 링크 만 제공하도록 지시 한 경우 데스크톱 브라우저 tel:에서 변경하려고 하는 링크를 사용 callto:합니다.

jQuery를 사용하여 페이지의 모든 미국 전화 번호를 적절한 callto:또는 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;
        }
    });
});

아이디어를위한 @jonas_jonas에게 감사합니다. 우수한 findAndReplaceDOMText 함수가 필요합니다 .

일반 <a href="tel:+123456">12 34 56</a>마크 업을 사용하여 데스크톱 사용자가 해당 링크를 클릭 할 수 없도록합니다.pointer-events: none;

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

포인터 이벤트를 지원하지 않는 브라우저 (IE <11)의 경우 JavaScript로 클릭을 방지 할 수 있습니다 (예 : Modernizr 및 jQuery에 의존).

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