Warum wird die iFrame-Ladeseite aktualisiert?

In der Webentwicklung ist iFrame ein sehr häufig verwendetes Tag. Es kann den Inhalt anderer Seiten einbetten und über JavaScript funktionieren. Viele Entwickler stoßen jedoch häufig auf ein Problem, wenn sie iFrame zum Laden von Seiten verwenden: Die Seite wird beim Laden aktualisiert. Für dieses Problem gibt es viele Lösungen. In diesem Artikel wird eine der gebräuchlichsten Lösungen vorgestellt.

Zunächst müssen wir verstehen, warum die iFrame-Ladeseite aktualisiert wird. Wenn wir iFrame zum Laden einer neuen Seite verwenden und die Seite JavaScript-Code enthält, werden diese Codes normalerweise beim Laden der Seite ausgeführt, und die Ausführung dieser Codes kann dazu führen, dass die Seite neu geladen wird. Dies liegt daran, dass diese Codes möglicherweise die DOM-Struktur der Seite ändern oder Anforderungen an den Server usw. senden. Diese Vorgänge können dazu führen, dass die Seite aktualisiert wird.

Um dieses Problem zu lösen, können wir zwei Methoden anwenden. Eine besteht darin, JavaScript in einem iFrame zu verwenden, und die andere darin, JavaScript in der eingebetteten Seite zu verwenden. Im Folgenden stellen wir die Implementierung dieser beiden Methoden vor.

1. Verwendung von JavaScript in iFrame

Um JavaScript in iFrame zu verwenden, müssen wir das Onload-Ereignis zum iFrame hinzufügen und die Seite ausführen, die im Onload-Ereignis geladen werden muss. Zum Beispiel der folgende Code:

<iframe src="loading.html" onload="loadPage()"></iframe>
<script>
function loadPage() {
  document.getElementById('iframe').contentWindow.location.reload(true);
}
</script>

Im obigen Code haben wir das Onload-Ereignis zum iFrame hinzugefügt und die Funktion „loadPage()“ im Ereignis ausgeführt. Diese Funktion ruft das Fensterobjekt im aktuellen iFrame über die contentWindow-Eigenschaft des iFrame ab und lädt dann die Seite über die Methode location.reload(). Da beim Aufruf der Methode location.reload() der Parameter true übergeben wird, bedeutet dies, dass die Seite aktualisiert werden muss, sodass die Seite nicht wiederholt geladen wird.

2. Verwendung von JavaScript in eingebetteten Seiten

Um JavaScript in eingebetteten Seiten zu verwenden, müssen wir das Fensterobjekt der übergeordneten Seite verwenden, um den iFrame zu bedienen. Zum Beispiel der folgende Code:

<script>
function loadPage() {
  var iframe = window.parent.document.getElementById('iframe');
  iframe.contentWindow.location.replace('loading.html');
}
</script>

Im obigen Code erhalten wir das Fensterobjekt der übergeordneten Seite über window.parent und das DOM-Objekt des iFrame in diesem Objekt. Dann verwenden wir die Methode location.replace(), um die neue Seite zu laden. Diese Methode ähnelt der Methode location.reload() darin, dass sie die Seite neu laden kann, aber keinen Eintrag im Browserverlauf hinterlässt.

Zusammenfassung:

Die oben genannten Methoden sind zwei Methoden, um das Problem der Seitenaktualisierung beim Laden von iFrames zu lösen. Sie können eine davon auswählen, um sie entsprechend Ihrer tatsächlichen Situation zu implementieren. Unabhängig von der verwendeten Methode liegt der Schlüssel im Schreiben des Codes, der die Eigenschaften von JavaScript sinnvoll nutzen muss, um wiederholtes Laden zu vermeiden.

Das obige ist der detaillierte Inhalt vonWarum wird die iFrame-Ladeseite aktualisiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!