javascriptでPCとSP判別リダイレクトがうまくいかない

以下のソースコードを埋め込んだPCのURLをタップしたときに、
リダイレクトがループしてずっとチカチカと読み込み中になってしまします。

おそらく自分のURLをタップして自分にリダイレクトが起こるので
ループしているのかなとおもうのですが、正しい書き方が分かりません。。
初歩的なjavascriptの記述が問題だと思いますがどうぞよろしくお願いします。

<script type="text/javascript">　//端末判定でリダイレクト
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        location.href = 'spのURL';
    } else {
        location.href = 'pcのURL';
    }
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

問題はlocation.href = 'spのURL';です。
location.hrefにURLの文字列を代入してしまうと、
例え同じURLであっても即リダイレクトが走ってしまいます。

現在のvar url = location.href等を実行して現在どのURLを閲覧しているかを取り出して、
それがPC版サイトかつ、PCのUserAgentならば
location.hrefへの代入を阻止するような作りにしなければなりません。

わかりやすいように手直しするとこうなります。

JavaScript
1    var spUrl = 'spのURL';
2    var pcUrl = 'pcのURL';
3
4    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
5        if (location.href !== spUrl) {
6            location.href = spUrl;
7        }
8    } else {
9        if (location.href !== pcUrl) {
10            location.href = pcUrl;
11        }
12    }

これを関数作ってもう少しわかりやすくしましょうか。

JavaScript
1    var redirect = function (url) {
2        if (location.href !== url) {
3            location.href = url;
4        }
5    }
6
7    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
8        redirect('spのURL');
9    } else {
10        redirect('pcのURL');
11    }