Risposte:
window.onload = myOnloadFunce <body onload="myOnloadFunc();">sono modi diversi di utilizzare lo stesso evento . L'uso window.onloadè meno invadente, ma toglie JavaScript dall'HTML.
Tutte le librerie JavaScript, Prototype, ExtJS, Dojo, JQuery, YUI, ecc. Comuni forniscono wrapper per eventi che si verificano durante il caricamento del documento. Puoi ascoltare l'evento onLoad della finestra e reagire a quello, ma onLoad non viene attivato fino a quando non sono state scaricate tutte le risorse, quindi il gestore dell'evento non verrà eseguito fino a quando non sarà stata recuperata l'ultima immagine enorme. In alcuni casi è esattamente quello che vuoi, in altri potresti scoprire che ascoltare quando il DOM è pronto è più appropriato: questo evento è simile a onLoad ma si attiva senza attendere il download di immagini, ecc.
myOnloadFunc()nel contesto globale (this farà riferimento a window). L'impostazione tramite javascript lo farà eseguire nel contesto dell'elemento (si thisriferisce all'elemento su cui è stato attivato l'evento). In questo caso particolare, non farà differenza, ma lo farà con altri elementi.
thisfa riferimento se lo si desidera.
Non c'è differenza, ma non dovresti usare neanche.
In molti browser, l' window.onloadevento non viene attivato fino a quando non sono state caricate tutte le immagini, il che non è quello desiderato. I browser basati su standard hanno un evento chiamato DOMContentLoadedche si attiva in precedenza, ma non è supportato da IE (al momento della stesura di questa risposta). Consiglierei di utilizzare una libreria javascript che supporti una funzione DOMContentLoaded per browser diversi o di trovare una funzione ben scritta che puoi usare. jQuery's $(document).ready(), è un buon esempio.
window.onloadpuò funzionare senza corpo. Crea una pagina con solo i tag di script e aprila in un browser. La pagina non contiene alcun corpo, ma funziona ancora ..
<script>
function testSp()
{
alert("hit");
}
window.onload=testSp;
</script><!ELEMENT html (head, body)>[1] - e html401 specifica anche <!ELEMENT HTML O O (%html.content;)con <!ENTITY % html.content "HEAD, BODY">[2]. html51 indica anche il A head element followed by a body element.contenuto html. [3] w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict w3.org/TR/html51/semantics.html#the -html elemento - Quindi credo che tutte quelle standard HTML comuni / in uso fare richiedono un tag body. :)
Start tag: optional, End tag: optional
Preferisco, in generale, non usare l' <body onload=""evento>. Penso che sia più pulito mantenere il comportamento separato dai contenuti il più possibile.
Detto questo, ci sono occasioni (di solito abbastanza rare per me) in cui l'uso del carico corporeo può dare un leggero aumento di velocità.
Mi piace usare Prototype, quindi generalmente inserisco qualcosa di simile nel <head> della mia pagina:
document.observe("dom:loaded", function(){
alert('The DOM is loaded!');
});o
Event.observe(window, 'load', function(){
alert('Window onload');
});Quanto sopra sono trucchi che ho imparato qui . Sono molto affezionato al concetto di allegare gestori di eventi al di fuori dell'HTML.
(Modifica per correggere l'errore di ortografia nel codice.)
'così tante risposte soggettive a una domanda obiettiva. JavaScript "discreto" è superstizione come la vecchia regola di non usare mai goto. Scrivi il codice in un modo che ti aiuti a raggiungere il tuo obiettivo in modo affidabile, non secondo le credenze religiose alla moda di qualcuno.
Chiunque trovi:
<body onload="body_onload();">distrarre troppo è troppo pretenzioso e non ha le priorità diritte.
Normalmente inserisco il mio codice JavaScript in un file .js separato, ma non trovo nulla di ingombrante nell'agganciare i gestori di eventi in HTML, che è comunque valido HTML.
window.onload- Chiamato dopo tutti i file DOM, JS, immagini, Iframe, estensioni e altri completamente caricati. Questo è uguale a $ (finestra) .load (funzione () {});
body onload=""- Chiamato una volta caricato DOM. Questo è uguale a $ (documento) .ready (funzione () {});
readyvs. viene generato dopo il caricamento dell'intero documento, inclusi tutti gli script, le immagini e i fogli di stile. viene generato dopo che l'albero DOM è stato creato ma prima delle immagini ecc. È equivalente a quello no . onloadloadDOMContentLoadedDOMContentLoadeddocument.readyload
Se stai cercando di scrivere codice JS discreto (e dovresti esserlo), non dovresti usare <body onload="">.
Comprendo che browser diversi gestiscono questi due in modo leggermente diverso ma funzionano in modo simile. Nella maggior parte dei browser, se si definiscono entrambi, uno verrà ignorato.
Pensa a onload come qualsiasi altro attributo. In una casella di input, ad esempio, è possibile inserire:
<input id="test1" value="something"/>Oppure puoi chiamare:
document.getElementById('test1').value = "somethingelse";L'attributo onload funziona allo stesso modo, tranne per il fatto che accetta una funzione come valore anziché una stringa come fa l'attributo value. Questo spiega anche perché puoi "usarne solo uno" - chiamando window.onload riassegna il valore dell'attributo onload per il tag body.
Inoltre, come altri stanno dicendo, di solito è più pulito mantenere lo stile e il javascript separati dal contenuto della pagina, motivo per cui la maggior parte delle persone consiglia di utilizzare window.onload o come la funzione ready di jQuery.
<body onload = ""> dovrebbe sovrascrivere window.onload.
Con <body onload = "">, document.body.onload potrebbe essere nullo, indefinito o una funzione a seconda del browser (sebbene getAttribute ("onload") dovrebbe essere in qualche modo coerente per ottenere il corpo della funzione anonima come stringa) . Con window.onload, quando si assegna una funzione ad essa, window.onload sarà una funzione coerente tra i browser. Se questo è importante per te, usa window.onload.
window.onload è meglio per separare JS dal tuo contenuto comunque. Non ci sono molti motivi per usare <body onload = ""> quando puoi usare window.onload.
In Opera, la destinazione dell'evento per window.onload e <body onload = ""> (e anche window.addEventListener ("load", func, false)) sarà la finestra anziché il documento come in Safari e Firefox. Ma "questo" sarà la finestra tra i browser.
Ciò significa che, quando è importante, dovresti avvolgere il greggio e rendere le cose coerenti o utilizzare una libreria che lo fa per te.
Entrambi funzionano allo stesso modo. Tuttavia, si noti che se entrambi sono definiti, solo uno di essi verrà richiamato. In genere evito di utilizzarli direttamente. Al contrario, è possibile collegare un gestore eventi all'evento load. In questo modo è possibile incorporare più facilmente altri pacchetti JS che potrebbero anche aver bisogno di allegare un callback all'evento onload.
Qualsiasi framework JS avrà metodi cross-browser per i gestori di eventi.
È uno standard accettato che abbia contenuto, layout e comportamento separati. Quindi window.onload () sarà più adatto da usare che <body onload="">sebbene entrambi facciano lo stesso lavoro.
Ci scusiamo per la reincarnazione di questa discussione di nuovo dopo altri 3 anni di sonno, ma forse ho finalmente trovato l'indiscutibile vantaggio di window.onload=fn1;over <body onload="fn1()">. Riguarda i moduli JS o ES : quando il onloadgestore risiede nel file JS "classico" (ovvero riferito senza <script type="module" … >, è possibile in entrambi i modi; quando il onloadgestore risiede nel file JS "modulo" (cioè riferito con <script type="module" … >, il <body onload="fn1()">fallimento con "fn1 () non è definito "errore. Il motivo forse è che i moduli ES non vengono caricati prima dell'analisi HTML ... ma è solo una mia ipotesi. Comunque, window.onload=fn1;funziona perfettamente con i moduli ...