Ausführen des JavaScript-Codes nach dem Laden der Webseite
-
Fügen Sie das
script-Tag am Ende desbody-Tags in JavaScript hinzu -
Verwendung des
onload-Events in JavaScript -
Verwendung von das Ereignis
onloadauf dem Tagbodyin JavaScript -
Verwendung von das Ereignis
onloadfür das Objektwindowin einer JavaScript-Datei
Bevor wir JavaScript-Code ausführen, müssen wir immer sicherstellen, dass zuerst alle HTML-Elemente im Browser gerendert werden. Da wir uns in unserem JavaScript-Code auf diese HTML-Elemente beziehen, müssen diese Elemente vor der Webseite geladen werden.
Das Schreiben des script-Tags in das head-Tag ist keine gute Idee (dies macht nur Sinn, wenn Sie Skripte von Drittanbietern in Ihren Code laden), da das HTML-Dokument von oben nach unten ausgeführt wird und das head-Tag ist vor dem Tag body stehen. Es wird also zuerst ausgeführt und dann das Tag body.
Da alle Inhalte unserer Webseite im body-Tag vorhanden sind und das body-Tag nach dem head-Tag vorhanden ist, ist das Hinzufügen des JavaScript-Codes im head-Tag nicht erforderlich, da er nicht gefunden werden kann die HTML-Elemente. Beachten Sie, dass die Elemente bis zu diesem Zeitpunkt noch nicht erstellt wurden.
Es gibt verschiedene Möglichkeiten, das JavaScript zu laden, nachdem alle Inhalte der Webseite vollständig auf dem Bildschirm gerendert wurden. Im Folgenden sind einige bekannte Methoden aufgeführt, mit denen Sie den JavaScript-Code ausführen können, nachdem die Webseite vollständig geladen wurde.
Fügen Sie das script-Tag am Ende des body-Tags in JavaScript hinzu
Das Hinzufügen eines script-Tags am Ende des body-Tags ist eine gängige Methode zum Laden des JavaScript-Codes. Bis zu diesem Punkt werden alle Inhalte der Webseite korrekt auf dem Bildschirm wiedergegeben. So können wir diese HTML-Elemente in unserem JavaScript-Code leicht finden oder darauf verweisen, ohne dass dabei Fehler auftreten.
Das folgende Programm unten zeigt, wie es gemacht wird.
<body>
<script></script>
</body>
Verwendung des onload-Events in JavaScript
Eine andere Möglichkeit, das JavaScript nach dem Laden der Seite auszuführen, ist die Methode onload. Die Methode onload wartet, bis die Seite geladen wird. Sobald dies der Fall ist, führt dieser Prozess den JavaScript-Code aus.
Es gibt zwei Möglichkeiten, einen JavaScript-Code zu schreiben. Eine Möglichkeit besteht darin, den JavaScript-Code in das script-Tag unterhalb des body-Tags zu schreiben und dann die Funktion innerhalb der onload-Methode aufzurufen. Sie können auch eine separate Datei zum Schreiben des JavaScript-Codes erstellen, diese Datei in Ihrem HTML am Ende des body-Tags verlinken und dann diese Funktion innerhalb der onload-Methode aufrufen.
Verwendung von das Ereignis onload auf dem Tag body in JavaScript
Die Methode onload benötigt eine Variable target. In diesem Fall verwenden wir die Methode onload für das Tag body, damit es das target ist.
Innerhalb der Methode onload müssen wir nur eine Funktion übergeben. Diese Funktion wird nun erst ausgeführt, nachdem alle Inhalte der Webseite vollständig geladen wurden.
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
Ausgabe:
function called...
Im body-Tag haben wir nur ein h1-Tag und ein script-Tag. Im Tag script haben wir eine Funktion myFunction(), die eine Nachricht an das Konsolenfenster function called... ausgibt. Um diese Funktion nach dem Laden der Seite auszuführen, müssen wir sie nur innerhalb der Methode onload übergeben.
Verwendung von das Ereignis onload für das Objekt window in einer JavaScript-Datei
Eine andere Möglichkeit, die Methode onload zu verwenden, ist das Objekt window. Das Window-Objekt repräsentiert das gesamte Browserfenster. Nachdem die Elemente im Browserfenster vollständig ausgeführt sind, können wir unseren JavaScript-Code mit der Methode onload ausführen.
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
Hier haben wir den gleichen Code wie der vorherige. Der einzige Unterschied besteht darin, dass wir die Methode onload für das Objekt window verwenden, das jetzt das Ziel ist. Das Programm ruft schließlich die Funktion auf und die Meldung function called... wird im Konsolenfenster ausgegeben.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn