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

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

Nabble – JQuery – latest jQuery and thickbox 2

thickbox.js内の270行目

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

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

        if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
    

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

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

        function tb_position() {
    $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
      if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function')) { // take away IE6
        $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
      }
    }
    

この中で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行〜

        // If IE is used, create a wrapper for the XMLHttpRequest object
    if ( !window.XMLHttpRequest )
        XMLHttpRequest = function(){
            return new ActiveXObject("Microsoft.XMLHTTP");
        };
    

4311行〜

            // Create the request object
        var xml = new XMLHttpRequest();
    

と、こんな感じ。

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

Jquery1.1.3　　

4229行〜

        var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    

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

このとおり。

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

で、IE6の判定を

            if ( !(jQuery.browser.msie && **jQuery.browser.version < 7**)) { // take away IE6
    

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