JavaScriptを使ってブラウザの戻るボタンを無効にする方法とは？

「搭載されているブラウザの戻るボタンを無効にしたいな」
「無効にする方法について知りたい」
「JavaScriptのコードで無効にできそうだな」

今回の記事では、JavaScriptを使ってブラウザの「戻るボタン」を無効にする方法についてご紹介していきます。商品の購入ページなどで戻るボタンを押す（ブラウザバックする）と、有効期限切れなどできちんと処理できないことがあります。

ブラウザバックはJavaScriptを活用することで制御できるため、この記事で方法を理解しましょう！

1 ブラウザの戻るボタンを無効化する方法
- 1.1 偽の履歴を追加する
- 1.2 イベント作成をする
2 ブラウザの戻るボタンとはどんなもの？
3 historyオブジェクトについて
- 3.1 pushStateを使いブラウザ履歴を追加
- 3.2 replaceStateでブラウザ履歴の書き換え
4 まとめ

ブラウザの戻るボタンを無効化する方法

では早速ですが、ブラウザのバックボタンを無効化するためのコードを紹介していきます。

history.pushState(null, null, null);
$(window).on("popstate", function (event) {
  if (!event.originalEvent.state) {
    history.pushState(null, null, null);
    return;
  }
});

history.pushState(null, null, null);

$(window).on("popstate", function (event) {

if (!event.originalEvent.state) {

history.pushState(null, null, null);

return;

}

});

こちらのコードをJavaScriptに貼り付けることで、ブラウザバックを禁止させることができます。

また、JavaScriptのライブラリであるjQueryを使ったコードも記載しておきます。jQueryのコードでは、ユーザーがブラウザバックしようとした際にアラートを表示させる内容を記述しています。

$(function(){
 history.pushState(null, null, null); //ブラウザバック無効化
 //ブラウザバックボタン押下時
 $(window).on("popstate", function (event) {
   history.pushState(null, null, null);
   window.alert('前のページに戻る場合は、「前に戻る」ボタンから戻ってください。');
 });
});

$(function(){

history.pushState(null, null, null); //ブラウザバック無効化

//ブラウザバックボタン押下時

$(window).on("popstate", function (event) {

history.pushState(null, null, null);

window.alert('前のページに戻る場合は、「前に戻る」ボタンから戻ってください。');

});

ではそれぞれ重要な役割を果たす箇所を解説していきますね。

偽の履歴を追加する

history.pushState(null, null, null);

1	history.pushState(null, null, null);

この部分で、一度ブラウザバックがされた際に偽の履歴を追加しています。この記述を行うことで、ブラウザバックを1回は阻止することができます。
しかし欠点があり、2回押されると戻ってしまうことです。

イベント作成をする

jQueryのサンプルコードでは、ユーザーがブラウザバックしようとした際にアラートを表示させています。その部分が下記の通りです。

 $(window).on("popstate", function (event) {
   history.pushState(null, null, null);
   window.alert('前のページに戻る場合は、「前に戻る」ボタンから戻ってください。');
 });

$(window).on("popstate", function (event) {

history.pushState(null, null, null);

window.alert('前のページに戻る場合は、「前に戻る」ボタンから戻ってください。');

});

まず下記の部分でイベントを作成するための指示を出しています。

$(window).on("popstate", function (event) {

1	$(window).on("popstate", function (event) {

イベントを作成する指示をしたら、下記の部分でアラートを出すように指示を出しています。

 window.alert('前のページに戻る場合は、「前に戻る」ボタンから戻ってください。');

1	window.alert('前のページに戻る場合は、「前に戻る」ボタンから戻ってください。');

ここで余談ですが、JavaScriptのライブラリであるjQueryを活用することでJavaScriptのコードを簡潔に記述することができるため、積極的にjQueryを活用してみるといいでしょう。

»JavaScript初心者のためのjQueryの$を分かりやすく解説！jQueryを作ってみよう！

ブラウザの戻るボタンとはどんなもの？

ブラウザの戻るボタンを普段から使っている方が多いと思いますが、念のために確認しておきましょう。

「戻るボタン」はブラウザに搭載されてる機能で、過去に閲覧したページへと戻る際に使うボタンのことです。

このボタンをクリックすれば、1つ前のページに簡単に戻ることができますね。過去に閲覧したページに戻れるため、次々にクリックすれば2つ前、3つ前のページと戻ることが可能です。

ブラウザバックの機能は「GoogleChrome」でも「Safari」でも備わっているため、必ずと言っていいほどみなさん使用した経験があるのではないでしょうか。

2つ、3つ前に閲覧したページを再度検索して表示させることは大変ですので、この機能はとても便利ですね。

historyオブジェクトについて

ブラウザの戻るボタンを無効化した際に、「history」というオブジェクトを使用したのは確認できましたか？

JavaScriptの「history」オブジェクトについて、詳しく解説してきます。

pushStateを使いブラウザ履歴を追加

historyオブジェクトを使用する際、その中の「pushStateメソッド」を利用することで履歴を追加することができるようになります。

つまり「pushStateメソッド」で偽の履歴を追加することで、ブラウザバックされた際に偽の履歴に戻すことができ、一度ブラウザバックを防止できるという訳です。

前述したサンプルコードでは「null」を設定しましたが、pushStateは3つの引数を設定することができます。

pushState( state, title, url)

1	pushState( state, title, url)

それぞれ意味を持っており、それが以下の通りとなります。

state：popstateイベントで取得可能なオブジェクトを設定
title：Webサイトのタイトルを設定（非推奨）
url：アドレスバーに表示されるURLを設定

「url」に追加したい履歴のURLを設定することが基本の設定です。
「title」は現在サポートされているブラウザが限られているため、使用はおすすめしません。

replaceStateでブラウザ履歴の書き換え

「replaceState」は先程の「pushState」とほとんど同じ使い方ができます。では何が違うのかと言うと、「pushState」では履歴を追加したのに対して「replaceState」では履歴を上書きする、と言う点です。

書き方としては、以下の通りです。

history.pushState(null,null,"/page1");
history.pushState(null,null,"/page2");
history.replaceState(null,null,"/page3");

history.pushState(null,null,"/page1");

history.pushState(null,null,"/page2");

history.replaceState(null,null,"/page3");

「pushState」で追加した履歴を、あとで「replaceState」にて上書きする仕組みになります。このサンプルコードを実行した場合、ブラウザバックされた際にpage2ではなくpage1に遷移します。

page2がpage3に上書きされて履歴が変更されたため、page1に遷移しました。

まとめ

いかがでしたか？

この記事では、「JavaScriptを使ってブラウザの戻るボタンを無効にする方法」についてご紹介しました。ブラウザバックは便利な機能ですが、場合によってはうまく情報が送信されない原因となってしまいます。

JavaScriptに数行のコードを追記することでブラウザバックは防止できるため、この記事でしっかりと理解し、活用していただけたらと思います。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。