location.replace()で戻れないページを作る

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 戻れないページを作る

戻れないページを作る

今回は、ブラウザの「戻るボタン」 を押しても戻ることができないようにしてみたいと思います。 この機能は検索エンジンなどで望まないページにアクセスされた時に、 強制的にTOPページへジャンプさせたりする時に使います。

今のページに戻れなくするには、ブラウザの履歴にURLを登録させないようにします。 Aタグやlocation.hrefを使うと現在のページが履歴に残るので、 location.replace()というものを使います。

location.replace()でリンクさせる

では、location.replace()を使ってリンクボタンを作ってみましょう。 HTMLのbody内に以下のように記入してみましょう。

<script>
function goTop(){
  location.replace("http://pori2.net/");
}
</script>

<form>
<input type="button" value="サンプル" onclick="goTop()">
</form>

上記のサンプルボタンを押すと、うちのサイトのTOPページへ移動します。 そこでブラウザの戻るボタンを押しても、このページに戻ることができません。 確認して下さい。戻れなくなりますが(汗)

location.replace()の場合は、後ろの括弧内にジャンプ先を記入します。 location.hrefは「=」で指定しますが、方法が違うので注意しましょう (私もよく間違えます)。

location.replace(URL)
履歴を残さずに、カッコ内に指定したURLに移動します

ページの強制移動

では検索エンジンで下層ページに来た場合に、 TOPへ強制移動させる方法について掲載してみます。

この場合はまずどこからリンクしてきたかを調べて、 URLに「search」という文字が含まれているとTOPページに強制移動させます。 戻るボタンを押されても履歴にURLは登録されていないので、 ジャンプ元のページではなくその前の検索結果ページに戻ります。

強制移動するページのbody内の一番上に、次のように書いておきます。

<script>
//変数strに、直前のページURLを入れる
var str = document.referrer;

//str内に「search」という文字列があるか調べる
var sflg = str.indexOf( "search" , 0 );

//search文字列がある場合に強制移動
if ( sflg != -1 )
  location.replace( "http://pori2.net/" );

</script>

では上から解説していきます。 まず直前のページのURLを調べるには、document.referrerを使います。 URLを変数strに代入しています。

document.referrer
直前のページURLを取得します

次に、特定の文字が含まれているかどうか確かめるためindexOf()を使います。 調べたい文字列を前に書き、ピリオドで結んでindexOfを書きます。 カッコ内は最初に調べたい文字列を、 次に文字列の検索スタート位置を書きます。 スタート位置は通常0でOKです。

もしも検索文字列が見つかったなら、 変数sflgに文字列の位置(前から何番目の文字か)が入ります。 見つからない場合は-1が入ります。

文字列.indexOf( 検索文字列 , 検索スタート位置 )
文字を検索し、Hitすると何番目の文字かを取得します。
見つからない場合は-1を返します。

最後にif文で、sflgを調べます。 slfgが-1(searchと言う文字が見つからなかった場合)はそのまま、 見つかった場合はlocation.replace()で強制移動します。 移動先はご自身のサイトのTOPページURLにして下さい。

まあこのようにして強制移動させられますが、 大抵の場合はお客さんを逃がすことになります(汗)。 ということで、あまり多用しない方が良いでしょう。