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("<script id=__ie_onload defer src=javascript:void(0)></script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = 함수() {
if (this.readyState == "완료") {
init(); // 온로드 핸들러를 호출합니다.
}
};
/*@끝 @*/
Diego Perini는 나중에 doScroll() 메서드를 사용하여 addDOMLoadEvent 이벤트를 시뮬레이션하는 솔루션을 제공했으며 이 솔루션은 기본적으로 주류 JavaScript 프레임워크(JQuery, YUI 등)에 채택되었습니다.
원칙은 기본적으로 다음과 같습니다.
ondocumentready 이벤트가 발생하면 문서(문서)가 완전히 구문 분석되고 생성된 것입니다. 구성 요소가 원본 문서 구조를 조작해야 하는 경우 초기화 코드를 이 뒤에 배치해야 합니다. ondocumentready 이벤트는 전체 페이지가 로드되었으며 초기 문서의 onload 이벤트가 발생하기 직전에 시작되었음을 구성 요소에 알려줍니다.
doScroll과 같은 일부 방법을 사용하려면 원본 문서가 완전히 로드되어야 합니다. 이러한 메서드가 초기화 기능의 일부인 경우 ondocumentready 이벤트가 실행될 때 실행됩니다.
/*
*
*IEContentLoaded.js
*
* 저자: Diego Perini (gmail.com의 diego.perini) NWBOX Srl
* 요약: IE 브라우저용 DOMContentLoaded 에뮬레이션
* 업데이트 날짜: 2007년 5월 10일
* 라이센스: GPL/CC
* 버전: 미정
*
*/
// @w 창 참조
// @fn
함수 참조함수 IEContentLoaded(w, fn) {
var d = w.document, 완료 = false,
// 한 번만 실행
초기화 = 함수() {
만약 (!완료) {
완료 = 사실;
fn();
}
};
// 오류가 없는지 폴링
(기능 () {
노력하다 {
// 문서 준비가 완료될 때까지 오류가 발생합니다.
d.documentElement.doScroll('왼쪽');
} 잡기 (e) {
setTimeout(arguments.callee, 50);
반품;
}
// 오류 없음, 실행
초기화();
})();
// 항상 로드되기 전에 실행하려고 합니다.
d.onreadystatechange = function() {
if (d.readyState == '완료') {
d.onreadystatechange = null;
초기화();
}
};
}