[JavaScript] ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加する - pushState の利用
このページのタグ:[JavaScript]
ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加するコードを紹介します。

概要

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>

実行結果

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


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


[戻る]ボタンをクリックして"/products/index.html"ページを表示します。ページをリロードすると、ファイルがないため"404 Not Found"エラーが表示されます。


[戻る]ボタンをクリックして"/intro.html"ページを表示します。ページをリロードすると、こちらもファイルがないため"404 Not Found"エラーが表示されます。


さらに[戻る]ボタンをクリックして"/index.html"ページを表示します。ページをリロードすると、こちらもファイルがないため"404 Not Found"エラーが表示されます。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)