jQuery HistoryプラグインのIE8対応

jQuery History is now on Github. Please check it.

jQuery Historyプラグインの最新版はGithubにあります。

19 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やブラウザのバージョン以外に、何か関連している要素があるのか…
    申し訳ありませんが、現時点ではこれ以上は分かりませんね……。

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

  6. Hossein より:

    thanks very much,but it does not work on “chrome 5″ :( Please check.

  7. tkyk より:

    Hi, Hossein.

    Thank you for your report.
    I’m fixing the problem and going to send the result to the original author.
    Please wait for a while.

  8. tkyk より:

    Hi,

    I’ve created a fork of this plugin, and it works on Chrome 5.

    http://wp.serpere.info/archives/1234

    Please check it out :)

  9. Hossein より:

    Hi,

    thanks for update and grate sample.but when the new code load in my page it works with old version and sends me an error “: Error: $.history is undefined Source ” :(

    this error not occurs in an empty page and your sample works well.

    why this error occurs?

  10. Hossein より:

    I found problem.i used “mootools” in my page and it is discordant with “jq.history” new changes.may be check it?

  11. tkyk より:

    First, the API changed from the old one. Please replace `$.historyInit’ with `$.history.init’ and `$.historyLoad` with `$.history.load’.

    Then generally speaking you should use `jQuery.history’ instead of `$.history’ when you use jQuery and other javascript libraries together.

    MooTools-1.2.4 in my sample page:
    http://www.serpere.info/tmp/jquery-history-mootools/sample/
    http://www.serpere.info/tmp/jquery-history-mootools/sample/history_test.js
    Does it work?

    Unfortunately I hardly know about MooTools. So I can’t advise you more on how to use this plugin and MooTools together.

  12. Hossein より:

    hi,

    many many thanks :) .I removed “mootools” from my project:(
    another problem :
    when i load a page by Ajax if Ajax pages contain a link rel=”hostory”, after Ajax page load,document.ready not recognize clicked link and give me no action.
    In previous versions i used this function for resolve problem but in updated version “IE7″ don’t handle loadHistory(hash) function.

    my old function :

    function onc(divID) {
    clearTimeout(FadeTm);
    var hash = document.getElementById(divID).href;
    var hash = hash.toLowerCase();
    hash = hash.replace(/^.*#/, ”);
    jQuery.historyLoad(hash);
    //return false;
    }

  13. tkyk より:

    Hmm… maybe you should use jquery’s live events.
    http://api.jquery.com/live/

    I updated the code and added a new example which is similar to your case. Please check it.
    http://www.serpere.info/jquery-history-plugin/samples/ajax/
    Latest source code: http://github.com/tkyk/jquery-history-plugin/blob/master/jquery.history.js

  14. Hossein より:

    All my problems were solved,Thanks a million. :)

  15. テツ より:

    はじめまして、テツと申します。

    tkykさんのサイトを参考にjquery_historyの勉強をさせていただいています。

    tkykさんのソースを参考にサンプルを作ってみたのですが、以前、さとさんのコメントにあったような症状がでてきて、IEのみ挙動が意図したとおりにならなくて困っています。

    色々調べたりしたのですが、力不足で解決することができずに年月のみ経って困っています(汗
    自分で作ったサンプルは下記URLになるのですが、ぜひ、アドバイスいただきたいと思いコメントさせていただきました。
    どうぞ宜しくお願い致します。
    http://www.geocities.jp/hdmcs293/test/jquery_history/sample1.html

  16. tkyk より:

    コメントありがとうございます。
    確かにIEで確認するとご指摘通りの症状が出ていますね…。

    ざっと見た限りかなり古いバージョンのjQuery Historyを使用されているようなので、
    まずは最新版に切り替えてみてもらえますか?

    最新版は以下のURLから入手できます。
    http://github.com/tkyk/jquery-history-plugin/raw/master/jquery.history.js

    スクリプトの構成が変わったので、

    $.historyInit
    $.historyLoad

    をそれぞれ

    $.history.init
    $.history.load

    に変更してください。

    それでもまだ症状が出るようならチェックしてみます。

  17. テツ より:

    tkykさん、ご指摘ありがとうございます。

    さっそく最新版のjquery.history.jsを入れて、スクリプトを修正したのですが、残念ながら症状は直りませんでした(汗

    修正したサンプルは下記URLになります。
    http://www.geocities.jp/hdmcs293/test/jquery_history/sample02.html

  18. tkyk より:

    原因がおそらく判明しました。
    HTMLの中に

    <a name=”tab_proposal” rel=”nofollow”>
    <div id=”tab_proposal”>

    など、読み込むhashと同じidを持つ要素または同じnameを持つA要素があると
    余計な履歴が追加されてしまうようです。
    tab_proposal, tab_service, tab_jirei, tab_info
    全てを取り除いたところ、私の環境ではうまく動作しました。

    できればjquery history本体側で対処できると良いのですが、
    ひとまず上記の対処を行ってみてもらえますか?

  19. テツ より:

    ご指示いただいた方法で対処することができました。
    ありがとうございます。

    なぜ、何度も履歴が読み込まれているのか不思議に思っていましたが、
    まさかタブ用のidが履歴に読み込まれているとは想像もしませんでした!!

    とても便利なですが、タブとの併用の際には注意が必要ですね(汗

Leave a Reply