window.onload()Die Methode wird verwendet, um sofort nach dem Laden der Webseite eine Operation auszuführen; das heißt, sobald das HTML-Dokument fertig geladen ist, wird sofort eine Methode ausgeführt.

window.onload()Wird normalerweise auf dem <body>-Element verwendet, um Skriptcode auszuführen, nachdem die Seite vollständig geladen wurde (einschließlich Bilder, CSS-Dateien usw.).

Syntax, wenn nur eine Funktion ausgeführt werden soll:

window.onload = funcRef;

Die Methode funcRef wird aufgerufen, nachdem die Seite fertig geladen wurde.

Syntax, wenn mehrere Funktionen ausgeführt werden sollen:

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

Nachdem die Seite fertig geladen wurde, werden Func1, Func2 und Func3 in der Reihenfolge ausgeführt.

Warum window.onload() verwenden?

Weil JavaScript-Funktionsmethoden erst verwendet werden können, nachdem das HTML-Dokument fertig gerendert wurde. Wenn das Rendern nicht abgeschlossen ist, ist der DOM-Baum zu diesem Zeitpunkt unvollständig, sodass der Aufruf von JavaScript-Code zu einem "undefined"-Fehler führen kann.

Beispiel

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Testen ohne Verwendung von window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> document.getElementById("bg").style.backgroundColor="#F00"; </script> </head> <body> <div id="bg"></div> </body> </html>

Selbst ausprobieren »

Im obigen Beispiel ist der Effekt, den wir erzielen wollen, die Hintergrundfarbe des div auf #F90 zu setzen, aber dieser Effekt wurde nicht erreicht, weil der Code sequenziell ausgeführt wird. Wenn die Ausführungdocument.getElementById("#bg").style.backgroundColor="#F00" erreichtdas div-Objekt wurde noch nicht geladen, daher wurde die Hintergrundfarbe nicht erfolgreich gesetzt. Die Fehlermeldung lautet wie folgt:

Wir können window.onload hinzufügen, und es wird normal ausgeführt. Der geänderte Code lautet wie folgt:

Beispiel

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Test mit window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F00"; } </script> </head> <body> <div id="bg"></div> </body> </html>

Selbst ausprobieren »

Das window.onload-Ereignis bindet eine Event-Handler-Funktion. Es bindet eine anonyme Funktion, und natürlich können Sie auch eine benannte Funktion binden. Das Codebeispiel lautet wie folgt:

Beispiel

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Verwendung von window.onload() zum Binden einer bestimmten Funktion</title> <script type="text/javascript">// Function Nameis example window.onload=function example(){ document.write(“Rookie Tutorial -- Learning is not only about technology, but also about dreams!!!"); }</script> </head> <body> </body> </html>

Selbst ausprobieren »

Beispiel mit mehreren auszuführenden Funktionen:

Beispiel

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Verwendung von window.onload() zum Ausführen mehrerer Funktionen</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ function example1(){ document.getElementById("bg").style.backgroundColor="#F00"; } function example2(){ document.getElementById("bg").style.width="200px"; document.getElementById("bg").style.height="200px"; } example1(); example2(); } </script> </head> <body> <div id="bg"></div> </body> </html>

Selbst ausprobieren »

Der Unterschied zwischen window.onload und jQuery ready()

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

Beide oben genannten Methoden führen DOM-Operationen aus, nachdem das HTML-Dokument vollständig geladen wurde, aber sie weisen dennoch gewisse Unterschiede auf, wie in der folgenden Abbildung dargestellt: