ThickBox3をJQuery1.1.3.1で使う際のIE6対処法

tb_with_Jquery113_on_IE6_t.png

少し前に書いた記事で書いた、ThickBox3をJQuery1.1.3.1で使った場合IE6で真ん中に表示されない件。取りあえず自分はひとつ前のJquery1.1.2を使うかほっとく(!)ことで対処してたんですが、その後ThickBox内のコードを一部修正することで対応する方法がメーリングリストに投稿 されてました。

Nabble – JQuery – latest jQuery and thickbox 2

thickbox.js内の270行目

    

この部分を、以下の様に修正

    

これでIE6でもちゃんと画面中央に表示される様に。
コピペしただけで原因が分からんのも気持ち悪いので、よく分かってない人なりに分かる範囲で検証してみました。

まず変更前。表示されるボックスの位置をセンターに修正する関数なのですが、

    

この中でIE6では負のmargin-topを設定しない様に

    
    if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function')) { // take away IE6
    

で、振り分けをしています。ここの後半部分 typeof XMLHttpRequest == ‘function’ が問題。

JQuery1.1.2では、XMLHttpRequestをネイティブオブジェクトとして実装していないIE6に対して、以下の様に関数XMLHttpRequestにActiveXObjectのXMLHTTPオブジェクトを定義。 その後オブジェクトxmlに改めて定義しています。

Jquery1.1.2  

3820行〜
    
4311行〜
    

と、こんな感じ。

それがJQuery1.1.3以降では、直接オブジェクトxmlに定義するように変更されました。

Jquery1.1.3  

4229行〜
    

JQuery1.1.3以降では、IE6でXMLHttpRequestをコールしてもfunctionではなくundifinedが返ってきてしまいます。試しに、JQuery1.1.3を使っているページでアドレスバーにjavascript:alert(typeof XMLHttpRequest);と打ち込んでエンターを押すと

thickbox_with_jquery_113_on_ie6_t.jpg

このとおり。

結果、先に上げたThickBox内のブラウザ振り分けでIE6がはじかれず、負のtop-marginを指定した際におこるバグで表示位置がおかしくなってしまうとういことみたいです。

で、IE6の判定を

    

と修正して、IE6をきちんとはじくようにするというわけ。

このエントリーをはてなブックマークに追加
はてなブックマーク - ThickBox3をJQuery1.1.3.1で使う際のIE6対処法
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]