okno.onload vs document.onload

Który jest szerzej obsługiwany: window.onload Czy document.onload?

Author: Kamil Kiełczewski, 2009-02-25
Source

9 answers

Kiedy strzelają?

window.onload

  • domyślnie jest wywoływana, gdy wczytuje się cała strona, łącznie z jej zawartością (obrazy, CSS, skrypty itp.).

W niektórych przeglądarkach przejmuje teraz rolę document.onload i uruchamia się, gdy DOM jest również gotowy.

document.onload

  • jest wywoływany, gdy DOM jest gotowy, który może być przed do obrazów i innych zewnętrznych treści jest ładowany.

Jak dobrze są wsparcie?

window.onload wydaje się być najbardziej wspierane. W rzeczywistości niektóre z najnowocześniejszych przeglądarek zostały w pewnym sensie zastąpione document.onload przez window.onload.

Problemy z obsługą przeglądarki są najprawdopodobniej powodem, dla którego wiele osób zaczyna używać bibliotek, takich jak jQuery do obsługi sprawdzania, czy dokument jest gotowy.]} 

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

Dla celów historii. window.onload vs body.onload:

Podobne pytanie zadano na codingforums a while powrót do użycia window.onload over body.onload. Na wynik wydaje się, że należy użyć window.onload, ponieważ jest dobrze jest oddzielić swoją strukturę od akcji.

 782
Author: Josh Mein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-25 08:15:35

Ogólna idea jest taka, że okno.onload jest wywołany, gdy okno dokumentu jest gotowe do prezentacji i dokumentu.wywołanie onload gdy drzewo DOM (zbudowane na podstawie kodu znaczników w dokumencie) jest zakończone .

Idealnie, subskrybowanie zdarzeń Dom-tree , pozwala na manipulacje offscreen poprzez Javascript, nie obciążając prawie procesora . Kontrastowo, window.onload can take a while to odpal , gdy wiele zewnętrznych zasobów musi zostać jeszcze poproszonych, przeanalizowanych i załadowanych.

►scenariusz testu:

Aby zaobserwować różnicę i jak twoja przeglądarka z wyboru implementuje wyżej wymienione procedury obsługi zdarzeń , po prostu wstaw poniższy kod w znaczniku - <body> - dokumentu.

<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>

►wynik:

Oto wynikowe zachowanie, które można zaobserwować w Chrome v20 (i prawdopodobnie najbardziej aktualnym przeglądarki).

  • nie document.onload Zdarzenie.
  • onload zostanie wywołane dwukrotnie, gdy zostanie zadeklarowane wewnątrz <body>, raz, gdy zostanie zadeklarowane wewnątrz <head> (gdzie zdarzenie działa wtedy jako document.onload).
  • liczenie i działanie zależne od stanu licznika pozwala na emulację obu zachowań zdarzeń.
  • alternatywnie zadeklaruj obsługę zdarzeń window.onload w granicach elementu HTML-<head>.

►Przykładowy Projekt:

Powyższy kod pochodzi z Kod projektu (index.html i keyboarder.js).

Lista procedur obsługi zdarzeń obiektu window znajduje się w dokumentacji MDN.

 284
Author: Lorenz Lo Sauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-17 17:37:27

Add Event Listener 

<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

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

2 jQuery 

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

Powodzenia.
 169
Author: Aakash,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-31 10:04:43

Zgodnie z parsowanie dokumentów HTML-koniec ,

  1. Przeglądarka przetwarza źródło HTML i uruchamia skrypty odroczone.

  2. A DOMContentLoaded jest wysyłane w document, gdy cały HTML został parsowany i uruchomiony. Zdarzenia do window.

  3. Przeglądarka ładuje zasoby (takie jak obrazy), które opóźniają Zdarzenie ładowania.

  4. Zdarzenie load jest wysyłane w window.

Dlatego kolejność wykonania będzie

  1. DOMContentLoaded słuchacze zdarzeń window w fazie przechwytywania
  2. DOMContentLoaded słuchacze zdarzeń z document
  3. DOMContentLoaded słuchacze zdarzeń window w fazie bańki
  4. load event listeners (including onload event handler) of window

Bąbelkowy detektor zdarzeń load (w tym detektor zdarzeń onload) W document nigdy nie powinien być wywoływany. tylko przechwytywanie load może być wywołane, ale ze względu na obciążenie pod-zasób, jak arkusz stylów, nie ze względu na obciążenie samego dokumentu.

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
};
 90
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-31 21:33:18

W Chrome, Okno.onload różni się od <body onload="">, podczas gdy są one takie same zarówno w Firefoksie (wersja 35.0), jak i IE (Wersja 11).

Możesz to zbadać za pomocą następującego fragmentu: 

<!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>

I zobaczysz zarówno " window loaded "(który pojawia się najpierw), jak i" body onload " w konsoli Chrome. Jednak zobaczysz po prostu "body onload" w Firefoksie i IE. Jeśli uruchomisz "window.onload.toString() " w konsolach IE & FF, zobaczysz:

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

Co oznacza, że przypisanie " okno.onload = function(e)..."jest nadpisane.

 13
Author: VincentZHANG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-26 04:08:11

window.onload i onunload są skrótami do document.body.onload i document.body.onunload

document.onload i onload Obsługa wszystkich tagów html wydaje się być zarezerwowana, jednak nigdy nie wywołana

'onload' w dokumencie - > true

 8
Author: garaboncias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-16 06:50:08

Okno.onload jednak często są to samo. Podobnie ciało.onload staje się oknem.onload w IE.

 5
Author: AnthonyWJones,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-25 21:47:20

Okno.onload jest jednak standardem - przeglądarka internetowa w PS3 (oparta na Netfront) nie obsługuje obiektu window, więc nie można go tam używać.

 1
Author: gotofritz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-19 11:31:31

W skrócie

  • window.onload is not supported by IE 6-8
  • document.onload nie jest obsługiwana przez żadną nowoczesną przeglądarkę (zdarzenie nigdy nie jest wywoływane) 

window.onload   = () => console.log('window.onload works');   // fired
document.onload = () => console.log('document.onload works'); // not fired
 1
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-27 20:50:58