« jQuery ドキュメント更新 | Main | Erlang楽しい♪ »

Wednesday, April 04, 2007

jQuery history プラグイン

jQuery history plugin - Ajaxアプリで戻るボタンを押したときに、操作前の状態に戻すためのjQueryプラグイン

にて紹介いただきました.ありがとうございます.

この動作は、イベント発生時に履歴にURLを追加しておいて、戻るボタンが押されたときは、ブラウザのキャッシュを利用して操作前の状態に戻すという感じでしょうか?

動作原理ですが,
1.location.hashを書き換えて戻るボタンの履歴に残るようにする
2.iframeのopen/closeで履歴に残るようにする
の2つをブラウザによって使い分けることで実現しています.

上記をすると,#以降の部分を変更させたものを履歴に残すことができます.
戻るボタンを押すと,#以降が以前の状態に戻るので,#以降の部分が変化していないか定期的にチェックすることで戻ったことを判定しています.

Ajaxと戻るボタン・ブックマーク
に参考にしたリンクがあります.

というわけで,

うーん。URLに画面の状態を持っておくとうまくいくのだろうか。。。

その通りで,#以降の部分に画面の状態を持たせておいて,必要に応じて#以降の部分から画面の状態を復元できるように作る必要があります.

|

« jQuery ドキュメント更新 | Main | Erlang楽しい♪ »

Comments

はじめまして。fnyaと申します。

疑問に丁寧にお答えいただきありがとうございます!

また、iframeのopen/closeで履歴に残るとは初めて知りました。

重ねてありがとうございます。

Posted by: fnya | Wednesday, April 04, 2007 at 11:39 PM

jQuery history プラグインの使用方法を
教えてください。

Posted by: sinh | Tuesday, May 22, 2007 at 12:55 PM

shinさん

http://www.mikage.to/jquery/jquery_history.html
のソースを参照してください.

・リンク先のページを #xxx にする
・$.historyInit() にコールバック関数を渡す
・ページが切り替わるとコールバックが呼ばれるので
 ページの中身を書き換える

という感じです.

なお,Ajax使ったページがそのまま何もせず
戻るボタンに対応するわけではないので,
場合によっては既存ページの設計を見直す
必要性もあると思います.

Posted by: みかげ | Wednesday, May 23, 2007 at 09:26 AM

Hi,

I found a solution to the IE6 problems with location.hash. You can _check_ for it but not _set_ the value of it. So, in your code, search for:

var current_hash = location.hash

...and change to:

var current_hash = location.href.split('#')[1] || '';

This way you can remove the "To stop the callback firing twice during initilization if no hash present" part. It is causing problems with the titlebar (used when bookmarking pages) for both IE6 and IE7.

Oh, the same goes for var current_hash = iframe.location.hash; ... that must change to var current_hash = iframe.location.href.split('#')[1] || '';

Hope you understand what I mean, otherwise contact me and I'll send you a midified file.

cheers,

/Anton

Posted by: Anton Andreasson | Wednesday, September 24, 2008 at 12:34 AM

こんにちは、jquery.history 激しく便利に使わせて頂いております。
さて、一つ不具合らしき動作を見付けたのでご報告します。

Firefox3.0 にて発生を確認しました。
* <a href="#">hoge</a> なリンクを踏むと、callback 関数が二回呼ばれる
* $.historyLoad("") を実行すると、callback 関数が二回呼ばれる

以下の変更で、この現象が解決される事を確認しました。
よろしくお願いします。

--- jquery.history.js.old 2007-02-15 22:43:05.000000000 +0900
+++ jquery.history.js 2008-11-21 17:21:48.000000000 +0900
@@ -116,7 +116,13 @@
newhash = '#' + hash;
location.hash = newhash;
}
- jQuery.historyCurrentHash = newhash;
+
+ if(jQuery.browser.msie) {
+ jQuery.historyCurrentHash = newhash;
+ }
+ else {
+ jQuery.historyCurrentHash = hash;
+ }

if(jQuery.browser.msie) {
var ihistory = $("#jQuery_history")[0];

Posted by: takayama | Friday, November 21, 2008 at 05:34 PM

jQuery history プラグイン便利です!

ただし、IE6でクリック音が複数回鳴ってしまうのが残念です!

Posted by: history plugin便利! | Monday, December 22, 2008 at 10:59 PM

To Anton

I am sorry though it doesn't confirm for a long time.
I adopted your proposal by a new version.

Thank, you.

Posted by: mikage | Friday, March 20, 2009 at 06:34 PM

To takayama さん

すごくお返事が遅くてすいません.
直そうと思いつつ忘れたままになっていました.

パッチありがとうございます.
その前に書かれている Anton さんのパッチでも
問題が解消されるようですので,先に書かれていた
Anton さんのパッチの方を最新版で適用させていただきました.

Posted by: 沢渡 みかげ | Friday, March 20, 2009 at 06:36 PM

Post a comment



(Not displayed with comment.)


Comments are moderated, and will not appear on this weblog until the author has approved them.



TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/33589/14552220

Listed below are links to weblogs that reference jQuery history プラグイン:

» jquery history プラグインアップデート [みかログ]
長らく放置していた jquery でブラウザの戻るボタンを使えるプラグインですが [Read More]

Tracked on Friday, March 20, 2009 at 06:41 PM

« jQuery ドキュメント更新 | Main | Erlang楽しい♪ »