window.onload vs <body onload = “” />

227

Was genau ist der Unterschied zwischen dem window.onloadEreignis und dem onloadEreignis des bodyTags? Wann verwende ich welche und wie soll es richtig gemacht werden?

javascript Manu
quelle

2

Sie sollten "verwenden, um den Attributwert zu umgeben

Sven Larson

218

window.onload = myOnloadFuncund <body onload="myOnloadFunc();">sind verschiedene Möglichkeiten, dasselbe Ereignis zu verwenden . Die Verwendung window.onloadist jedoch weniger aufdringlich - sie entfernt Ihr JavaScript aus dem HTML-Code.

Alle gängigen JavaScript-Bibliotheken, Prototype, ExtJS, Dojo, JQuery, YUI usw. bieten nützliche Wrapper für Ereignisse, die beim Laden des Dokuments auftreten. Sie können auf das Fenster onLoad-Ereignis warten und darauf reagieren, aber onLoad wird erst ausgelöst, wenn alle Ressourcen heruntergeladen wurden, sodass Ihr Ereignishandler erst ausgeführt wird, wenn das letzte große Bild abgerufen wurde. In einigen Fällen ist dies genau das, was Sie möchten. In anderen Fällen ist es möglicherweise angemessener, darauf zu achten, wann das DOM bereit ist. Dieses Ereignis ähnelt onLoad, wird jedoch ausgelöst, ohne auf das Herunterladen von Bildern usw. zu warten.

Richard Turner
quelle

57

Es ist jedoch zu beachten, dass es einen Unterschied gibt. Das Inline-Onload-Ereignis wird myOnloadFunc()im globalen Kontext aufgerufen ( thissiehe window). Wenn Sie es über Javascript einstellen, wird es im Kontext des Elements ausgeführt ( thisbezieht sich auf das Element, für das das Ereignis ausgelöst wurde). In diesem speziellen Fall macht es keinen Unterschied, aber bei anderen Elementen.

Mowwwalker

1

@ Walkerneo: Ja, definitiv erwähnenswert. Natürlich kann man mit einer JS-Bibliothek das Objekt überschreiben, thisauf das bei Bedarf verwiesen wird .

Richard Turner

@RichardTurner Sie müssen keine Bibliothek verwenden, um die Kontextbindung zu ändern. Ein einfacher .bind () Aufruf macht das

Kloar

@Kloar kannst du heutzutage ja, aber du brauchst MSIE9 +. Bei älteren MSIE, die bei meiner Antwort viel häufiger vorkamen, benötigen Sie eine Polyfüllung.

Richard Turner

33

Es gibt keinen Unterschied, aber Sie sollten auch nicht verwenden.

In vielen Browsern wird das window.onloadEreignis erst ausgelöst, wenn alle Bilder geladen wurden. Dies ist nicht das, was Sie möchten. Auf Standards basierende Browser haben ein Ereignis namens, DOMContentLoadeddas früher ausgelöst wird, aber vom IE nicht unterstützt wird (zum Zeitpunkt des Schreibens dieser Antwort). Ich würde empfehlen, eine Javascript-Bibliothek zu verwenden, die eine browserübergreifende DOMContentLoaded-Funktion unterstützt, oder eine gut geschriebene Funktion zu finden, die Sie verwenden können. jQuery's $(document).ready()ist ein gutes Beispiel.

jcampbell1
quelle

53

Frage aus der Zukunft ... Was ist, wenn es keine Frage gibt?

Sid

54

Frage aus der Gegenwart. Was ist, wenn jQuery für das vorliegende Projekt übertrieben ist? (

JQuery

14

Wenn Sie sagen "nicht vom IE unterstützt", ist das eine universelle Wahrheit oder nur für bestimmte Versionen des IE? Da sich in der Browserwelt seit dem Schreiben dieser Antwort viel geändert hat, ist es vielleicht an der Zeit, diese Antwort zu aktualisieren?

Bryan Oakley

8

DOMContentLoaded wird jetzt von IE9 und höher unterstützt: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Adam

6

DOMContentLoaded berichtet von der Zukunft und wird jetzt von allen gängigen

Jose Gómez

21

window.onloadkann ohne Körper arbeiten. Erstellen Sie eine Seite nur mit den Skript-Tags und öffnen Sie sie in einem Browser. Die Seite enthält keinen Text, funktioniert aber trotzdem.

<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp;
</script>

John Joseph
quelle

6

HTML ohne das Body-Tag ist ungültig, wenn Sie tatsächlich Inhalte hinzufügen (die sich in einem Body-Tag befinden sollten). Auch in Ihrem Skript-Tag fehlt ein Typ. Verlassen Sie sich niemals darauf, dass Browser Ihren nicht standardkonformen Code reparieren! (Da Browser dies in der Vergangenheit oder Zukunft möglicherweise anders oder gar nicht tun.)

Kissaki

4

@Kissaki: Standard-HTML benötigt überhaupt kein Body-Tag!

Robert Siemer

5

xhtml1 gibt <!ELEMENT html (head, body)>[1] an - und html401 gibt auch <!ELEMENT HTML O O (%html.content;)mit <!ENTITY % html.content "HEAD, BODY">[2] an. html51 gibt auch A head element followed by a body element.für HTML-Inhalte an. [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-Element - Also habe ich alle diese gemeinsamen / in-use HTML - Standards erraten tun einen Body - Tag erfordern. :)

Kissaki

1

@ Kissaki das ist XHTML, nicht HTML. HTML ermöglicht das Weglassen von Tag- und End-Body-Tags sowie das Weglassen von HTML- und Head-Tags gemäß der SGML-DTD. w3.org/TR/html401/struct/global.html#edef-BODY Start tag: optional, End tag: optional

OdraEncoded

1

@Kissaki: html5 benötigt den Skripttyp nicht mehr (wenn es sich um Javascript handelt), Sie sind für frühere Versionen richtig.

Mark

10

Im Allgemeinen bevorzuge ich es, das Ereignis> nicht zu verwenden <body onload="". Ich denke, es ist sauberer, das Verhalten so weit wie möglich vom Inhalt zu trennen.

Das heißt, es gibt Fälle (normalerweise ziemlich selten für mich), in denen die Verwendung von Körperlast einen leichten Geschwindigkeitsschub bewirken kann.

Ich verwende gerne Prototype, daher füge ich im Allgemeinen so etwas in das <head> meiner Seite ein:

document.observe("dom:loaded", function(){
  alert('The DOM is loaded!');
});

oder

Event.observe(window, 'load', function(){
  alert('Window onload');
});

Das Obige sind Tricks, die ich hier gelernt habe . Ich mag das Konzept des Anhängens von Ereignishandlern außerhalb des HTML-Codes sehr.

(Bearbeiten, um Rechtschreibfehler im Code zu korrigieren.)

Mark Biek
quelle

In welchen Fällen wäre es schneller und warum?

Kissaki

Diese Antwort scheint bei allen "Ich" sehr subjektiv zu sein ("Ich bevorzuge", "Ich denke"). Wenn weitere objektive und überprüfbare Fakten fehlen, wird dieser Eindruck ziemlich gut unterstützt.

Kissaki

1

Ich würde diese Antwort mit einem Körnchen Salz nehmen, wenn man bedenkt, dass sie vor über 6 Jahren veröffentlicht wurde. Sie können es gerne aktualisieren oder Ihre eigene verbesserte Antwort veröffentlichen.

Mark Biek

7

'so viele subjektive Antworten auf eine objektive Frage. "Unauffälliges" JavaScript ist Aberglaube wie die alte Regel, niemals Gotos zu verwenden. Schreiben Sie Code so, dass Sie Ihr Ziel zuverlässig erreichen können, nicht gemäß den trendigen religiösen Überzeugungen einer Person.

Wer findet:

 <body onload="body_onload();">

übermäßig abzulenken ist übermäßig anmaßend und hat keine klaren Prioritäten.

Normalerweise füge ich meinen JavaScript-Code in eine separate .js-Datei ein, aber ich finde es nicht umständlich, Ereignishandler in HTML einzubinden, was übrigens gültiges HTML ist.

quelle

39

Es gibt gute Gründe, unauffälliges Javascript zu schreiben. Angenommen, Sie haben eine Web-App mit 100 Seiten und haben die Methode <body onload = "body_onload ();"> verwendet, anstatt sie in die von jeder Seite enthaltene Javascript-Datei einzufügen. Stellen Sie sich dann vor, Sie müssten den Namen dieser Funktion aus irgendeinem Grund ändern. Das Einfügen des Ereignisses in die enthaltene Javascript-Datei 1) vereinfacht Änderungen erheblich und 2) spart Serverressourcen, da Javascript-Dateien für ein Jahr (auf einem ordnungsgemäß konfigurierten Server) zwischengespeichert werden können, anstatt immer wieder denselben Code herunterzuladen.

Andrew Ensley

21

Also, weil Sie nicht lernen, warum etwas empfohlen wird, bezeichnen Sie die Empfehlungen als "trendige religiöse Überzeugungen"?

Hallvors - Wiederherstellung Monica

6

Die Frage ist "Was ist der Unterschied zwischen diesen beiden Methoden?", Zusammen mit der Bitte um eine Empfehlung, für die es besser ist. Wie beantwortet Ihre Antwort diese Frage?

Richard Turner

1

Jede Situation, in der Sie an einem Ort eine modulare Lösung erstellen, die auf eine große Dateimasse angewendet werden kann, ist weitaus besser, als den Code zu jeder Dateimasse selbst hinzuzufügen. Es ist besser für die ursprüngliche Erstellungszeit, für organisatorische Codezwecke, für die Lesbarkeit und für die zukünftige Bearbeitung. Es ist nicht im Trend, es ist tatsächlich ein älteres Konzept, das in Sprachen wie Java und C ++ vorhanden ist und das Webprogrammierer jetzt als weitaus bessere Methode zum Codieren betrachten.

Jimbo Jonny

1

Eine gute Verteidigung gegen XSS-Angriffe in modernen Browsern besteht darin, alle Inline-Javascript mit Ihrer Content Security Policy zu deaktivieren. Das ist ein ziemlich guter Grund, das Onload-Attribut nicht in Ihrem HTML zu verwenden.

Greg Ball

4

window.onload- Wird aufgerufen, nachdem alle DOM-, JS-Dateien, Bilder, Iframes, Erweiterungen und andere vollständig geladen wurden. Dies entspricht $ (Fenster) .load (Funktion () {});

body onload=""- Wird aufgerufen, sobald DOM geladen ist. Dies ist gleich $ (document) .ready (function () {});

Yesu Raj
quelle

1

Kann jemand dies beschaffen? Ich habe diese Aussage in vielen Foren gesehen, aber nie mit einem Link zu der Stelle, an der sie in der Spezifikation definiert ist.

Crempp

1

@crempp Es gibt das body-Element und die globalen Attribute , daher würde ich sagen, dass dies nicht der Fall ist. Sie können dies jedoch selbst testen, siehe jsbin.com/OmiViPAJ/1/edit . Dort können Sie sehen, dass das Image-Onload-Ereignis vor dem Body-Onload-Ereignis ausgelöst wird.

Olaf Dietsche

2

Diese Antwort widerspricht anderen; Können Sie eine Quelle angeben?

Jimmy Breck-McKye

2

api.jquery.com/ready In den jQuery-Dokumenten heißt es: "Die Methode .ready () ist im Allgemeinen nicht mit dem Attribut <body onload =" "> kompatibel." Ich denke in jQuery ist näher an body.onload $ (Fenster) .load (..), aber ich denke, sie sind immer noch unterschiedlich.

ccsakuweb

2

Diese Antwort ist völlig falsch und sollte keine Stimmen haben. Tatsächlich wird diese Art der Antwort allgemein als eines der größten Missverständnisse über readyvs- onloadEreignisse bezeichnet. loadwird ausgelöst, nachdem das gesamte Dokument einschließlich aller Skripte, Bilder und Stylesheets geladen wurde. DOMContentLoadedwird ausgelöst, nachdem der DOM-Baum erstellt wurde, aber vor Bildern usw. Dies DOMContentLoadedentspricht document.readynicht dem load.

Rism

2

Es gibt keinen Unterschied ...

Sie können also hauptsächlich beide verwenden (einzeln! -)

Aber aus Gründen der Lesbarkeit und der Sauberkeit des HTML-Codes bevorzuge ich immer das window.onload! O]

Roenving
quelle

1

Wenn Sie versuchen, unauffälligen JS-Code zu schreiben (und das sollten Sie auch sein), sollten Sie ihn nicht verwenden <body onload="">.

Nach meinem Verständnis behandeln verschiedene Browser diese beiden etwas unterschiedlich, funktionieren jedoch ähnlich. Wenn Sie in den meisten Browsern beide definieren, wird einer ignoriert.

Dr. Bob
quelle

1

Stellen Sie sich Onload wie jedes andere Attribut vor. In ein Eingabefeld könnten Sie beispielsweise Folgendes einfügen:

<input id="test1" value="something"/>

Oder Sie könnten anrufen:

document.getElementById('test1').value = "somethingelse";

Das Attribut onload funktioniert auf die gleiche Weise, außer dass eine Funktion anstelle einer Zeichenfolge als Wert verwendet wird, wie dies das Attribut value tut. Dies erklärt auch, warum Sie "nur einen von ihnen verwenden können" - wenn Sie window.onload aufrufen, wird der Wert des onload-Attributs für das body-Tag neu zugewiesen.

Wie andere hier sagen, ist es normalerweise sauberer, Stil und Javascript vom Inhalt der Seite zu trennen, weshalb die meisten Leute empfehlen, window.onload zu verwenden oder die Ready-Funktion von jQuery zu mögen.

Soldarnal
quelle

1

<body onload = ""> sollte window.onload überschreiben.

Mit <body onload = ""> kann document.body.onload je nach Browser null, undefiniert oder eine Funktion sein (obwohl getAttribute ("onload") etwas konsistent sein sollte, um den Body der anonymen Funktion als Zeichenfolge abzurufen). . Wenn Sie mit window.onload eine Funktion zuweisen, ist window.onload eine Funktion, die über alle Browser hinweg konsistent ist. Wenn Ihnen das wichtig ist, verwenden Sie window.onload.

window.onload ist sowieso besser, um das JS von Ihrem Inhalt zu trennen. Es gibt sowieso nicht viel Grund, <body onload = ""> zu verwenden, wenn Sie window.onload verwenden können.

In Opera ist das Ereignisziel für window.onload und <body onload = ""> (und sogar window.addEventListener ("load", func, false)) das Fenster anstelle des Dokuments wie in Safari und Firefox. "Dies" ist jedoch das Fenster zwischen den Browsern.

Dies bedeutet, dass Sie, wenn es darauf ankommt, den Rohstoff einwickeln und die Dinge konsistent machen oder eine Bibliothek verwenden sollten, die dies für Sie erledigt.

Shadow2531
quelle

0

Sie arbeiten beide gleich. Beachten Sie jedoch, dass nur einer von beiden aufgerufen wird, wenn beide definiert sind. Ich vermeide es im Allgemeinen, einen von ihnen direkt zu verwenden. Stattdessen können Sie dem Ladeereignis einen Ereignishandler hinzufügen. Auf diese Weise können Sie andere JS-Pakete einfacher integrieren, die möglicherweise auch einen Rückruf an das Onload-Ereignis anhängen müssen.

Jedes JS-Framework verfügt über browserübergreifende Methoden für Ereignishandler.

KernelM
quelle

0

Es ist ein anerkannter Standard, Inhalt, Layout und Verhalten getrennt zu haben. Daher ist window.onload () besser geeignet, als <body onload="">wenn beide die gleiche Arbeit erledigen.

Rajeshwaran SP
quelle

0

Tut mir leid, dass ich diesen Thread nach weiteren 3 Jahren Schlaf wiedergeboren habe, aber vielleicht habe ich endlich den unbestreitbaren Vorteil von window.onload=fn1;over gefunden <body onload="fn1()">. Es handelt sich um die JS Module oder ES - Module : Wenn Ihr onloadHandler besteht in „klassischen“ JS - Datei (dh ohne bezeichnet <script type="module" … >, so oder so ist möglich, wenn der onloadHandler besteht in „Modul“ JS - Datei (dh mit bezeichnet <script type="module" … >, die <body onload="fn1()">fehl mit „fn1 () ist nicht definiert "Fehler. Der Grund ist vielleicht, dass die ES-Module nicht geladen werden, bevor HTML analysiert wird ... aber es ist nur meine Vermutung. Wie auch immer, window.onload=fn1;funktioniert perfekt mit Modulen ...

Petr Pivonka
quelle

window.onload vs <body onload = “” />

Antworten: