history.pushState() の実験

history.pushState() の実験。
次のサイトを参考にさせて頂きました。

実装方法

history.pushState( ${popstateイベントのstateプロパティに入る文字列} , ${状態識別用のタイトル} , ${現在の状態に対応するURL} );

実験

結果

ページロードを伴わないURLの書き換えを実装できた。pushState() の第3引数に渡したURLに書きかえられ、ヒストリーに追加される。

第1引数の文字列は、popstateイベントオブジェクトの、stateプロパティで受け取ることができた。画面に何を表示すべきかを判断する材料として使えそうだ。popstateイベントは、実URLに滞在している間の戻るボタン押下時に発生するようだ。加えて、Google Chrome では、次の実URLから戻ってきたときにも発生した。

第2引数が何を意味するかは、よくわからなかった。要調査。

また、異なるドメインに書きかえることはできないようだ。相対パスでの指定は問題なかった。

動作環境

動作を確認したブラウザは下記の通り。

  • ○ Google Chrome 20.0.1132.57 m
  • ○ Firefox 14.0.1
  • × Internet Explorer 9
  • ○ Internet Explorer 10
  • ○ Opera 11.61

IE9ではまだ実装されていないようだ。history.pushStateメソッドが定義されているか確認し、未定義の場合の代替処理を想定しておくことは必須となりそうだ。

スマートフォン等PC以外のデバイスでは検証できていない。

参考URL


プロフィール

ときにはデザイナ、ときにはディレクタ、ときにはプログラマ、ときには何でも屋と、ウェブの世界で未熟ながらもいろいろやっている、コヤナギトモヤです。

ツイッター上ではこのヒト。
@tomk79

RSSフィード

ページの先頭へ戻る