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.history.pushState()メソッド』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

history.pushState()とは？「使い方」などを分かりやすく解説！
history.pushState()とは？「使い方」などを分かりやすく解説！

続きを見る

ブラウザバックを無効化するコードが動く仕組み

Webページの読み込み時に、window.history.pushState(null, null, window.location.href)が実行され現在のURL(window.location.href)を履歴に追加しています。

「戻るボタン」や「バッグスペース」が押されると、popstateイベントが発生します。その際に、history.go(1)が実行され履歴の次のページに進むようにWebブラウザに指示しています。1ページ進んだ先は、window.history.pushStateで追加した現在のURLですので、ユーザーが「戻るボタン」や「バッグスペース」を押しても、実質的には同じWebページに留まることになります。

現在のWebページに再び進むと、ソースが再び動き、window.history.pushState(null, null, window.location.href)が実行され現在のURL(window.location.href)を再び履歴に追加しています。

補足

window.history.pushState(null, null, window.location.href)をwindow.history.pushState(null, null, null)に置き換えてもOKです。ただし、window.history.pushState(null, null, null)は一部のWebブラウザでは現在のURLを履歴に追加しますが、この挙動はWebブラウザによって異なる場合があるので、window.location.hrefを指定する方が安全です。

本記事のまとめ

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

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

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