Koden

För den här handledningen behöver vi två HTML-filer: en överordnad fil där vi placerar iframen och en underordnad fil som innehåller iframens innehåll.

child.html

Unsre underordnad fil kommer att innehålla en enkel dummy-textgenerator, där folk kan klicka på en knapp för att lägga till ytterligare ett stycke med lorem ipsum-text.

Då den här handledningen handlar om iframe och inte om funktionaliteten hos det som finns i den, får du gärna kopiera och klistra in följande i child.html:

Du kan prova koden ovan i den här CodePen:

parent.html

Vi kan nu infoga vår iframe i parent.html.

Insätt den vanliga HTML5-boilerplate-koden och infoga sedan följande mellan body-taggarna:

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

Men här stöter vi på vårt problem. Eftersom vi har ställt in overflow: hidden försvinner knapparna och halva första stycket.

Och om vi inte hade ställt in overflow: hidden skulle vi se två rullningsfält, som i bilden ovan. För att lösa detta måste vi skicka postmeddelanden från child.html till det överordnade fönstret!

child.html

Så, tillbaka i child.html, måste vi lägga till nya event-lyssnare till scriptsektionen.

Vi måste meddela det överordnade elementet om iframens höjd:

• varje gång den laddas,
• när fönstret ändras i storlek och
• när en knapp trycks in.

När var och en av dessa händelser inträffar utlöser vi en funktion som heter sendPostMessage.

Sätt in följande kod precis före den avslutande <script>-taggens <script>:

Nu ska vi skapa vår sendPostMessage()-funktion.

Vi vill mäta höjden på elementet med id container. Om (och endast om) höjden ändras vill vi skicka ett meddelande kallat frameHeight till det överordnade fönstret och meddela det om uppdateringen.

Följande kod bör gå ovanför det vi just skrev:

Det andra argumentet i postMessage-metoden representerar målursprunget: värdnamnet för det överordnade fönstret.

Detta är användbart för säkerheten, för att se till att meddelandet endast skickas till specifika domäner, men för utvecklingsändamål kan vi ställa in target origin till '*'. Detta innebär att alla överordnade fönster kommer att ta emot meddelandet.

Sammantaget bör koden för child.html se ut så här:

parent.html

Vi laddar parent.html i webbläsaren och öppnar konsolen (tryck på CTRL+Shift+ J i Google Chrome).

Varje gång vi ändrar storleken på fönstret bör vi nu se värden visas i konsolen. Det sista steget är att använda dessa för att ställa in iframehöjden varje gång ett av dessa värden skickas.

Vi måste lyssna på meddelandehändelser och när vi får en sådan bör vi använda den för att ställa in höjdegenskapen för iframe (plus lite utfyllnad):

Sammantaget bör din parent.html-fil se ut så här:

Om du följde stegen på rätt sätt kommer din iframe nu att ändra storlek automatiskt, som om innehållet var en del av det överordnade fönstret!