小粋空間  -  a cheap joke and a play on words site

Movable Type 4.2 における mt.js の変更点（その1：Ajax 対応と window.onload の代替スクリプト）

先日、Movable Type 4.2 におけるコメント投稿フォームの機能追加と改善点をエントリーしましたが、動作を制御する mt.js（インデックステンプレートの「JavaScript」）が、新しく実装し直されていますので、気がついたところを紹介したいと思います。

１．Ajax 用関数の追加

mt.js は今までコメントフォーム専用でしたが、検索結果（ページ分割された場合）を Ajax で表示するための関数 mtGetXmlHttp が追加されています。

<mt:Ignore>
/***
 * Returns a XMLHttpRequest object (for Ajax operations).
 */
</mt:Ignore>
function mtGetXmlHttp() {
    if ( !window.XMLHttpRequest ) {
        window.XMLHttpRequest = function() {
            var types = [
                "Microsoft.XMLHTTP",
                "MSXML2.XMLHTTP.5.0",
                "MSXML2.XMLHTTP.4.0",
                "MSXML2.XMLHTTP.3.0",
                "MSXML2.XMLHTTP"
            ];
 
            for ( var i = 0; i < types.length; i++ ) {
                try {
                    return new ActiveXObject( types[ i ] );
                } catch( e ) {}
            }
 
            return undefined;
        };
    }
    if ( window.XMLHttpRequest )
        return new XMLHttpRequest();
}

２．window.onload の代替スクリプト

もうひとつは、JavaScript マスター Dean Edwards 氏による、window.onload の代替スクリプトが追加されています。

// BEGIN: fast browser onload init
// Modifications by David Davis, DWD
// Dean Edwards/Matthias Miller/John Resig
// http://dean.edwards.name/weblog/2006/06/again/?full#comment5338
 
function mtInit() {
    // quit if this function has already been called
    if (arguments.callee.done) return;
 
    // flag this function so we don't do the same thing twice
    arguments.callee.done = true;
 
    // kill the timer
    // DWD - check against window
    if ( window._timer ) clearInterval(window._timer);
 
    // DWD - fire the window onload now, and replace it
    if ( window.onload && ( window.onload !== window.mtInit ) ) {
        window.onload();
        window.onload = function() {};
    }
}
 
/* for Mozilla/Opera9 */
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", mtInit, false);
}
 
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete") {
        mtInit(); // call the onload handler
    }
};
/*@end @*/
 
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
    _timer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            mtInit(); // call the onload handler
        }
    }, 10);
}
  
/* for other browsers */
window.onload = mtInit;
 
// END: fast browser onload init

これは、window.onload 前でも DOM 処理が可能になった時点で JavaScript を実行可能にしてくれるものです。
通常、JavaScript は、表示するページにサイズの大きな画像などがあると、それが全部読み込まれた後にしか動作しません。このスクリプトは画像の読み込みに関係なく、ページのDOM処理が可能になれば、JavaScriptが開始します。つまり、Ajax がページの描画に影響なく動作します。

参考サイト：

• window.onload (again)
• The window.onload Problem - Solved!
• window.onloadの代替スクリプト
• sample page（スクリプトの動作を確認できるサンプルページ）