전화 번호를 어떻게 표시합니까?
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;
});
}
참고 URL : https://stackoverflow.com/questions/1164004/how-to-mark-up-phone-numbers
'development' 카테고리의 다른 글
| Swift에서 UIAlertView를 어떻게 만들 수 있습니까? (0) | 2020.02.16 |
|---|---|
| git cherry-pick은“… 38c74d는 병합되었지만 -m 옵션은 제공되지 않았습니다”라고 말합니다. (0) | 2020.02.16 |
| PHP 메일 기능이 이메일 전송을 완료하지 않습니다 (0) | 2020.02.16 |
| Confluence에서 인라인 코드를 포맷하는 방법은 무엇입니까? (0) | 2020.02.16 |
| Hi / Lo 알고리즘은 무엇입니까? (0) | 2020.02.16 |