JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでブラウザの戻るボタンを無効にする方法をわかりやすく解説

Webアプリケーションの中には、ユーザーがブラウザの「戻る」ボタンで前のページに戻れないようにしたいケースがあります。例えば、フォーム送信後の二重登録防止や、特定のフローを強制したい場合などです。
本記事では、JavaScriptとjQueryを使ってブラウザの戻るボタンを事実上無効化する方法を、実際のサンプルコードとともに解説します。

仕組みのポイント

この手法は、ユーザーが前のページへ戻ろうとした瞬間に window.history.forward() を呼び出し、強制的に履歴を「進める」ことで、結果的に戻れなくするというものです。
さらに、pageshow イベントの persisted プロパティをチェックすることで、バックフォワードキャッシュ(bfcache)からページが復元された場合にも対応できます。

サンプル1:現在のHTMLページのコード

まずは、戻るボタンを無効化したい側のページ(現在のページ)のコードです。

<html>
   <head>
      <title>Disable Browser Back Button</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   </head>
   
   <body>
      <a href = "newpage.html">Next Page</a>
   </body>
   <script>
      $(document).ready(function() {
         function disablePrev() { window.history.forward() }
         window.onload = disablePrev();
         window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
      });
   </script>
</html>

サンプル2:newpage.html のコード

次に、遷移先となる newpage.html のシンプルなコードです。

<html>
   <body>
      Go to back page using web browser back button.
   </body>
</html>

コードの解説

  • window.history.forward():ブラウザの履歴を1つ先に進めます。これにより、戻る操作が即座に打ち消され、前のページには戻れなくなります。
  • window.onpageshow:ページが表示されたときに発生するイベントです。特に、戻る・進む操作でページが再表示された際にも発火します。
  • evt.persisted:ページがbfcache(バックフォワードキャッシュ)から復元された場合に true になります。この場合も forward() を実行して戻る動作を防ぎます。

注意点

この方法は、戻るボタン自体を物理的に無効化しているわけではなく、「戻った直後に自動的に次のページへ進ませる」ことで、実質的に戻る操作を無効にするテクニックです。
そのため、JavaScriptが無効な環境では機能せず、またユーザー体験を損なう可能性もあります。利用する場面は、決済完了後の画面や認証フローなど、どうしても戻らせたくない場面に限定することをおすすめします。

  1. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st

  2. 【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

    はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h