HistoryオブジェクトにpushState()とreplaceState()というメソッドが追加されました。
pushStateというのは、
Historyのリストに新しくエントリを追加してしまいます。
ページ遷移をしていなにのに、Hisotryが追加されるのです。
下記にコードを示します。
- <html>
- <head>
- <script>
- function push_history() {
- history.pushState("", "", "/example");
- }
- </script>
- </head>
- <body>
- Hello, World!
- <form>
- <input type="button" value="button" onclick="push_history()" />
- </body>
- </html>
これにより、
現在のページが "http://foo.com/hello/index.html " だった場合、
ボタンをクリックするとURLが第3引数により、"http://foo.com/example" に変化しており、
戻るのリストをみると、１個Historyが追加されているのがわかります。
実際に戻るをクリックすると、URLバーが
"http://foo.com/hello/index.html "
に戻ります。
これで、ページを遷移していないのに、
Historyにエントリを追加して、URLを変更することができます。
Ajaxとこれを組み合わせた技術を "Pjax" と呼びますが、
これは別途まとめようと思います。
投稿
0 件のコメント:
コメントを投稿