window.onload sembra attivarsi prima che il DOM sia caricato (JavaScript)

Ho problemi con gli eventi window.onload e document.onload. Tutto ciò che ho letto mi dice che questi non si attivano fino a quando il DOM non è completamente caricato con tutte le sue risorse, sembra che questo non stia accadendo per me:window.onload sembra attivarsi prima che il DOM sia caricato (JavaScript)

Ho provato la seguente semplice pagina in Chrome 4.1.249.1036 (41514) e IE 8.0.7600.16385 con lo stesso risultato: entrambi hanno visualizzato il messaggio "Fallito!", Indicando che myParagraph non è stato caricato (e quindi il DOM sembra incompleto).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <script type="text/javascript"> 
      window.onload = doThis(); 
      // document.onload gives the same result 

      function doThis() { 
       if (document.getElementById("myParagraph")) { 
        alert("It worked!"); 
       } else { 
        alert("It failed!"); 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <p id="myParagraph">Nothing is here.</p> 
    </body> 
</html>

Sono utilizzando script più complessi di questo, in un file .js esterna, ma questo illustra il problema. Posso farlo funzionare avendo window.onload impostato un timer per mezzo secondo per eseguire doThis(), ma questa sembra una soluzione poco elegante, e non risponde alla domanda sul perché window.onload non sembra fare cosa tutti dicono che lo fa. Un'altra soluzione sarebbe quella di impostare un timer che verificherà se il DOM è caricato, e in caso contrario si chiamerà solo mezzo secondo dopo (quindi continuerà a controllare fino a quando il DOM non sarà caricato), ma questo mi sembra troppo complesso. C'è un evento più appropriato da usare?

fonte

2010-03-20 David Mason

primo errore che vedo è che si assing [risultato della funzione] invece di [function] stessa.Riesci a vedere 'doThis()' è un'istruzione che ritorna indefinita dopo la valutazione perché 'doThis' non ha un operatore' return'. 'window.onload = doThis;' farà il lavoro. Nota: non ci sono parentesi – Dan

@DavidMason W3Schools è una scarsa fonte di informazioni. Non sono affiliati al W3C in alcun modo. * Non considerare * w3schools come una fonte autorevole di informazioni, trattandole nel modo in cui meritano di essere trattate: collegamenti fastidiosi che devi saltare quando cerchi un vero e proprio sito web di riferimento. – doug65536

@ doug65536 oggi sono completamente d'accordo. Raccomando w3fools.com per chiunque non sia sicuro. In questi giorni tendo a sviluppare developer.mozilla.org per informazioni di alta qualità, quindi eseguo una ricerca più ampia se non trovo quello che sto cercando lì (che è generalmente quando sto cercando di fare qualcosa di ridicolo). Sono abbastanza imbarazzato dal fatto che il passato ... me l'abbia postato ... ma posso cancellarlo! Lì, un riferimento meno ingenuo a w3schools su Internet :) Grazie per averlo individuato. –

Alla finestra temporale viene caricato il corpo non è ancora caricato quindi si dovrebbe correggere il codice nel seguente modo:

<script type="text/javascript"> 
    window.onload = function(){ 
     window.document.body.onload = doThis; // note removed parentheses 
    }; 

    function doThis() { 
     if (document.getElementById("myParagraph")) { 
      alert("It worked!"); 
     } else { 
      alert("It failed!"); 
     } 
    } 
</script>

testato per funzionare in FF/IE/Chrome, sebbene pensi di gestire anche document.onload.

Come già accennato, l'utilizzo di js-frameworks sarà un'idea molto migliore.

fonte

2010-03-21 00:14:22 Li0liQ

Grazie, sembra risolvere il mio problema e risolve quello che pensavo fosse una ricorsione dello stesso problema di collegare qualcosa al corpo. Caricare l'evento prima di sapere se il corpo è stato caricato con successo. Ora ho il messaggio "Ha funzionato!" spuntando, e può continuare pedanticamente mantenendo i miei script e markup bello e separato. –

ha funzionato anche per me, grazie amico! – foxybagga

Si noti che l'utilizzo di questo approccio per 2 script probabilmente sovrascriverà uno con l'altro. In questi giorni tendo ad usare document.addEventListener ("DOMContentLoaded", funzione (evento) { console.log ("DOM completamente caricato e analizzato"); }); Vedere: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded –

Hai provato a utilizzare invece una libreria javascript, ad es. jQuery ed è $(document).ready() funzione:

$(document).ready(function() { 
     // put all your jQuery goodness in here. 
    });

fonte

2010-03-21 00:00:17 M4N

Grazie, controllerò questa settimana. Sono ancora preoccupato che non ci sia alcun evento associato al DOM che può dirmi in modo affidabile quando il DOM è stato caricato, senza ricorrere a script di terze parti. –

È decisamente eccessivo aggiungere una libreria solo per questo: il download della libreria aggiunge latenza e trasferimento dati e probabilmente ti fa risparmiare solo alcuni caratteri. jQuery è particolarmente pesante. Detto questo, se si sta già utilizzando una libreria per altre cose, è probabile che non ci sia molto o nessun danno nell'usarlo per gestire il collegamento di una funzione all'evento dom-ready. –

@David Mason Sono totalmente d'accordo. La maggior parte dei casi, ho trovato il tempo di caricamento della pagina Jquery DOPPIE .. –

Basta usare window.onload = doThis; invece di window.onload = doThis();

fonte

2010-06-04 12:13:03 dgk

per ulteriori informazioni, vedere: http://stackoverflow.com/questions/8830074/what- is-the-different-between-window-onload-init-and-window-onload-init – Cymbals

Dipende da dove si inserisce la funzione onload (tag testa o il corpo o, più in basso), con il legame evento interno seeemingly leggermente diverso a seconda del browser.

Vedi anche window.onload vs document.onload

fonte

2011-09-10 12:37:38

E 'importante capire che () è un operatore di , proprio come + o &&. () Accetta una funzione e la chiama.

Quindi in tal caso, doThis è un oggetto funzione e () è l'operatore che chiama la funzione. doThis() combinati per insieme chiamate doThis, lo esegue, e restituisce il valore di ritorno di doThis

Così window.onload = doThis() è fondamentalmente assegnare il valore di ritorno di doThis-window.onload

E così, per risolvere questo, è necessario fare riferimento alla funzione stessa, non chiamarla.

fare window.onload = doThis

fonte

2016-07-04 02:17:31 OverCoder

Questa dovrebbe essere la risposta. –

window.onload sembra attivarsi prima che il DOM sia caricato (JavaScript)

risposta

Problemi correlati