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


ブラウザのバック(戻る)ボタンはJavaScriptで制御できるんだろうか
前の履歴に戻れないようにしてみたい
ブラウザの履歴を操作するイベント処理はどうやって使うの?

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

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

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

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

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

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

  • バック(戻る)ボタンをプログラムで制御したい方
  • 過去のWebページに戻れないように操作したい方
  • ブラウザの履歴操作のイベント処理を構築したい方

バック(戻る)ボタンとは?

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

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

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

historyオブジェクトの使い方

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

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

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

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

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

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

  • state:popstateイベントで取得可能なオブジェクトを設定
  • title:Webサイトのタイトルを設定(現在未サポート)
  • url:アドレスバーに表示されるURLを設定

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

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

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

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

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

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

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

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

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

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

popStateの使い方

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

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

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

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

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

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

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

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

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

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

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

実行結果

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

  • ブラウザの履歴を意図的に追加するにはpushStateメソッドを利用する
  • バック(戻る)ボタンをクリックしたか検出するにはpopStateイベントを使う
  • pushState / popStateを活用すればバックボタンを無効化できる

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

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

LINEで送る
Pocket

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説