window.onload vs document.onload

Wat wordt breder ondersteund: window.onloadof document.onload?


Antwoord 1, autoriteit 100%

Wanneer vuren ze?

window.onload

  • Standaard wordt het geactiveerd wanneer de hele pagina wordt geladen, inclusiefde inhoud (afbeeldingen, CSS, scripts, enz.).

In sommige browsers neemt het nu de rol van document.onloadover en wordt het ook geactiveerd wanneer het DOM gereed is.

document.onload

  • Het wordt aangeroepen wanneer de DOM gereed is, wat voorafgaandkan zijn voordat afbeeldingen en andere externe inhoud worden geladen.

Hoe goed worden ze ondersteund?

window.onloadlijkt het meest ondersteund te worden. Sommige van de modernste browsers hebben in zekere zin document.onloadvervangen door window.onload.

Browserondersteuningsproblemen zijn hoogstwaarschijnlijk de reden waarom veel mensen bibliotheken zoals jQuerygaan gebruiken om de controle uit te voeren voor het document klaar is, zoals zo:

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

Voor het doel van de geschiedenis. window.onloadvs body.onload:

Een soortgelijke vraag werd een tijdje gesteld op codingforums
terug over het gebruik van window.onloadvia body.onload. De
het resultaat leek te zijn dat je window.onloadzou moeten gebruiken omdat het zo is
goed om je structuur van de actie te scheiden.


Antwoord 2, autoriteit 36%

Het algemene idee is dat window.onload wordt geactiveerdwanneer het documentvenster klaar is voor presentatieen document.onload wordt geactiveerdwanneer de >DOM-structuur(gebouwd op basis van de opmaakcode in het document) is voltooid.

Idealiter staat het abonneren op DOM-tree-evenementenoffscreen-manipulaties toe via Javascript, waarbij bijna geen CPU-belasting. Daarentegen kan window.onloadeen tijdje duren om te activeren, wanneer meerdere externe bronnen nog moeten worden aangevraagd, geparseerd en geladen.

>Testscenario:

Om het verschil te zien en hoe uw browsernaar keuze implementeertde bovengenoemde event-handlers, voegt u eenvoudig de volgende code in uw document in – <body>– tag.

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

>Resultaat:

Dit is het resulterende gedrag, waarneembaar voor Chrome v20 (en waarschijnlijk de meeste huidige browsers).

  • Geen document.onloadgebeurtenis.
  • onloadwordt tweemaal geactiveerd wanneer gedeclareerd in de <body>, eenmaal wanneer gedeclareerd in de <head>(waar de gebeurtenis dan fungeert als document.onload).
  • door te tellen en te handelen afhankelijk van de status van de teller, kunnen beide gebeurtenisgedragingen worden geëmuleerd.
  • U kunt ook de gebeurtenishandler window.onloaddeclareren binnen de grenzen van het HTML-<head>-element.

>Voorbeeldproject:

De bovenstaande code is afkomstig uit de decodebase van dit project (index.htmlen keyboarder.js).


Voor een lijst met event-handlers van het window-object, raadpleeg de MDN-documentatie.


Antwoord 3, autoriteit 23%

Gebeurtenisluisteraar toevoegen

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      /* 
        - Code to execute when only the HTML document is loaded.
        - This doesn't wait for stylesheets, 
          images, and subframes to finish loading. 
      */
  });
</script>

Update March 2017

1 Vanille JavaScript

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

2 jQuery

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

Veel geluk.


Antwoord 4, autoriteit 11%

Volgens Html-documenten ontleden – Het einde,

  1. De browser analyseert de HTML-bron en voert uitgestelde scripts uit.

  2. Een DOMContentLoadedwordt verzonden naar het documentwanneer alle HTML is geparseerd en uitgevoerd. De gebeurtenis bubbelt naar het window.

  3. De browser laadt bronnen (zoals afbeeldingen) die de laadgebeurtenis vertragen.

  4. Een load-gebeurtenis wordt verzonden in het window.

Daarom is de volgorde van uitvoering

  1. DOMContentLoadedgebeurtenislisteners van windowin de vastlegfase
  2. DOMContentLoadedgebeurtenislisteners van document
  3. DOMContentLoadedgebeurtenislisteners van windowin de bubble-fase
  4. loadgebeurtenislisteners (inclusief onloadgebeurtenishandler) van window

Een bubbel loadgebeurtenislistener (inclusief onloadgebeurtenishandler) in documentmag nooit worden aangeroepen.Alleen capture loadluisteraars kunnen worden aangeroepen, maar vanwege de belasting van een subbron zoals een stylesheet, niet vanwege de belasting van het document zelf.

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

Antwoord 5, autoriteit 2%

In Chrome is window.onload anders dan <body onload="">, terwijl ze hetzelfde zijn in zowel Firefox (versie 35.0) als IE (versie 11).

p>

Je zou dat kunnen onderzoeken aan de hand van het volgende fragment:

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

En je ziet zowel ‘window loaded’ (wat als eerste komt) als ‘body onload’ in de Chrome-console. U ziet echter alleen “body onload” in Firefox en IE. Als u “window.onload.toString()” uitvoert in de consoles van IE & FF, je zult zien:

“function onload(event) { bodyOnloadHandler() }”

wat betekent dat de toewijzing “window.onload = function(e)…” wordt overschreven.


Antwoord 6

window.onloaden onunloadzijn snelkoppelingen naar document.body.onloaden document.body.onunload

document.onloaden onloadhandler op alle html-tags lijken te zijn gereserveerd, maar worden nooit geactiveerd

onload‘ in document -> waar


Antwoord 7

window.onload zijn echter vaak hetzelfde. Op dezelfde manier wordt body.onload window.onload in IE.


Antwoord 8

Window.onload is echter de standaard – de webbrowser in de PS3 (gebaseerd op Netfront) ondersteunt het window-object niet, dus je kunt het daar niet gebruiken.


Antwoord 9

Kortom

  • window.onloadwordt niet ondersteund door IE 6-8
  • document.onloadwordt door geen enkele moderne browser ondersteund (gebeurtenis wordt nooit geactiveerd)

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes