페이지 DOM이 로드되었을 때 알림 받기(단, window.onload 이전)
https://stackoverflow.com/questions/65434
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
페이지 본문이 로드될 때(모든 이미지와 타사 리소스가 로드되기 전에) 알림을 받을 수 있는 몇 가지 방법이 있다는 것을 알고 있습니다. 창.온로드 이벤트), 브라우저마다 다릅니다.
모든 브라우저에서 이 작업을 수행할 수 있는 확실한 방법이 있습니까?
지금까지 내가 아는 내용은 다음과 같습니다.
DOM콘텐츠가 로드됨 :Mozilla, Opera 9 및 최신 WebKits.여기에는 이벤트에 리스너를 추가하는 작업이 포함됩니다.
document.addEventListener( "DOMContentLoaded", [init function], false );
지연된 스크립트:IE에서는 @defer 속성을 사용하여 SCRIPT 태그를 내보낼 수 있습니다. 이 태그는 BODY 태그를 닫은 후에만 안정적으로 로드됩니다.
투표:다른 브라우저에서는 계속 폴링할 수 있지만 폴링할 표준 항목이 있습니까, 아니면 각 브라우저에서 다른 작업을 수행해야 합니까?
document.write나 외부 파일을 사용하지 않고도 갈 수 있었으면 좋겠습니다.
이는 jQuery를 통해 간단하게 수행할 수 있습니다.
$(document).ready(function() { ... })
하지만 저는 JS 라이브러리를 작성 중이고 jQuery가 항상 거기에 있을 것이라고는 믿을 수 없습니다.
해결책
DOM이 언제 준비되었는지 확인하는 브라우저 간 방법은 없습니다. 이것이 바로 약간의 비호환성을 추상화하기 위해 jQuery와 같은 라이브러리가 존재하는 이유입니다.
Mozilla, Opera 및 최신 WebKit은 DOMContentLoaded 이벤트.IE와 Safari에는 창 스크롤이나 스타일시트 확인과 같은 이상한 해킹이 필요합니다.피투성이의 세부 사항은 jQuery에 포함되어 있습니다. bindReady() 기능.
다른 팁
컴팩트한 독립형 솔루션을 보여주는 이 페이지를 찾았습니다.모든 브라우저에서 작동하는 것으로 보이며 방법에 대한 설명이 있습니다.
YUI는 이를 수행하기 위해 세 가지 테스트를 사용합니다.Firefox 및 최신 WebKit의 경우 DOMContentLoaded 이벤트가 발생합니다.이전 Safari의 경우 document.readyState는 "로드" 또는 "완료"될 때까지 감시했습니다.IE의 경우 HTML <P> 태그가 생성되고 DOM이 준비되지 않은 경우 오류가 발생하는 "doScroll()" 메서드가 호출됩니다.소스 YAHOO.util.Event YUI 관련 코드를 보여줍니다.Event.js에서 "doScroll"을 검색하세요.
jQuery와 같은 라이브러리를 사용하면 수많은 브라우저 불일치 시간을 줄일 수 있습니다.
이 경우 jQuery를 사용하면 다음과 같이 할 수 있습니다.
$(document).ready ( function () {
//your code here
});
궁금하다면 소스를 보고 그것이 어떻게 수행되는지 볼 수 있지만, 요즘 시대에 도서관 작가가 당신을 위해 모든 고통스러운 작업을 완료했다면 누구도 이 바퀴를 재발명해서는 안 된다고 생각합니다.
jQuery에서 관련 코드를 가져오면 John Resig가 이미 jQuery에서 이 문제에 대한 대부분의 기반을 다루었습니다.
왜 안되나요?
<body>
<!-- various content -->
<script type="text/javascript">
<!--
myInit();
-->
</script>
</body>
내가 올바르게 이해했다면 브라우저가 본문의 마지막 항목인 페이지에 도달하자마자 myInit이 실행될 것입니다.
당신이 찾고 있는 멋진 크로스브라우저 솔루션은...존재하지 않습니다...(큰 군중이 '아아아아....'라고 말하는 소리를 상상해 보십시오.)
DomContent가 로드됨 단순히 최고의 기회입니다.당신은 여전히 polling IE-oldies를 위한 기술.
- addEventListener를 사용해 보십시오.
- 사용할 수 없는 경우(IE에서는 당연히) 프레임을 확인하세요.
- 프레임이 아닌 경우 오류가 발생하지 않을 때까지 스크롤합니다(폴링).
- 프레임인 경우 IE 이벤트 document.onreadystatechange를 사용합니다.
- 지원되지 않는 다른 브라우저의 경우 이전 document.onload 이벤트를 사용하세요.
다음 코드 샘플을 찾았습니다. javascript.info 모든 브라우저를 포괄하는 데 사용할 수 있습니다.
function bindReady(handler){
var called = false
function ready() {
if (called) return
called = true
handler()
}
if ( document.addEventListener ) { // native event
document.addEventListener( "DOMContentLoaded", ready, false )
} else if ( document.attachEvent ) { // IE
try {
var isFrame = window.frameElement != null
} catch(e) {}
// IE, the document is not inside a frame
if ( document.documentElement.doScroll && !isFrame ) {
function tryScroll(){
if (called) return
try {
document.documentElement.doScroll("left")
ready()
} catch(e) {
setTimeout(tryScroll, 10)
}
}
tryScroll()
}
// IE, the document is inside a frame
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
ready()
}
})
}
// Old browsers
if (window.addEventListener)
window.addEventListener('load', ready, false)
else if (window.attachEvent)
window.attachEvent('onload', ready)
else {
var fn = window.onload // very old browser, copy old onload
window.onload = function() { // replace by new onload and call the old one
fn && fn()
ready()
}
}
}
이것은 꽤 잘 작동합니다.
setTimeout(MyInitFunction, 0);
setTimeout을 사용하면 꽤 잘 작동할 수 있지만 실행 시기는 브라우저에 따라 다릅니다.시간 초과 시간으로 0을 전달하면 상황이 "안정"될 때 브라우저가 실행됩니다.
이에 대한 좋은 점은 이러한 이벤트를 많이 가질 수 있고 onLoad 이벤트 연결에 대해 걱정할 필요가 없다는 것입니다.
setTimeout(myFunction, 0);
setTimeout(anotherFunction, 0);
setTimeout(function(){ doSomething ...}, 0);
등.
문서 로드가 완료되면 모두 실행됩니다. 또는 문서 로드 후에 설정한 경우 스크립트 실행이 완료된 후에 실행됩니다.
실행 순서는 결정되지 않으며 브라우저마다 변경될 수 있습니다.그래서 당신은 믿을 수 없습니다 myFunction 이전에 실행 중 anotherFunction 예를 들어.
