ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加する - pushState の利用

ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加するコードを紹介します。

概要

JavaScriptの処理などで、ボタンをクリックなどイベントが発生した時に、ページの遷移はしていないが、ページ遷移したようにURLを見せたいことがあります。pushStateを利用すると、ページ遷移を伴わない状態で、ページ遷移履歴とアドレスバーのURLを変更でき、ページ遷移があったように見せかけることができます。

プログラム

例1

コード

下記のHTMLファイルを作成します。

PushState.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    window.onload = function () {
      history.pushState(null, null, "/index.html");
      history.pushState(null, null, "/intro.html");
      history.pushState(null, null, "/products/index.html");
    }
  </script>
</head>
<body>
  テストページです。
</body>
</html>

解説

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

今回のコードでは、ページが表示された際にpushStateで3つのページ遷移を追加します。この処理により。

PushState.html
index.html
intro.html
products/index.html

の順番でページ遷移が実行され、アドレスバーとページ履歴に関して、"products/index.html"のページが表示された状態になります。ページ履歴には、上記の4つのページのアクセス履歴が追加され、戻るボタンをクリックすると、intro.html, index.html, PushState.html の順番でページバックできます。ただし、ページの実体はないため、"404 Not Found"エラーが発生します。ページの実体がないページバックに対して表示コンテンツの制御をする場合は、popstateイベントを利用します。popstateイベントに関してはこちらの記事を参照してください。

実行結果

上記のHTMLファイルをWebブラウザで表示します。
"テストページです。"の文字が表示されますが、アドレスバーを見ると、作成した"PushState.html"ではなく"/products/index.html"になっています。JavaScriptで最後にPushStateされた"/products/index.html"がアドレスバーの表示になっています。

[戻る]ボタンを長押しします。ポップアップメニューが表示されます。履歴を確認すると、現在のページ(/products/index.html)、最初に表示したページ"/PushState.html" のほかに"/intro.html", "/index.html"が追加されています。pushState()関数で履歴に追加されたことが分かります。