JavaScriptでブラウザバック(戻るボタン)を無効化する方法

この記事ではJavaScriptで『ブラウザバック(戻るボタン)を無効化する方法』について、

ブラウザバックとは
JavaScriptで「ブラウザバックを無効化するコード」と「仕組み」

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

ブラウザバックとは

ブラウザバックは「Webブラウザの戻るボタン」や「バッグスペースキー」を押したりすることで、ひとつ前のページに戻ることです。

Google Chromeでいうと、以下の赤枠で囲んでいるものが「戻るボタン」です。

ここでは、JavaScriptでこのブラウザバックを無効化する方法を解説します。

JavaScriptでブラウザバックを無効化するコード

JavaScriptでブラウザバックを無効化するコードを以下に示します。

window.history.pushState(null, null, window.location.href);
window.addEventListener('popstate', (e) => {
  history.go(1);
});

例えば、Google ChromeのデベロッパーツールのConsoleに上記のコードをコピーして、実行してみると、「戻るボタン」や「バッグスペース」を押してもひとつ前のページに戻らなくなります(ブラウザバッグが無効化されます)。

補足：イベントリスナーを解除するには関数を定義する必要がある

window.addEventListener('popstate', ...)でイベントリスナーを登録した場合、後からこのリスナーを削除（removeEventListener）するには、無名関数ではなく名前付き関数や変数に代入した関数を使う必要があります。

const onPopState = (e) => {
  history.go(1);
};

window.addEventListener('popstate', onPopState);

// 後から削除する場合
window.removeEventListener('popstate', onPopState);

無名関数を直接addEventListenerに渡してしまうと、removeEventListenerで対象の関数を特定できず、解除できなくなるので注意が必要です。

補足：画面を一度クリックしないとブラウザバックを無効化できない

現在のChromeやEdgeでは、セキュリティやユーザー保護の観点から、ユーザーが一度画面をクリックするなどの操作（インタラクション）を行わない限り、popstateイベントが発火しない仕様になっています。

そのため、ページを開いてすぐに「Webブラウザの戻るボタン」や「バッグスペースキー」を押しても、JavaScriptでの制御が効かず、ブラウザバックを無効化できません。

Firefoxではページを開いた直後でもpopstateイベントが発火するため、ブラウザバックの無効化が機能します（2023年12月時点の情報）。ただし今後、FirefoxもChromeやEdgeと同じ仕様に合わせてくる可能性がありますので注意してください。

本記事のまとめ

この記事ではJavaScriptで『ブラウザバック(戻るボタン)を無効化する方法』について、以下の内容を説明しました。

ブラウザバックとは
JavaScriptで「ブラウザバックを無効化するコード」と「仕組み」

お読み頂きありがとうございました。