電話番号へのリンクをパソコンでエラーにしない、ユーザーエージェントによる書き換え

公開日：2013年10月15日　

電話番号へのリンクは、パソコンでクリックするとブラウザによってはエラーになってしまいます。なので、ユーザーエージェントでこの部分を切り替える方法を探したらあったのでメモ。

追記:2013.12.30
本記事の方法でうまくいかない場合、Tips Note様のレスポンシブのサイトでスマホの時だけtelリンクを有効にするもお試しください。jquery使っている環境ならこの記事の「■jQuery版」が良いかもしれません。

iPhoneの標準ブラウザであるsafariでは、03-9999-9999といった電話番号のような数列を、ちゃんと電話番号として認識し、タップすると電話がかけられるようになってます。

しかし、別のiPhoneブラウザのgoogle chromeには、そのような機能はありません。

何とかしてchromeでも電話番号をタップして電話をかけられるようにしたいと思い、とりあえず＜a href=”tel:0399999999″＞という古典的な方法を試したのですが、これだと電話機以外でタップやクリックすると、ブラウザによっては、大げさなエラーがでます。

denwa-link1

firefoxは、わざわざ新ページまで開いて大げさにエラーが出る

chrome（PC版）など、何も起こらないブラウザもありますが、このエラーを起こしたくなかったので、調べてみました。

そしたらあった。

a href=tel　→　PCで表示させない方法　OKWave

ユーザーエージェントで切り替える方法です。

実装

DEMO

まずhead内に下記のスクリプトを貼り付けます。

<script type='text/javascript'>
function smtel(telno){
if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
document.write('<a href="tel:'+telno+'">'+telno+'</a>');
}else{
document.write(telno);
}
}
</script>

function smtel(telno){

if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){

document.write('<a href="tel:'+telno+'">'+telno+'</a>');

}else{

document.write(telno);

}

</script>

そして、body内の該当箇所を下記の３番目のようにするだけです。
下記はDEMOのbody内のソースです。

<div>03-9999-9999</div>
<p>↑文字で電話番号を書いただけ。iPhone safariは自動的に電話番号として認識する。chromeだと認識しない</p>

<div><a href="tel:0399999999">03-9999-9999</a></div>
<p>↑aタグtel:で電話番号を書いた。クリックすればスマホから電話がかけられる。しかし、電話機ではないブラウザでクリックするとエラーになる。</p>

<div><script type="text/javascript">smtel('03-9999-9999');</script></div>
<p>↑今回書いた方法で書いたもの。スマホ（今回はiPhoneとAndroid）から電話がかけられる。その他のデバイスだと何もおこらない。</p>