« AjaxとIf-Modified-Since | Main | jQuery 1.0 リリース »

Tuesday, August 22, 2006

Ajaxと戻るボタン・ブックマーク

サイトを普通にAjaxを使って作ると,ブラウザの戻るボタンが使えなくなったり,ブックマークができなくなってしまう.
サイトの中の一部(たとえば商品情報)をAjaxで差し替えるようなケースでは,これが結構使い勝手を悪くしてしまう.

location.hashを使ったセッション復元@最速インターフェース研究会
の記事をみて,location.hashでできそうなことを知ったけれど,どうもIEではうまく動かない.

さらに色々調べてみると,
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
というような情報を発見.

IEの場合は,location.hashの代わりにiframeを使えばできる模様.

ブラウザごとの挙動をまとめると

-IE6FireFox1.5Opera9
location.hashで履歴に残る×
iframeのopen/closeで履歴に残る×

となっている模様.
なので,単に両方を使ってしまうと,Opera9で不都合がでてしまう.

IEの場合のみiframeを使い,そのほかの場合はlocation.hashを使うのが良さそうな感じ.
(ちなみに,Safariではうまくいかなかった.手元にMacがないので詳しく調べることもできず)

jQueryから簡単に使えるようにしたプラグインを作ってみた.
http://www.mikage.to/jquery/jquery_history.html

とあるサイトに導入したけど,今のところ問題なく動作している模様.
これでSafariにも対応できたら完璧なんだけど,さすがにそのためだけにMacは買えないし・・・(^^;

|

« AjaxとIf-Modified-Since | Main | jQuery 1.0 リリース »

Comments

うほ。便利なプラグイン発見!
ちょっと使ってみるよ。

Posted by: nanashi | Saturday, August 26, 2006 04:17 AM

なにか不都合があればご連絡ください.
ちなみにSafariだけはどうしようもなさそうです・・・
Ajaxでやろうとすると,色々制約があって大変ですね.

Posted by: みかげ | Sunday, August 27, 2006 04:59 PM

使えてます!問題ないです。
jQueryってちょっとクセあるようですが。

Posted by: nanashi | Wednesday, August 30, 2006 09:52 PM

確かに癖があるかもしれませんね...
Ver1.0でも,まだ細かい不都合がちょくちょく見つかったりしているようなので,安定まではもう少しかかるのかも.
ソースがコンパクトなので,いざとなったら自分でソースを読んで対処しています(^^;

Posted by: みかげ | Wednesday, August 30, 2006 11:34 PM

Ajaxアプリの履歴ブックマーク。
location.hashがだめだめだったので、自分でいろいろ工夫して作っていたのですが・・。これを見て、目がくらくら;(*^_^*);使えますね。これ。
XMLHttpRequestオブジェクトの代わりにもなるし、動的iframeの威力って絶大だなあ・・・^^);;;

Posted by: teru | Friday, September 15, 2006 02:02 PM

質問させてください。
利用する際に気をつけるべき技術的な制約はありますでしょうか?

具体的には何バイトまでパラメータを保存できるか気になっています。
特に、IEはURLは2083バイトまでという制約があるので、あまり多くの情報は詰め込めないのかなと思いました。

もし#以降にたくさんのパラメータをつけられないとすると、他に代替手段は考えられますでしょうか?
例えば、#1, #2, #3しか表示しないことにして、1と具体的なパラメータ、2と具体的なパラメータ、…の辞書を自前で管理するなどでしょうか。
それが可能であれば、ブックマークは機能しませんが、一応戻る、進むボタンは使えると思います。

ご教示いただけますと幸いです。

Posted by: 玉越 | Friday, July 04, 2008 02:35 PM

制限については考えたことがありませんでした.
URLの長さの制約を受けるので,多くの情報は詰め込めそうにないですね.

Cookieなどを併用して具体的なパラメータ部分を入れるとかすれば,もう少しいけるかもしれないですが…
もしくは,Ajaxでサーバ側に具体的な情報を入れるとか.

それ以上の代替手段はちょっと思いつかないです.(^^;

Posted by: みかげ | Sunday, July 06, 2008 10:11 PM

The comments to this entry are closed.

« AjaxとIf-Modified-Since | Main | jQuery 1.0 リリース »