De code

Voor deze tutorial hebben we twee HTML-bestanden nodig: een parent-bestand waarin we het iframe plaatsen, en een child-bestand dat de inhoud van het iframe bevat.

child.html

Ons child-bestand zal een eenvoudige dummy tekstgenerator bevatten, waar mensen op een knop kunnen klikken om nog een paragraaf lorem ipsum tekst toe te voegen.

Omdat deze tutorial over het iframe gaat, en niet over de functionaliteit van wat er in staat, kunt u het volgende kopiëren en plakken in child.html:

U kunt de bovenstaande code uitproberen in deze CodePen:

parent.html

We kunnen nu ons iframe invoegen in parent.html.

Voeg de gebruikelijke HTML5 boilerplate code in, en voeg dan het volgende in tussen de body tags:

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

Maar hier stuiten we op ons probleem. Omdat we overflow: hidden hebben ingesteld, verdwijnen de knoppen en de helft van de eerste alinea.

En als we overflow: hidden niet hadden ingesteld, zouden we twee scrollbalken zien, zoals in de afbeelding hierboven. Om dit op te lossen, moeten we berichten van child.html naar het bovenliggende venster sturen.

child.html

Dus, terug in child.html, moeten we nieuwe event listeners toevoegen aan het script gedeelte.

We moeten het parent element op de hoogte brengen van de hoogte van het iframe:

• elke keer dat het wordt geladen,
• telkens als de grootte van het venster wordt gewijzigd, en
• telkens als er op een knop wordt gedrukt.

Wanneer elk van deze gebeurtenissen plaatsvindt, activeren we een functie met de naam sendPostMessage.

Plaats de volgende code net voor de afsluitende <script>-tag:

Nu gaan we onze sendPostMessage()-functie maken.

We willen de hoogte meten van het element met id container. Als (en alleen als) de hoogte verandert, willen we een bericht met de naam frameHeight naar het bovenliggende venster sturen om het op de hoogte te stellen van de update.

De volgende code moet komen boven wat we zojuist hebben geschreven:

Het tweede argument van de methode postMessage vertegenwoordigt de doeloorsprong: de hostnaam van het bovenliggende venster.

Dit is nuttig voor de beveiliging, om er zeker van te zijn dat het bericht alleen naar specifieke domeinen wordt verzonden, maar voor ontwikkelingsdoeleinden kunnen we de doelherkomst instellen op '*'. Dit betekent dat elk bovenliggend venster het bericht zal ontvangen.

Over het geheel genomen zou de code van child.html er als volgt uit moeten zien:

parent.html

Laden we parent.html in de browser en openen we de console (druk op CTRL+Shift+ J in Google Chrome).

Wanneer we de grootte van het venster wijzigen, zouden we nu waarden in de console moeten zien verschijnen. De laatste stap is om deze te gebruiken om de hoogte van het iframe in te stellen wanneer een van deze waarden wordt verzonden.

We moeten luisteren naar berichtgebeurtenissen en telkens als we er een ontvangen, moeten we die gebruiken om de hoogte-eigenschap van het iframe in te stellen (plus een beetje opvulling):

Over het geheel genomen zou uw parent.html-bestand er zo uit moeten zien:

Als u de stappen correct hebt gevolgd, wordt de grootte van uw iframe nu automatisch aangepast alsof de inhoud deel uitmaakt van het bovenliggende venster!