JavaScript:一つのリンクをPC用URLとスマホ用URLに切り分ける

goto_jp 1,015views 更新:2014年10月15日

PCで見た場合はPC用URL、スマホで見た場合はスマホ用URLに切り分けるというリンクを作ります。

<a href="http://www.example.com/pc.html" id="changeLink1">リンク</a>

上記のようなリンクを用意します。
HTML側ではPC用のURLを設定しておきます。

ヘッダーでも外部ファイルでもよいですが、JavaScriptに下記の関数を作ります。

function uaLinkChanger($id,$url) {
    var link = document.getElementById($id);
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) ||
        ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
        link.href = $url;
    }
}

ユーザーエージェントがiOS(iPadは除く)かAndroidだった場合、指定のIDを指定のURLに書き換えるスクリプトです。

JSの記述ができたら、冒頭のHTMLに併せて下記のように呼び出します。

<a href="http://www.example.com/pc.html" id="changeLink1">リンク</a>
<script type="text/javascript">
uaLinkChanger('changeLink1','http://www.example.com/smp.html');
</script>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません