finestra.onload vs documento.onload [chiuso]

StackOverflow https://stackoverflow.com/questions/588040

  •  09-09-2019
  •  | 
  •  

Domanda

Che è più ampiamente supportato: window.onload o document.onload?

È stato utile?

Soluzione

Quando si sparano?

window.onload

  • Per impostazione predefinita, viene licenziato quando l'intero caricamento della pagina, tra cui i contenuti (immagini, CSS, script, ecc.).

In alcuni browser ora assume il ruolo di document.onload e gli incendi quando il DOM è pronto pure.

document.onload

  • Viene chiamato quando il DOM è pronto che può essere prima per immagini e altri contenuti esterno viene caricato.

Come pure sono hanno sostenuto?

window.onload sembra essere il più ampiamente supportato. In effetti, alcuni dei browser più moderni hanno in un certo senso sostituita con document.onload window.onload.

problemi di supporto del browser sono probabilmente il motivo per cui molte persone stanno iniziando a utilizzare le librerie quali jQuery per gestire il controllo per il documento essere pronti, in questo modo: 

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

Ai fini della storia. window.onload vs body.onload:

  

Una domanda simile è stato chiesto su codingforums un po '   indietro per quanto riguarda l'utilizzo di window.onload sopra body.onload. Il   risultato sembrava essere che si dovrebbe usare window.onload perché è   buona per separare la struttura dall'azione.

Altri suggerimenti

L'idea generale è che finestra.onload incendi quando il documento della finestra pronto per la presentazione e documento.onload incendi quando il Albero DOM (costruito dal codice all'interno del documento) è completato.

Idealmente, l'iscrizione al Albero DOM eventi, permette offscreen-manipolazioni tramite Javascript, incorrere in quasi nessun carico della CPU.Al contrario, window.onload può prendere un po ' di fuoco, quando più risorse esterne devono ancora essere richiesto, analisi e caricamento.

►Scenario di Test:

Osservare la differenza e come il vostro browser di scelta implementa la predetta gestori di eventi, è sufficiente inserire il seguente codice all'interno del documento - <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>

►Risultato:

Qui è il comportamento risultante, osservabili per Chrome v20 (e probabilmente la maggior parte degli attuali browser).

  • No document.onload evento.
  • onload si attiva due volte quando dichiarato all'interno del <body>, una volta quando dichiarato all'interno del <head> (dove l'evento è quindi agisce come document.onload ).
  • conteggio e di agire dipendenti dallo stato del contatore permette di emulare eventi comportamenti.
  • In alternativa, dichiarare la window.onload gestore di eventi all'interno dei confini del HTML<head> elemento.

►Progetto Di Esempio:

Il codice di cui sopra è presa da questo progetto codebase (index.html e keyboarder.js).

Per un elenco di gestori di eventi dell'oggetto window, si prega di consultare il MDN documentazione.

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

1 vaniglia JavaScript 

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

2 jQuery 

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

Buona fortuna.

parsing del codice HTML - La fine ,

  1. Il browser analizza il codice HTML e script viene eseguito differite.

  2. Un DOMContentLoaded viene inviato al document quando tutto il codice HTML è stato analizzato e hanno eseguito. L'evento bolle al window.

  3. il browser carica le risorse (come immagini) che ritardano l'evento carico.

  4. Un evento load viene inviato al window.

Pertanto, l'ordine di esecuzione sarà

  1. listener di eventi DOMContentLoaded di window nella fase di cattura
  2. listener di eventi DOMContentLoaded di document
  3. listener di eventi DOMContentLoaded di window in fase di bolla
  4. listener di eventi load (compresi gestore di eventi onload) di window

Un listener di eventi bolla load (tra cui gestore di eventi onload) in document non dovrebbe mai essere invocato. potrebbero essere invocati solo catturare ascoltatori load, ma a causa del carico di un sub-risorsa come un foglio di stile, non a causa del carico del documento stesso. 

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 è diverso da <body onload="">, mentre sono gli stessi in entrambi Firefox (versione 35.0) e IE (versione 11).

Si potrebbe scoprire che il seguente frammento: 

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

E vedrete entrambi "finestra caricato" (che deriva in primo luogo) e "body onload" in consolle Chrome. Tuttavia, si vedrà solo "onload del corpo" in Firefox e IE. Se si esegue "window.onload.toString()" nella console di IE e FF, si vedrà:

  

"funzione onLoad (event) {bodyOnloadHandler ()}"

il che significa che l'assegnazione "window.onload = function (e) ..." viene sovrascritto.

window.onload e onunload sono scorciatoie per document.body.onload e document.body.onunload

document.onload e conduttore onload su tutti i tag HTML sembra essere riservato però mai innescato

'onload' nel documento -> true

window.onload tuttavia essi sono spesso la stessa cosa. Allo stesso modo body.onload diventa window.onload in IE.

window.onload è lo standard, tuttavia -. Il browser web nella PS3 (sulla base di Netfront) non supporta l'oggetto finestra, quindi non è possibile utilizzare lì

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top