Help us understand the problem. What is going on with this article?

Javascriptでブラウザの「戻る」ボタンを無効にする

More than 1 year has passed since last update.

はじめに

先日とある案件で業務アプリを実装していたところ、「ブラウザで戻れないようにしてほしい」という要件を頂いて実装したので記録に残しておきます。

この問題をどの様に対処すればいいのかいくつか調べたところ2パターンほど記事が見つかりました。

1つには戻るボタンを押して履歴をさかのぼった際にすぐ一つ進んで元のページに戻ってくる方法です。

しかしこれではだめです。ユーザーの要件はそもそもブラウザで戻れないようにすること。

これを実現するためには2つ目の方法が現実的になります。

それがページを遷移した際に現在の履歴を削除するという方法です。

今回はこの方法について紹介していきます。

ブラウザの「戻る」ボタンを無効にする

結論からいきましょう

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

こちらのコードを全ページ共通で使っているJSに貼り付けるのみです。

それでは何をやっているのか説明していきます。

まず以下のwindowオブジェクト中のhistoryオブジェクトはブラウザの履歴を操作するためのメソッドを提供しています。

window.history

今回はこのメソッドを利用してページ遷移した直後に前の履歴を消去します

そしてhistoryオブジェクトにはpushStateメソッドを持っており、これを使えば履歴を削除することができます。

pushStateメソッドの第1引数にstate オブジェクト、第2引数にタイトル、第3引数にURLを渡します。

今回は遷移したタイミングで今の履歴を残したくないので引数には全てnullを渡し、空の履歴に変更しましょう。

history.pushState(null, null, null);

上記では初回アクセス時の処理しか対応できていません。

戻るボタンが押されたときにはブラウザが履歴を残そうとするのですぐにそれを消去しなければなりません。

これに対応するためonメソッドを使ってpopstateイベントを定義していきましょう。

popstateイベントとはブラウザの履歴を操作しようとした際に発火するイベントのことです。ブラウザの戻るボタンや進むボタンを押した際に発火します。

渡されたeventイベントオブジェクトの中にoriginalEventというプロパティが含まれています。

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

これで戻るボタンを押した際に履歴を残す処理も防ぐことが出来ました。

まとめ

いかがでしたでしょうか?

これで簡単にブラウザバックを無効にして戻るを防ぐことができます。

フォームの送信でデータを頻繁に変更したりするサイトなんかでは特に有効ではないでしょうか?

MikihiroSaito
Javascript好きな人。将来ボホール在住エンジニア。 技術関連の記事をメインに情報を発信します。 Tyepscript、React、Vue(Nuxt)、Git、Docker等
https://blog.boholabo.com
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away