javascriptまたはjqueryでブラウザバックを禁止する

この記事では、javascriptとjqueryを使用した場合に、ブラウザバックを禁止するサンプルを書いています。
javascriptのhistoryインターフェースを使うと実現できますが、chromeだけ挙動が少し違いました。

ブラウザバックを禁止する（そもそもブラウザバックって？）

ブラウザの戻るボタンを押して、ひとつ前のページに戻ることです。
chromeで言うと、このボタンですね。

javascriptでブラウザバックを禁止する

scriptタグの中に下記のように記載すると、javascriptでブラウザバックを禁止することができます。

window.onload = function() {
  history.pushState(null, null, null);

  window.addEventListener("popstate", function (e) {
    history.pushState(null, null, null);
    return;
  });
};

jqueryでブラウザバックを禁止する

scriptタグの中に下記のように記載すると、jqueryでブラウザバックを禁止することができます。

$(function() {
  history.pushState(null, null, null);

  $(window).on("popstate", function(){
    history.pushState(null, null, null);
  });
}); 

ブラウザバック禁止コードでやっていること

javascriptと、jqueryどちらも同じことをやっています。
画面読み込み時に、ソースが動いて、まずhistory.pushState(null, null, null);をしています。

これは、ブラウザのhistoryオブジェクトにアクセスして、履歴を操作しています。
pushStateをすることで、ブラウザの履歴を直近から追加することができます。

例えば、

history.pushState(null, null, '/hoge.html');
history.pushState(null, null, '/fuga.html');
history.pushState(null, null, '/piyo.html');

と連続して実行した場合は、戻るボタンを押した場合には
piyo->fuga->hogeという順番に戻っていくことになりますが、この時に画面の表示は変わりません。

今回は、これを使用して、history.pushState(null, null, null)とすることで、現在の画面を履歴に追加します。

そして、戻るボタンが押されるとpopstateイベントが動きます。
そこでさらに、現在の画面を履歴に追加しています。

戻るボタンを押すたびに、履歴に現在画面が追加されて、戻れないという状態にしているということですね。

参考(MDNドキュメント: history)

pushStateについて

引数を３つとるようになっていて、

state：状態をオブジェクトで渡せる。
title:現在は特に使われていない。将来的に使われるかも？
url：履歴のurlを指定する。同一オリジンじゃないとエラーになる。urlがnullの場合は現在ページが指定される。

となっています。

参考(MDNドキュメント: pushState)

ブラウザバックを禁止するときの注意点

ブラウザによっては動作が違うようなので、気をつける必要があります。
手持ちのブラウザで動作確認したところ、次のようになりました。

chromeのみ、フォーカスが一度も当たってない場合は、ブラウザバックできてしまいます。
ブラウザフォーカスが当たらないと、popstateイベントが動かないようですね。

これに関してはブラウザの仕様なので仕方ないかと思います。。