2016-04-18 21 views
4

Meine Frage ist ähnlich, aber ein bisschen anders als die hier gefragt, window.onload vs <body onload=""/>JavaScript window.onload gegen body.onload

In dieser Frage, es war ein Vergleich zwischen window.onload und dem Inline-js verwenden.

Meine Frage ist der Unterschied zwischen den folgenden. Angenommen, das Body-Tag hat die ID "bodyTag".

document.getElementById("bodyTag").onload = function() { 
    alert("hi"); 
} 

vs

window.onload = function() { 
    alert("hi"); 
} 

Genau, was sind die Unterschiede zwischen diesen beiden und wann sollte ich einen Vergleich zu den anderen verwenden? Dies ist nur für reines JavaScript. Bin ich richtig in der Annahme, dass der Unterschied ist, dass window.onload nicht gestartet wird, bis die gesamte Webseite geladen ist, alle Stile geladen wurden und der gesamte Javascript-Code geladen wurde? Während mit der ersten Version (document.getElementById ("bodyTag"). Onload =), es wartet auf die gesamte Webseite zu laden (und CSS-Stile, wenn es als eine externe CSS-Datei in head deklariert wurde), aber nicht für alle das Javascript Laden? Ist das der Unterschied?

+1

Das Verhalten kann zwischen verschiedenen Browsern variieren. body.onload wird ausgelöst, wenn das DOM bereit ist, was nicht notwendigerweise ist, nachdem alles andere geladen wurde. Sehen Sie hier für eine gute Antwort: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload –

+0

Vielen Dank! Wusste nicht einmal über die Existenz von Document.onload. So scheint es window.onload ist was ich am meisten will, oder? Was das "DOM ist fertig" angeht, ist das für mich immer noch unklar. Das heißt nur, wenn die eigentliche Webseite geladen ist, aber keine Skripte, oder? Und um es insgesamt zu bestätigen: Best Practice ist die Verwendung von window.onload im Umgang mit reinem JavaScript? – Joe

+0

Ich bin nicht wirklich sicher, ob die angenommene Antwort in diesem anderen Thread vollständig auf document.onload richtig ist. Die onload-Methode überwacht das load-Ereignis, das nur ausgelöst werden soll, wenn ** alle ** Ressourcen unter dem Knoten geladen wurden. Im Gegensatz dazu sollte das DomContentLoaded-Ereignis bereits ausgelöst werden, wenn das grundlegende DOM vorhanden ist. https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (es gibt einen kleinen Absatz, um zwischen diesen beiden zu unterscheiden) –

Antwort

2

Fenster (Objekt) wird manchmal als globaler Raum Container bezeichnet es enthält alle anderen Objekte (Standard und Ihre benutzerdefinierte), es enthält alles wie indexedDB, Sitzungsspeicher, Cookies, Ihre Variablen, Ihre Funktionen und alles innerhalb der Browserseite vollständig. Grundsätzlich, wie ich oben schrieb Fenster ist ein Objekt, es speichert alles entweder als eine Methode oder eine Eigenschaft. Lassen Sie mich erklären, was Eigentum ist und welche Methode ist,

(function my_obj(){ 
this.firstName="john"; 
var middleName = "XYZ" 
this.lastName="doe"; 
this.fullName = function(){ 
return this.firstName+" "+this.middleName+" "+this.lastName 
} 
document.write(this.fullName()) 
})(); 

In diesem Beispiel I Objekt mit Konstruktorfunktion erstellt, in diesem Beispiel firstName, middleName und lastName als Eigentum reffered sind und fullName() Methed genannt wird, (Sie können sage, dass Methode ein anderer Name für die Funktion innerhalb eines Objekts ist). so Fenster betrachten wie diese

window{ 
preset_obj:{}; 
indexedDB:{......}; 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
. 
//your code loads in the end 
var my_var= "JS rocks!" 
var anti_me= "Are You out of your Mind?? JS??Huh!" 
var dont_care= "I Love COBOL" 

} 

aber Körper ist mein Freund anders Fall (nicht Dokument und Körper sind zwei verschiedene Objekte ganz zu schweigen). Wenn Sie dem Körper eine ID geben und document.getElementByID('ID') verwenden. Es gibt ein Objekt zurück, das alle sichtbaren Elemente enthält, die auf der Seite angezeigt werden. aber es wird nicht alle anderen Fenster Sachen wie Cookies, Sitzungsspeicher enthalten. Gleiches ist der Fall mit Dokument. Document wählt ganzen HTML-Code aus, den Sie nicht mehr und nicht weniger schreiben. In anderen Worten, es ist ein Objekt, das alles enthält, was in <html></html> Tags eingeschlossen ist. hoffe, das löscht die Verwirrung

----------------------- UPDATE ------------------ --------------------------------- OK Entschuldigung hat Ihren Beitrag nicht korrekt gelesen. window.onload wird geladen, wenn die gesamte Seite Verarbeitung mit Kopfzeilen abgeschlossen ist (nicht zu verwechseln mit head Tag oder HTML5 header Tag). document.onload wird nur geladen, wenn Frontend arbeiten (HTML, CSS und JS laden wird) Zeitunterschied ist nicht viel, wenn Sie 100KB + Code in den Headern senden, würde ich sagen Stick mit window.onload, es sei denn, Ihre Header sind groß oder Sie wollen etwas Zeit für die Seitenanzeige zu tun

-1

window onload wird geladen, wenn das Fenster der Webseite geladen wird, wobei body onload nur geladen wird, wenn der Hauptteil der Webseite geladen ist.

Um es einfach zu machen, Erste Fenster wird geladen und dann Körper der Webseite geladen werden. Also Fenster.Laden wird zuerst geladen und dann wird Body Onload funktionieren.

Verwandte Themen