window.onload vs document.onload (Programare, Javascript, Gestionarea Evenimentelor, Evenimente Dom)

Chris Ballance a intrebat.

Care este mai larg acceptat: window.onload sau document.onload?

Comentarii

  • Documentele MDN explică acestea window evenimente: onload și DOMContentLoaded. Exemplu de utilizare:, window.addEventListener('DOMContentLoaded', callback). De la jumătatea anului 2019, compatibil cu toate browserele principale. —– developer.mozilla.org/en-US/docs/Web/API/Window/… —— developer.mozilla.org/en-US/docs/Web/API/Window/load_event –  > Por Craig Hicks.
  • Pentru mine chiar și în continuare, în Firefox 75.0 astăzi, window.onload și document.onload sunt diferite unul față de celălalt! window.onload pare să aibă loc după aceea și are un pic mai multă încărcare decât document.onload! (Unele lucruri funcționează cu fereastra care nu funcționează cu documentul ! Asta este valabil și pentru document.onreadstatechange ‘complete’)! –  > Por Andrew.
9 răspunsuri
Josh Mein

Când trag?

window.onload

  • În mod implicit, se declanșează atunci când se încarcă întreaga pagină, inclusiv conținutul său (imagini, CSS, scripturi etc.).

În unele browsere preia acum rolul de document.onload și se declanșează și atunci când DOM este pregătit.

document.onload

  • Este apelat atunci când DOM este pregătit, ceea ce poate fi înainte de ca imaginile și alt conținut extern să fie încărcate.

Cât de bine sunt acceptate?

window.onload pare a fi cel mai larg acceptat. De fapt, unele dintre cele mai moderne browsere au înlocuit într-un fel document.onload cu window.onload.

Problemele legate de suportul browserelor sunt, cel mai probabil, motivul pentru care mulți oameni încep să folosească biblioteci precum jQuery care să se ocupe de verificarea pregătirii documentului, astfel:

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

În scopul istoriei. window.onload vs body.onload:

O întrebare similară a fost pusă pe codingforums cu ceva timp în urmă cu privire la utilizarea lui window.onload peste body.onload. Rezultatul părea a fi că ar trebui să folosiți window.onload pentru că este bine să separați structura de acțiune.

Comentarii

    26

  • De fapt, această afirmație pare să fie îndreptată către o alegere între window.onload și <body onload=""> care este complet diferită (iar „separarea structurii de acțiune” are mult mai mult sens în acest context). Nu că răspunsul este greșit, dar baza lui este greșită. –  > Por Thor84no.
  • Citatul ăsta e oribil din punct de vedere gramatical… n-ar trebui să ajute o editare (marcată)? –  > Por Kheldar.
  • @Thor84no În sfârșit am găsit timp să mă uit din nou la asta. Am făcut câteva îmbunătățiri. –  > Por Josh Mein.
  • @Kheldar Am decis să parafrazez citatul, deoarece era destul de dur. –  > Por Josh Mein.
  • @JoshMein Înseamnă că document.onload este echivalentul JS al jQuery document.ready? –  > Por john c. j. j..
Lorenz Lo Sauer

Ideea generală este că window.onload declanșează atunci când fereastra documentului este gata de prezentare și document.onload se declanșează atunci când fereastra arborele DOM (construit din codul de marcare din cadrul documentului) este finalizat.

În mod ideal, abonarea la evenimentelor DOM-tree, permite manipulări în afara ecranului prin Javascript, ceea ce implică aproape fără sarcină CPU. În mod contrar, window.onload poate să dureze ceva timp pentru a porni, atunci când mai multe resurse externe trebuie să fie încă solicitate, analizate și încărcate.

►Scenariu de testare:

Pentru a observa diferența și modul în care browserul dvs. ales implementează cele menționate mai sus gestionarii de evenimente, inserați pur și simplu următorul cod în documentul dvs. <body>– din document.

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

►Rezultat:

Iată comportamentul rezultat, observabil pentru Chrome v20 (și, probabil, pentru majoritatea browserelor actuale).

  • Nu document.onload eveniment.
  • onload se declanșează de două ori atunci când este declarat în interiorul tag-ului <body>, o dată atunci când este declarat în interiorul lui <head> (unde evenimentul acționează apoi ca document.onload ).
  • numărarea și acționarea în funcție de starea contorului permite emularea ambelor comportamente de eveniment.
  • Alternativ, se poate declara window.onload gestionarul de evenimente în cadrul limitelor HTML-.<head> element.

►Exemplu de proiect:

Codul de mai sus este preluat din acest proiect de cod al acestui proiect (index.html și keyboarder.js).


Pentru o listă de gestionari de evenimente ale obiectului fereastră, vă rugăm să consultați documentația MDN.

Aakash

Adăugați un ascultător de evenimente

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

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


2 jQuery

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


Noroc.

Comentarii

    19

  • „Evenimentul DOMContentLoaded este declanșat atunci când documentul HTML inițial a fost complet încărcat și analizat, fără a aștepta ca foile de stil, imaginile și subframele să termine de încărcat.” – developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded Deci se pare că nu aveți dreptate în ceea ce privește faptul că totul este încărcat la acest eveniment. –  > Por ProfK.
  • @ProfK, vă mulțumim pentru feedback-ul dumneavoastră. Puteți încerca window.addEventListener('load', function() {...}). Am actualizat și răspunsul meu. –  > Por Aakash.
  • Ceea ce îmi place la acest răspuns este că oferă o soluție simplă, de tip vechi-javascript. Ai crede că majoritatea oamenilor cred că jQuery este integrat în toate browserele, având în vedere cât de des este dat ca unic răspuns. –  > Por Dave Land.
  • Problemă dublă când nenorocitul de jquery durează prea mult să se încarce și primești $ not found. Sunt de părere că soluțiile de tip $(window).ready nu ar trebui să fie NICIODATĂ de încredere pentru a funcționa. –  > Por Shayne.
  • Am încercat ambele în cromul de astăzi. Nu așteaptă pentru css și fonturi. –  > Por movAX13h.
Oriol

În conformitate cu Parsarea documentelor HTML – Sfârșitul,

  1. Browserul analizează sursa HTML și execută scripturi amânate.

  2. A DOMContentLoaded este trimisă la momentul document după ce tot HTML-ul a fost analizat și a fost rulat. Evenimentul este transmis în rubrica window.

  3. Browserul încarcă resursele (cum ar fi imaginile) care întârzie evenimentul de încărcare.

  4. A load este expediat la momentul window.

Prin urmare, ordinea de execuție va fi

  1. DOMContentLoaded ascultătorii de evenimente din window în faza de captură
  2. DOMContentLoaded ascultătorii de evenimente din document
  3. DOMContentLoaded ascultătorii de evenimente din window în faza de bule
  4. load ascultătorii de evenimente (inclusiv onload gestionarii de evenimente) de window

O bulă load ascultător de evenimente (inclusiv onload gestionarul de evenimente) din document nu trebuie invocat niciodată. Trebuie doar să se captureze load ar putea fi invocate, dar din cauza încărcării unei subresurse, cum ar fi o foaie de stil, nu din cauza încărcării documentului în sine.

Comentarii

  • Am rulat fragmentul dvs. document - load - capture se întâmplă într-adevăr, ceea ce este contrar a ceea ce mă așteptam în căutarea mea pentru a afla de ce nu se întâmplă încărcarea documentului în cazul meu. În mod bizar, este inconsecvent. Uneori apare, alteori nu apare, alteori apare de două ori – dar niciodată nu apare o document - load - bubble se întâmplă. Aș sugera să nu folosiți document load. –  > Por erroric.
  • @erroric Bună observație. Nu am luat în considerare faptul că un load eveniment este expediat pe resurse externe. Acel eveniment nu face bule, deci nu este detectat de obicei pe document, dar ar trebui în faza de captură. Aceste intrări se referă la încărcarea <style> și <script> elemente. Cred că Edge are dreptate să le afișeze, iar Firefox și Chrome greșesc. –  > Por Oriol.
  • Mulțumesc, Oriol. useCapture opțiune m-a învățat ceva nou. –  > Por Paul Watson.
  • Mulțumesc pentru rezumatul fluxului de analiză și redare din w3. Mă întreb doar dacă după pasul 4, odată ce evenimentul ‘load’ este declanșat, ce se mai poate întâmpla? Am observat pe browserul meu că uneori mai sunt încă unele obiecte care sunt preluate după ce evenimentul load este declanșat, deși nu am atins sau interacționat deloc cu pagina. Știți cum se numesc aceste obiecte? ‘Non-blocking rendering objects? –  > Por weefwefwqg3.
VincentZHANG

În Chrome, window.onload este diferit de <body onload="">, în timp ce acestea sunt aceleași atât în Firefox(versiunea 35.0), cât și în IE (versiunea 11).

Ați putea explora acest lucru prin următorul fragment:

<!DOCTYPE html>
<html >
    <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 veți vedea atât „window loaded”(care vine primul), cât și „body onload” în consola Chrome. Cu toate acestea, veți vedea doar „body onload” în Firefox și IE. Dacă executați „window.onload.toString()” în consolele de IE & FF, veți vedea:

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

ceea ce înseamnă că atribuirea „window.onload = function(e)…” este suprascrisă.

garaboncias

window.onload și onunload sunt prescurtări pentru document.body.onload și document.body.onunload

document.onload și onload handler on all html tag pare să fie rezervat, însă nu este niciodată declanșat

onload‘ în document -> true

AnthonyWJones

window.onload, totuși, sunt adesea același lucru. În mod similar, body.onload devine window.onload în IE.

gotofritz

Window.onload este standardul, totuși – browserul web din PS3 (bazat pe Netfront) nu acceptă obiectul window, deci nu îl puteți utiliza acolo.

Kamil Kiełczewski

Pe scurt

  • window.onload este nu este acceptat de IE 6-8
  • document.onload nu este suportat de niciun browser modern (evenimentul nu este niciodată declanșat)

Comentarii

  • s/windows/window/window –  > Por Flávio Etrusco.