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

  2. さと より:

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

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

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

  3. tkyk より:

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

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

  4. さと より:

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

    私も同じ環境です。(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 より:

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

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

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

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

Leave a Reply