Der Code

Für dieses Tutorial benötigen wir zwei HTML-Dateien: eine übergeordnete Datei, in die wir den iframe einfügen, und eine untergeordnete Datei, die den Inhalt des iframe enthält.

child.html

Unsere untergeordnete Datei wird einen einfachen Dummy-Textgenerator enthalten, bei dem die Besucher auf eine Schaltfläche klicken können, um einen weiteren Absatz mit lorem ipsum Text hinzuzufügen.

Da es in diesem Tutorial um den iframe geht, und nicht um die Funktionalität dessen, was darin enthalten ist, können Sie den folgenden Code kopieren und in child.html einfügen:

Sie können den obigen Code in diesem CodePen ausprobieren:

parent.html

Wir können nun unseren iframe in parent.html einfügen.

Fügen Sie den üblichen HTML5-Boilerplate-Code ein und fügen Sie dann das Folgende zwischen die Body-Tags ein:

<iframe src="child.html" style="width:100%;border:none;"></iframe>

Aber hier stoßen wir auf unser Problem. Da wir overflow: hidden gesetzt haben, verschwinden die Schaltflächen und die Hälfte des ersten Absatzes.

Und wenn wir overflow: hidden nicht gesetzt hätten, würden wir zwei Bildlaufleisten sehen, wie in der Abbildung oben. Um dies zu beheben, müssen wir Post-Nachrichten von child.html an das übergeordnete Fenster senden!

child.html

Zurück in child.html müssen wir also neue Ereignis-Listener zum Skriptabschnitt hinzufügen.

Wir müssen dem übergeordneten Element die Höhe des iframe mitteilen:

• jedes Mal, wenn es geladen wird,
• wenn die Größe des Fensters geändert wird, und
• wenn eine Schaltfläche gedrückt wird.

Wenn jedes dieser Ereignisse eintritt, werden wir eine Funktion namens sendPostMessage auslösen.

Fügen Sie den folgenden Code direkt vor dem schließenden <script>-Tag ein:

Jetzt erstellen wir unsere sendPostMessage()-Funktion.

Wir wollen die Höhe des Elements mit der ID container messen. Wenn (und nur wenn) sich die Höhe ändert, wollen wir eine Nachricht namens frameHeight an das übergeordnete Fenster senden, um es über die Aktualisierung zu informieren.

Der folgende Code sollte über dem stehen, was wir gerade geschrieben haben:

Das zweite Argument der postMessage-Methode stellt den Zielursprung dar: den Hostnamen des übergeordneten Fensters.

Dies ist nützlich für die Sicherheit, um sicherzustellen, dass die Nachricht nur an bestimmte Domains gesendet wird, aber für Entwicklungszwecke können wir den Zielursprung auf '*' setzen. Das bedeutet, dass jedes übergeordnete Fenster die Nachricht erhält.

Insgesamt sollte der Code von child.html wie folgt aussehen:

parent.html

Laden wir parent.html in den Browser und öffnen die Konsole (drücken Sie CTRL+Shift+ J in Google Chrome).

Wenn wir die Größe des Fensters ändern, sollten wir nun Werte in der Konsole sehen. Der letzte Schritt besteht darin, diese Werte zu verwenden, um die Höhe des iframe festzulegen, wenn einer dieser Werte gesendet wird.

Wir müssen auf Nachrichtenereignisse warten und jedes Mal, wenn wir eines erhalten, sollten wir es verwenden, um die Höheneigenschaft des iframe einzustellen (plus ein wenig Polsterung):

Insgesamt sollte Ihre parent.html-Datei so aussehen:

Wenn Sie die Schritte richtig befolgt haben, wird Ihr iframe jetzt automatisch die Größe ändern, als ob sein Inhalt Teil des übergeordneten Fensters wäre!