jQuery HistoryプラグインのIE8対応

Ajaxで「戻る」ボタンに対応するためのjQueryプラグインjQuery History。Internet Explorer 8の「IE8モード」で動かなかったので、修正するためのpatchを作った。

10月13日: このpatchはQuery History本体に取り込まれました。

http://www.serpere.info/jquery-history/fix_ie8.diff

IE8+WinXPでテストした限り、全部正しく動く。もちろんFirefox等々ではそのまま動く。

テストコードは以下の通り。最も単純な使い方の例にもなっている。

$(document).ready(function(){
        $.historyInit(function (hash) {
                if(hash) {
                    $("#load").text("loaded: "+ hash);
                } else {
                    //start page
                    $("#load").empty();
                }
            });
 
        $(".history-links a").click(function(){
                var hash = this.href;
                hash = hash.replace(/^.*#/, '');
                $.historyLoad(hash);
                return false;
            });
    });

ちなみにこの修正はjQuery History Plugin BBSにおけるchris氏の投稿を元に作成した。最初はJonathan Bingham氏による修正もマージしようと思ったのだが、どうやらInternet Explorer 8の「IE8モード」では特別なことをしなくても（Firefox同様に）hashの変更を検出できるらしく、敢えてonhashchangeを使う必要はなさそうだ。

5 Responses

  1. Tweets that mention jQuery HistoryプラグインのIE8対応 | へびにっき -- Topsy.com より:
    2009 年 10 月 8 日 7:00 PM

    [...] This post was mentioned on Twitter by Takayuki Miwa. Takayuki Miwa said: #javascript #jQuery HistoryプラグインのIE8対応 http://bit.ly/1juRiW パッチを作者に送りたいのだがメールアドレスが見つからない…。とりあえずトラバは打っておいた。 [...]

  2. さと より:
    2010 年 3 月 2 日 10:21 PM

    とても便利な機能ですね！かなり参考にさせていただきました！
    ありがとうございます！

    ところで、デモ3（IE8モード）ページでIE8にてテストしてたのですが何回かクリックした後、「戻る」を繰り返すと「進む」ができなくなっているようなのですが、これはIEでの仕様でしょうか？他のブラウザでは正常に動作するようですが。。。

    一応、ご報告までにコメントさせていただきました。

  3. tkyk より:
    2010 年 3 月 2 日 10:42 PM

    コメントありがとうございます。

    ご指摘の点について、Windows XP + IE8という環境で何度か試してみましたが、再現できませんね……。もう少し具体的な手順が分かると良いのですが（例えば1,2,3,3,2,1の順でクリックしたあと「戻る」を3回押す、とか）。

  4. さと より:
    2010 年 3 月 2 日 11:24 PM

    あいまいで申し訳ございません。。。

    私も同じ環境です。（Windows XP + IE8）

    手順については、以下の通りです。
    []はURLです。

    1．1をクリック [ history_xhtml.html#1 ] (loaded: 1)
    2．戻る [ history_xhtml.html# ]
    3．再度戻る [ history_xhtml.html#1 ]
    4．再度戻る [ history_xhtml.html ]
    5．進む [ history_xhtml.html#1 ]
    6．再度進む [ history_xhtml.html# ]

    このように、1度のクリックで戻るが3回できてしまいます。
    2．の戻るを押したときに「進む」ボタンが点灯（押せる状態）した直後に非点灯（押せない状態）になってしまいます。
    クリックした際に表示される「loaded: 1」は1度目の「戻る」を押したときに非表示になり、「進む」を押しても表示されません。

    ちなみに1, 2, 3 とクリックした動作は以下のようになります。

    1. 1をクリック [ history_xhtml.html#1 ] (loaded: 1)
    2. 2をクリック [ history_xhtml.html#2 ] (loaded: 2)
    3. 3をクリック [ history_xhtml.html#3 ] (loaded: 3)
    4. 戻る [ history_xhtml.html#2 ] (loaded: 2)
    5. 戻る [ history_xhtml.html#3 ] (loaded: 2)
    6. 戻る [ history_xhtml.html#2 ] (loaded: 2)
    7. 戻る [ history_xhtml.html#1 ] (loaded: 1)
    8. 戻る [ history_xhtml.html#2 ] (loaded: 1)

    といった動作となります。

    わかりにくく申し訳ございませんが、よろしくお願いします。

    問題がないのでしたら、私のIE8がおかしいのかもしれませんね。

  5. tkyk より:
    2010 年 3 月 3 日 8:24 PM

    うーん…やっぱり再現できません。

    1．1をクリック [ history_xhtml.html#1 ] (loaded: 1)
    2．戻る [ history_xhtml.html ]

    この時点で既に「戻る」ボタンは無効で、「進む」ことができる状態です。
    OSやブラウザのバージョン以外に、何か関連している要素があるのか…
    申し訳ありませんが、現時点ではこれ以上は分かりませんね……。

    何か新たに気づいた点があったらご連絡ください。私もできる範囲で調べてみようと思います。

Leave a Reply

←
→