ブラウザの戻るボタン対策 多分 safari にも対応版

もはや当たり前となった javascript とか ajax とか使って
ページ遷移しない web アプリの弱点として、
ブラウザの戻るボタンは罠問題があります。


ブラウザの「戻る」は生理的に染み付いてるものなので、
今さら注意書きで「使っちゃだめよ」とか言っても無駄です。


また、ページ遷移しない場合、パーマリンクどうするよ。って話にもなりますね。


という需要で、ajax の戻る対策をしたライブラリはいろいろあるわけですが、

ちょっと思うことあって自分でも作ってみました。

大いに参考にしたのはこちら。
Ajaxと戻るボタン・ブックマーク


こちらがさらに参考にしてたのはこちら。
location.hashを使ったセッション復元


あと、safari 対応にあたり、SWFAddressも参考にしました。
こっちは flash で同様のことを実現してます。


IE, Firefox については、先のみかログさんの言ってる通りやってます。

で、safari に関しては、history.length が肝っぽい。


SWFAddress のぞいたら、history.length を元に cookie に書き込んだり、
見えない form 作って submit したりうにゃうにゃやってましたが、
hisotry.length をキーとした配列に、location.hash 突っ込んでいったら事足ります。


で、さらに作り直す上で実現したかったのは、以下

  • callback の登録をもちょっとやりやすく
  • safari 対応
  • &以降を get 変数 like に扱う
  • クロスブラウザ対策に Factory メソッドパターンを使う

javascript で factory メソッドを使わない理由
このエントリで書いた、クロスブラウザ対策に Factory メソッドパターンを使う有用な例がこれかなーって思いました。

history 周りの挙動はブラウザによって全く異なるので、
ここはハードコーディングでよいのです。多分。


動作サンプル


万が一使ってみた方おられましたら、フィードバック的なものをいただけると超うれしいです。
あ、YUI依存あります。
extend くらいにしか使ってないので、自分好みのフレームワークに入れ替えたらよいと思います。