pushState, popState

githubリポジトリディレクトリをたどっていくときのエフェクトが気になったので調べてみた。

戻る・進む

とりわけ気になるのが、アドレスバーの内容は書き変わるけれど、画面の更新は一部しか起こらないこと。しかも、ブラウザの戻る・進むボタンに対しても同様の画面の更新が起きること。どのイベントをキャッチしているのだろう?onload イベントだとすでに画面が切り替わってしまっているので、使われていなさそう。

pushState, popState

githubJavascript のソースを見てみると、pushState というのを使っているということが分った。push とくれば、そう pop。戻る・進むボタンをクリックしたときに popstate イベントが発生する。そのイベントの中で画面更新の処理が走っていた。

サンプル

カレンダーを表示するページを作ってみた => http://hcal.heroku.com/2011/05。動作確認は MacFireFox4 と Chrome11 で行っている。pushState というものの状態は全く保存(push)していないのであまり参考にはならないかも。
ソースを github に置いた。https://github.com/ymmtmsys/pushState-calendar