Webブラウザーの [前へ][次へ] ボタンがクリックされ履歴のページが表示されるイベントを検出する - popStateの利用

JavaScriptを利用して、Webブラウザの [前へ][次へ] ボタンがクリックされ履歴のページが表示されるイベントを検出するコードを紹介します。

シンプルなコード例

コード

下記のコードを記述します。

PopState.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    window.onload = function () {
      history.pushState(null, null, "/index.html");
    }

    window.addEventListener('popstate', function (e) {
      target = document.getElementById("output");
      target.innerHTML = "PopStateが呼び出されました。";
    }); 
  </script>
</head>
<body>
  <div>サンプルページ</div>
  <div id="output"></div>
</body>
</html>

解説

  window.onload = function () {
    history.pushState(null, null, "/index.html");
  }

ページ表示時に、history.pushState を呼び出し、index.html のページ遷移履歴を追加します。この処理により、最初に表示される"PopState.html"から"index.html"にページ遷移した状態になり、アドレスバーが"index.html"の表示になります。また、[戻る]ボタンでの戻り先が"PopState.html"となり、ページ履歴にも"PopState.html"のページ履歴が追加されます。

PushStateの詳細に関してはこちらのページを参照してください。

  window.addEventListener('popstate', function (e) {
    target = document.getElementById("output");
    target.innerHTML = "PopStateが呼び出されました。";
  });

addEventListener メソッドを利用して、popstateイベントを追加します。popstateイベントが呼び出されると、ページの"output"idのdiv枠に"PopStateが呼び出されました。"のメッセージを表示し、popstateイベントが実行された旨を画面に表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

pushStateメソッドで履歴に追加しているため、戻るボタンがクリックできる状態になっています。ボタンを長押しして履歴を確認すると、当初の表示ページが履歴に追加されています。戻るボタンをクリックします。

前のページに戻ります。下図の画面が表示されます。"PopStateが呼び出されました"のメッセージが画面に表示され、PopStateイベントが実行されていることが確認できます。

Stateを渡すコード例

pushState　メソッドを呼び出す際に、第一引数に値または、オブジェクトを与えることでpopState時に情報を渡すことができます。

コード

下記のコードを記述します。

PopState2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    window.onload = function () {
      history.pushState("Penguin", "Penguin", "/index.html");
    }

    window.addEventListener('popstate', function (e) {
      target = document.getElementById("output");
      target.innerHTML = "PopStateが呼び出されました。" + e.state;
    }); 
  </script>
</head>
<body>
  <div>サンプルページ</div>
  <div id="output"></div>
</body>
</html>

解説

  window.onload = function () {
    history.pushState("Penguin", "Penguin", "/index.html");
  }

ページ表示時に、history.pushState を呼び出し、index.html のページ遷移履歴を追加します。この処理により、最初に表示される"PopState2.html"から"index.html"にページ遷移した状態になり、アドレスバーが"index.html"の表示になります。また、[戻る]ボタンでの戻り先が"PopState2.html"となり、ページ履歴にも"PopState.html"のページ履歴が追加されます。pushStateの第一引数に"Penguin"の文字列を渡しているため、"index.html"に遷移したタイミングで呼び出されるpopStateイベントの場合はstateに"Penguin"の値を受け取ることができます。

  window.addEventListener('popstate', function (e) {
    target = document.getElementById("output");
    target.innerHTML = "PopStateが呼び出されました。" + e.state;
  });

addEventListener メソッドを利用して、popstateイベントを追加します。popstateイベントが呼び出されると、ページの"output"idのdiv枠に"PopStateが呼び出されました。"のメッセージを表示し、popstateイベントが実行された旨を画面に表示します。また、その状態でのstateの価も合わせて画面に表示します。