programing

window.onload 대 document.onload

nasanasas 2020. 10. 2. 22:31
반응형

window.onload 대 document.onload

어느 것이 더 광범위하게 지원됩니다 window.onload나 document.onload?

언제 발사됩니까?

window.onload

  • 기본적으로 콘텐츠 (이미지, CSS, 스크립트 등)를 포함 하여 전체 페이지가로드 될 때 시작됩니다 .

일부 브라우저에서는 이제 역할을 맡아 document.onloadDOM이 준비되면 실행됩니다.

document.onload

  • 이미지 및 기타 외부 콘텐츠가로드 되기 이전 에 있을 수있는 DOM이 준비되면 호출됩니다 .

얼마나 잘 지원됩니까?

window.onload가장 널리 지원되는 것으로 보입니다. 실제로 최신 브라우저 중 일부는 어떤 의미 document.onload에서 window.onload.

브라우저 지원 문제는 많은 사람들이 문서가 준비되었는지 확인하기 위해 jQuery 와 같은 라이브러리를 사용하기 시작하는 이유 일 가능성이 높습니다 .

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

역사의 목적을 위해. window.onload대 body.onload:

over 의 사용과 관련하여 코딩 포럼 에서 비슷한 질문을 받았습니다 . 그 결과 구조와 액션을 분리하는 것이 좋기 때문에 사용해야하는 것 같습니다 .window.onloadbody.onloadwindow.onload

일반적인 생각은 즉 위해 window.onload 화재 문서의 윈도우 인 경우 프리젠 테이션 준비 및 document.onload 화재 때 DOM 트리 (문서 내에서 마크 업 코드에서 내장이)되어 완료 .

이상적으로는 DOM 트리 이벤트를 구독하면 자바 스크립트를 통해 화면 밖에서 조작 할 수있어 CPU 부하가 거의 발생 하지 않습니다 . 반대로 여러 외부 리소스가 아직 요청, 구문 분석 및로드되지 않은 경우 실행 하는 데 시간이 걸릴window.onload 수 있습니다 .

► 테스트 시나리오 :

차이점과 선택한 브라우저 가 앞서 언급 한 이벤트 핸들러를 구현 하는 방법 을 확인하려면 문서의 --태그 내에 다음 코드를 삽입하면 됩니다.<body>

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

► 결과 :

다음은 Chrome v20 (및 아마도 대부분의 최신 브라우저)에서 관찰 할 수있는 결과 동작입니다.

  • document.onload이벤트가 없습니다 .
  • onload공진 영역 선언 할 때 불이 두 <body>번 내에 선언 경우 <head>(이벤트 후 역할 곳 document.onload).
  • 카운터의 상태에 따라 계산하고 작동하면 두 이벤트 동작을 모두 에뮬레이트 할 수 있습니다.
  • 또는 window.onloadHTML- <head>요소 의 범위 내 에서 이벤트 핸들러를 선언하십시오 .

► 예시 프로젝트 :

위의 코드는 이 프로젝트의 코드베이스 ( index.html및 keyboarder.js) 에서 가져온 것입니다 .

window 객체 의 이벤트 핸들러 목록은 MDN 문서를 참조하십시오.

이벤트 리스너 추가

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

Update March 2017

1 바닐라 자바 ​​스크립트

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

행운을 빕니다.

HTML 문서 구문 분석 에 따르면 -끝 ,

  1. 브라우저는 HTML 소스를 구문 분석하고 지연된 스크립트를 실행합니다.

  2. A DOMContentLoaded는 document모든 HTML이 구문 분석되고 실행될 때 전달됩니다 . 이벤트가 window.

  3. 브라우저는로드 이벤트를 지연시키는 리소스 (예 : 이미지)를로드합니다.

  4. 에서 load이벤트가 전달됩니다 window.

따라서 실행 순서는

  1. DOMContentLoadedwindow캡처 단계 의 이벤트 리스너
  2. DOMContentLoaded 이벤트 리스너 document
  3. DOMContentLoaded event listeners of window in the bubble phase
  4. load event listeners (including onload event handler) of window

A bubble load event listener (including onload event handler) in document should never be invoked. Only capture load listeners might be invoked, but due to the load of a sub-resource like a stylesheet, not due to the load of the document itself.

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

In Chrome, window.onload is different from <body onload="">, whereas they are the same in both Firefox(version 35.0) and IE (version 11).

You could explore that by the following snippet:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

And you will see both "window loaded"(which comes firstly) and "body onload" in Chrome console. However, you will see just "body onload" in Firefox and IE. If you run "window.onload.toString()" in the consoles of IE & FF, you will see:

"function onload(event) { bodyOnloadHandler() }"

which means that the assignment "window.onload = function(e)..." is overwritten.

window.onload and onunload are shortcuts to document.body.onload and document.body.onunload

document.onload and onload handler on all html tag seems to be reserved however never triggered

'onload' in document -> true

window.onload however they are often the same thing. Similarly body.onload becomes window.onload in IE.

Window.onload is the standard, however - the web browser in the PS3 (based on Netfront) doesn't support the window object, so you can't use it there.

참고URL : https://stackoverflow.com/questions/588040/window-onload-vs-document-onload

반응형

'programing' 카테고리의 다른 글

git이 기본적으로 빨리 감기 병합을 수행하는 이유는 무엇입니까?  (0) 2020.10.02
표준 JSON API 응답 형식?  (0) 2020.10.02
이중 또는 단일 대괄호, 괄호, 중괄호 사용 방법  (0) 2020.10.02
C #을 사용하여 메서드를 매개 변수로 전달  (0) 2020.10.02
특정 열의 값이 NaN 인 Pandas DataFrame의 행을 삭제하는 방법  (0) 2020.10.02

'programing'의 다른글

  • 현재글window.onload 대 document.onload

관련글

댓글

티스토리툴바