So führen Sie eine Funktion aus, wenn die Seite in JavaScript geladen wird?

Um eine JavaScript -Funktion auszuführen, wenn eine Webseite vollständig geladen wurde, ist es eher einfach. Es gibt mehrere Möglichkeiten, diese Aufgabe zu erreichen, von denen einige Zeilen in die HTML -Element -Tags hinzufügen, und einige enthalten die Verwendung von DOM -Funktionen und Zustandsvariablen in unserem Skriptcode -Snippet.

In diesem Artikel werden die folgenden Methoden verwendet, um die jeweilige Aufgabe zu erreichen:

• Verwenden Sie das Onload -Ereignis in der Windows -Schnittstellenvariablen
• Einen Onload -Attribut in das Tag einfügen
• Definieren eines benutzerdefinierten Ereignishörers in der Fensterschnittstellenvariable
• Verwenden von Dokument.OnReadyStatechange -Attribut

Beginnen wir mit dem ersten.

Methode 1: Fenster -Onload -Ereignis

Das Ereignis onload () kann mit jedem Element einer HTML -Seite verwendet werden, und es führt die darin enthaltenen Aktionen aus, nachdem dieses Element vollständig geladen wurde. Eine Funktion erst nach dem Ganzen ausführen “Fenster”Wurde geladen, verwenden Sie das Fenster„ Fenster “.Onload -Eigenschaft in der Skriptdatei und festlegen und feststellen einer Funktion als

Fenster.onload = function ()
alarm ("Seite wurde geladen");
;

In der Funktion wird eine Warnung gesendet, in der besagt, dass "Seite geladen wurde". Führen Sie die HTML -Webseite aus und beobachten Sie die folgenden Ergebnisse:

Aus der Ausgabe geht hervor, dass die Funktion ausgeführt wurde, nachdem der Browser das „Fenster“ der Webseite vollständig geladen hatte.

Methode 2: Verwenden des Onload -Attributs mit dem Körper -Tag

Da das Body -Tag alle Daten enthält, die im Webbrowser angezeigt werden.

Erstellen Sie beispielsweise eine HTML -Webseite mit folgenden Zeilen:

Alt = ""
/>

So führen Sie eine Funktion aus, wenn die Seite in JavaScript geladen wird ?

Dies ist ein Beispiel für das Attribut "Körper Onload"

Der entscheidende Punkt hier ist, dass wir im Körper das Attribut verwendet haben Onload = "fullLoded ()". Dies führt dazu, dass die Webseite nach einer "sucht"voll aufgeladen()Die Funktion im Skript, nachdem alle Elemente in der Webseite geladen wurden.

Gehen Sie in die Skriptdatei und fügen Sie die folgenden Zeilen hinzu:

Funktion fullloaded ()
Warnung ("Die Webseite wurde vollständig geladen!");

Führen Sie die HTML aus, und die Ausgabe im Browser sieht so aus:

Der Benutzer wird nach dem Body -Tag aufgefordert, und alle Elemente im Body -Tag wurden voll beladen.

Methode 3: Hinzufügen eines Ereignishörers in der Schnittstellenvariable "Fenster"

Eine der ältesten Methoden, die noch effektiv sind. Fügen Sie in der JavaScript -Datei einfach einen Ereignishörer mit dem DOT -Operator mit unserem hinzu “Fenster”Schnittstellenvariable. Der Staat im Ereignishörer wird sein “BelastungDefinieren Sie bei dieser Zustandsänderung eine zu ausgeführte Funktion. All dies wird durch die Verwendung der folgenden Zeilen erreicht:

Fenster.AddEventListener ("laden", function ()
alarmiert ("es ist geladen!");
);

Laden Sie danach einfach die HTML -Webseite im Browser und beobachten Sie die folgende Ausgabe:

Der Benutzer wird aufgefordert, sobald das Fenster voll geladen ist. Beachten Sie jedoch, dass diese Warnung erscheint, wenn die “Fenster”Ist geladen. Dies bedeutet, dass der Benutzer den Alarm erhält, bevor alle Elemente vollständig geladen werden.

Methode 4: Verwenden des OnReadyStatEchange -Attributs des Dokuments,

DOM hat dieses eine Attribut namens "onreadyStatechange”, Was jedes Mal aufgelöst wird, wenn der Zustand des Dokuments geändert wird. Dies kann verwendet werden, um eine Funktion auszuführen. Das einzige Problem ist jedoch, dass diese Variable oder dieses Attribut verschiedene Zustände wie das Laden, Ausgleich, Verarbeitung und Vervollständigung enthalten kann. Dies liegt daran, dass dieses Attribut für XML- oder HTML -Anforderungen am meisten verwendet wird.

Eine Überprüfung muss nur dann eine Funktion ausführen, wenn das Dokument vollständig geladen ist. Verwenden Sie die folgenden Zeilen in der JavaScript -Datei:

dokumentieren.onReadyStatechange = function ()
if (Dokument.ReadyState == "Complete")
Alarm ("Yahoo!");

;

Im obigen Code -Snippet wurde ein Scheck platziert, um nach einem bestimmten Status „vollständig“ zu suchen, nur dann wird der Benutzer alarmiert. Starten Sie die HTML -Webseite und beobachten Sie die Ausgabe:

Der Benutzer wurde aufmerksam gemacht, nachdem der Ready -Status des Dokuments „vollständig“ war.

Einpacken

Es gibt einige Möglichkeiten, eine JavaScript -Funktion auszuführen, sobald die Webseite vollständig geladen wurde. Um dies zu demonstrieren, haben Sie in diesem Artikel in jeder Methode eine verwendet Alarm Funktion zur Anzeige einer Warnung, die zeigt, dass die Webseite die JavaScript -Funktion nach dem vollständigen Laden dieser Webseite ausgeführt hat.