ヒストリー制御（pushState）
- HTML5 APIs
- UI ライブラリ
- テスト支援
- ドキュメント
- コード品質ツール
- バリデータ
- キー入力支援
- テストダブル
- ハイブリッドアプリケーション
- 継続的インテグレーション
pushState()基本動作
history.pushState()はブラウザの履歴の追加を行うメソッドです。
ブラウザの履歴に任意のURLを追加できます。
参考リンク W3C 5.4 Session history and navigation — HTML5
動作ブラウザ
履歴の追加
pushState呼び出しで、履歴が追加され、アドレスバーのURL(見かけ上のURL)が変更されることを以下のブラウザで確認しました。
- Chrome 40
- Firefox 35
- IE 11
- IE 10
IE 9以前のバージョンにはhistory.pushStateはありません。
以下、検証に使用したコードです。
// 履歴に"test/sub/sub/index.html"が追加され、アドレスバーも変更されることを確認
タイトルの指定
pushStateは第2引数にタイトルが指定できるという仕様ですが、以下のブラウザ(現状のブラウザ)では 反映されませんでした。
- Chrome 40
- Firefox 35
- IE 11
- IE 10
タイトルを指定しても、履歴に追加されるときのタイトルはpushState()実行時のタイトルであり、現在のページのタイトルも変更されません。
以下、検証に使用したコードです。
history.push(null, '変更したタイトル', 'test/sub/sub/index.html');
a要素のhrefについて
pushState()を行うと現在のページの見かけ上のURLが変更されます。a要素のhref属性の値は絶対パスで取得できますが、見かけ上のURLが変わった時に、a要素から取得されるhref属性の値はどうなるか、を検証しました。
検証ブラウザ
- Chrome 40
- Firefox 35
- IE 11
- IE 10
検証コード
a.setAttribute('hoge.html');
history.pushState(null, null, 'test/sub/sub/index.html');
// a.hrefの値を確認する
検証コードを実行するURLを http://localhost:8080/hifive/test/pushState.html として実行したところ、結果、どのブラウザでも、a.hrefで取得できる値は http://localhost:8080/hifive/test/test/sub/sub/hoge.html となり、見かけ上のURL基準のURL となりました。