戻れないページJavaScript入門

  1. HOME
  2. JavaScript入門
  3. 戻れないページ

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

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

location.replace()のサンプル

以下のように使います。

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

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

戻ってこれないリンクのサンプル

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

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

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

ページの強制移動

では検索エンジンで下層ページに来た場合に、 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( "https://pazru.net/" );

</script>

サンプルの解説

var str = document.referrer;

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

var sflg = str.indexOf( "search" , 0 );

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

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

if ( sflg != -1 )
  location.replace( "https://pazru.net/" );

最後にif文で、sflgを調べます。 slfgが-1(searchと言う文字が見つからなかった場合)はそのまま、 見つかった場合はlocation.replace()で強制移動します。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers