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

プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る