window.onload イベントは、ページのすべてのコンテンツ (画像などを含む) が読み込まれた後に実行する必要があるため、多くの場合、DOM が読み込まれたらすぐにスクリプトを実行することを好みます。実際、ほとんどの主流ブラウザ (Firefox 3 以降、Opera 9 以降、Safari 3 以降、Chrome 2 以降) は、このイベント メソッド addDOMLoadEvent を提供します。
document.addEventListener("DOMContentLoaded", init, false);
では、IE の addDOMLoadEvent イベントをシミュレートするにはどうすればよいでしょうか?
Matthias Miller は最初に次の解決策を提供しました。
// Internet Explorer の場合 (条件付きコメントを使用)
/*@cc_on @*/
/*@if (@_win32)
document.write("");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "完了") {
init(); // onload ハンドラーを呼び出す
}
};
/*@終わり @*/
その後、 Diego Perini はdoScroll() メソッドを使用して addDOMLoadEvent イベントをシミュレートするソリューションを提供しました。このソリューションは基本的に主流の JavaScript フレームワーク (JQuery、YUI など) に採用されています。
原則は基本的に次のとおりです。
ondocumentready イベントが発生すると、ドキュメント (ドキュメント) は完全に解析され、作成されます。コンポーネントが元のドキュメント構造を操作する必要がある場合は、この後に初期化コードを配置する必要があります。 ondocumentready イベントは、ページ全体がロードされたことをコンポーネントに伝え、最初のドキュメントの onload イベントが発生する直前に発生します。
doScroll などの一部のメソッドでは、元のドキュメントが完全にロードされている必要があります。これらのメソッドが初期化関数の一部である場合、ondocumentready イベントが発生したときに実行されます。
/*
*
*IEContentLoaded.js
*
* 著者: Diego Perini (diego.perini at gmail.com) NWBOX Srl
* 概要: IE ブラウザ用の DOMContentLoaded エミュレーション
* 更新日: 2007 年 5 月 10 日
* ライセンス: GPL/CC
※バージョン：未定
*
*/
// @w ウィンドウ参照
// @fn
関数参照function IEContentLoaded (w, fn) {
var d = w.document、done = false、
// 1 回だけ起動する
init = 関数 () {
if (!done) {
完了 = true;
fn();
}
};
// エラーがないことをポーリングします
（関数 （） {
試す {
// ondocumentready が完了するまでエラーをスローします
d.documentElement.doScroll('left');
} キャッチ (e) {
setTimeout(arguments.callee, 50);
戻る;
}
// エラーなし、起動
init();
})();
// 常に onload の前に起動しようとします
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}