ブラウザの戻るボタンを依存ライブラリ無しで戻れなくする方法 #JavaScript

社内向けアプリケーションなんかを作っている時に戻るボタンで画面遷移すると予期しない動きをするので、戻るボタンを押しても戻れないようにしたい場合があります。

そんな時はhtmlの先頭に以下のコードを追加することで戻るボタンを無効化することができます。
このコードはモダンブラウザであれば依存ライブラリ（JQueryなど）なしでも動きます。

このコードでは実際に戻るボタンを無効化するわけではなく、ページを表示するたびに遷移先がnullの履歴を追加する処理を入れることで、戻るボタンの無効化を実現しています。

onpopstateは戻るボタンで画面遷移した時に発火するイベントで、pushStateはブラウザに遷移先を追加するメソッドとなります。

イベントハンドラの外にあるpushStateは、最初に画面をロードした時に実行され、イベントハンドラの中にあるpushStateは戻るボタンを押した時に実行されるため、どちらのコードも必要です。

戻るボタンが押されたらアラートを出力する

//画面初期表示時に遷移先nullの履歴を追加する
history.pushState(null, null, null);

//ブラウザの戻る／すすむボタンで発火するイベント
window.onpopstate = function (event) {
        //戻るボタンを押して戻った時に再度nullの履歴を追加する。
        //※この処理はalertの前に書いておく必要あり。alertの後ろだと戻るボタンを連打したときに戻れてしまう。
    history.pushState(null, null, null);
    alert("ブラウザの戻るボタンは禁止されています。");
};

サンプルコードはこちらで実際に動かしてみることができます。
https://stackblitz.com/edit/js-n5zty9?embed=1&file=index.js

注意点

戻るボタンがクリックされた際にalertやconfirmで処理を止めたりする場合は、必ずalertの前にpushStateを記述する必要があります。
alertの次においてしまうと、戻るボタン連打した時に前の画面に戻れてしまう様になるので要注意です。

戻るボタンが押されたら確認ダイアログを表示する。

こんな風に確認画面を出して、OKが押されたらトップページに遷移することもできます。

history.pushState(null, null, null);

//ブラウザの戻る／すすむボタンで発火するイベント
window.onpopstate = function (event) {
         //連続で戻るボタンがクリックされたときにも戻れない様に、履歴にnullを追加する。 
         history.pushState(null, null, null)
     var r = confirm("このページでのブラウザの戻るボタンは禁止されています。トップページに移動しますか？");
     if (r == true) {
        //コンテキストルートに戻る
        var context = window.location.pathname.substring(0, window.location.pathname.indexOf("/", 2));
        window.location.replace(context);
     } else {

     }
};

このコードは、PCのfirefoxとchromeでテストしました。他のブラウザや環境での動作は不明です。