ページの遷移はせずにページ遷移したように見せかけ、履歴にページを追加するコードを紹介します。
概要
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()関数で履歴に追加されたことが分かります。
[戻る]ボタンをクリックして"/products/index.html"ページを表示します。ページをリロードすると、ファイルがないため"404 Not Found"エラーが表示されます。
[戻る]ボタンをクリックして"/intro.html"ページを表示します。ページをリロードすると、こちらもファイルがないため"404 Not Found"エラーが表示されます。
さらに[戻る]ボタンをクリックして"/index.html"ページを表示します。ページをリロードすると、こちらもファイルがないため"404 Not Found"エラーが表示されます。
実際の利用例
PushState,PopState を利用することで、AjaxページでWebブラウザの[前へ] [次へ]ボタンで表示を切り替えられる動作を実装できます。実装の詳細は
こちらの記事を参照してください。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-07
作成日: 2016-02-10
