JavaScriptでブラウザのバック(戻る)ボタンを制御・禁止する方法

ブラウザは過去に閲覧したWebページの履歴情報を持っているのですが、これによりバック（戻る）ボタンをクリックすることで過去のWebページへ簡単に戻れます。

実はJavaScriptではこのブラウザが持っているバック（戻る）ボタンをプログラムから制御することが可能です。

しかしながら、どのように学習を進めて使いこなしたら良いのか迷う方も少なくないでしょう。

こんにちは！ライターのマサトです。

この記事では、初心者でも今日からJavaScriptでバック（戻る）ボタンを制御する手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

バック（戻る）ボタンとは？

一般的にバック（戻る）ボタンと言われているのは、ブラウザに搭載されている過去に閲覧したWebサイトに戻るためのボタンのことを指します。

このボタンをクリックすることで、1つ前のWebサイトに戻ることが可能で続けてクリックすることで次々と遡っていくことができます。

本記事では、このボタンをJavaScriptから制御するための手法について、一緒に学習を進めていきますのでぜひ参考にしてみてください！

historyオブジェクトの使い方

この章では、ブラウザの履歴情報にアクセスできるhistoryオブジェクトの使い方について見ていきましょう。主に、履歴情報の追加・更新について学んでいきます。

pushStateでブラウザ履歴を追加する方法

JavaScriptではブラウザ履歴を制御するためにhistoryオブジェクトが提供されているのですが、その中にあるpushStateメソッドを利用すると意図的に履歴を追加することができます。

そのため、JavaScriptで何らかの実行をした状態を履歴として残しておけば、戻るボタンで前の状態に戻すことができるというわけです。

pushStateは3つの引数を設定することができます。

pushState( state, title, url)

それぞれの詳細は以下の通りです。

基本的には第3引数のurlに、追加したい履歴のURLを設定することになります。また、第2引数のtitleは現在サポートされているブラウザが限られるので使わない方が良いでしょう。

第1引数のstateに関しては、履歴を追加するときに任意のオブジェクトを当てはめることが可能で、これは後述するpopStateイベントにて取得することができます。

一般的な使い方として、次のサンプル例を見てください！

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

この例では、URLの最後にpage1〜page3を履歴に追加しています。そのため、バック（戻る）ボタンをクリックしていくと順番に遡っていくことができるわけです。

replaceStateでブラウザ履歴を書き換える方法

replaceStateは先ほどのpushStateとほとんど同じ使い方ができるのですが、違うのは現在の履歴を上書きするということです。

例えば、次のサンプル例を見てください！

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

この例では、page2の履歴を追加したあとにreplaceStateでpage3を作成していますね。

これで実行すると、アドレスバーにはpage3のURLが表示されているわけですが、バック（戻る）ボタンをクリックするとpage2ではなくpage1に遷移します。

つまり、page2が上書きされてpage3へと履歴が変更されたことを意味するわけです。

popStateの使い方

この章では、バック（戻る）ボタンをクリックした時に発動するイベント処理について詳しく見ていきましょう。主に、popStateイベント処理による検出方法、stateプロパティの取得、注意点について学んでいきます。

戻るボタンをクリックしたかを検出する

ブラウザのバック(戻る)ボタンをクリックしたことを検出するために、JavaScriptではpopStateイベント処理が提供されています。

このイベント処理内に記述したプログラムは、ユーザーがバック(戻る)ボタンをクリックした瞬間に発動させることができるわけです。(進むボタンも同様)

次のサンプル例を見てください！

window.addEventListener('popstate', function(e) {

    console.log('ボタンがクリックされました');

});

この例ではpopstateイベントを作成しているのですが、ブラウザのボタンをクリックしたかどうかを検出するためにwindowオブジェクトにイベント処理を付与しているのがポイントです。

このコードを実行してブラウザのバック(戻る)ボタンをクリックすると、コンソールログに指定した文字列が出力されます。

pushStateのstateプロパティを取得する

pushStateメソッドには3つの引数を設定できると解説しましが、第1引数に設定できる任意のオブジェクトを取得するにはpopStateによるイベント処理が不可欠です。

例えば、pushStateで次のようなメソッドを実行してみましょう。

history.pushState( {page:3},null,"/page3");

この例では、第1引数に{page:3}というオブジェクトを設定しています。このオブジェクトの値を取得するにはpopStateイベントで次のように記述します。

window.addEventListener('popstate', function(e) {

    console.log(e.state);

});

実行結果

{page:3}

popStateイベントの関数で受け取れる引数eのイベントオブジェクトを使うと、stateプロパティにアクセスすることができるわけです。

これにより意図的に履歴情報を追加した際に、何らかのデータも一緒に提供することができるので便利です。

バック(戻る)ボタンを禁止する

これまで学習したpushState / popStateを活用すると、ユーザーがバック(戻る)ボタンをクリックしても無効化させることが可能になります。

仕組みは簡単で、ボタンをクリックした時に発動されるpopStateイベント処理内において、履歴を残さないような処理を記述すれば良いわけです。

次のサンプル例を見てください！

window.addEventListener("popstate", function (e) {

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

});

この例ではpopStateイベント処理内において、pushStateメソッドを引数すべてnullに設定して実行しているのが分かりますね。これにより、ブラウザの履歴には何も追加しないことになるので、バック(戻る)ボタンをクリックしても反応しなくなるわけです。

ただし、この状態だと別のWebページから訪問してきたユーザーがバック(戻る)ボタンをクリックできてしまいます。

そこで、popStateイベント処理と一緒に次の1行も追記しておけば良いでしょう。

history.pushState(null, null, null);

これで他のWebページから訪問してきたユーザーも、履歴情報が無くなるので実質バック(戻る)ボタンは無効化されて反応しなくなるというわけです。

まとめ

今回は、JavaScriptでバック(戻る)ボタンを制御する方法について学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！