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

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

はじめに

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

この問題をどの様に対処すればいいのかいくつか調べたところ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; 
  } 
}); 

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

まとめ

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



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

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

これからもちょっとしたJavascriptのネタも更新していきたいと思います。よろしくお願いいたします