Koden

I denne vejledning skal vi bruge to HTML-filer: en overordnet fil, hvor vi placerer iframe’en, og en underordnet fil, der indeholder indholdet af iframe’en.

child.html

Vores underordnede fil vil indeholde en simpel dummy-tekstgenerator, hvor folk kan klikke på en knap for at tilføje et nyt afsnit med lorem ipsum-tekst.

Da denne vejledning handler om iframe’en og ikke om funktionaliteten af det, der er i den, er du velkommen til at kopiere og indsætte følgende i child.html:

Du kan afprøve ovenstående kode i denne CodePen:

parent.html

Vi kan nu indsætte vores iframe i parent.html.

Føj den sædvanlige HTML5-boilerplate-kode til, og indsæt derefter følgende mellem body-tags:

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

Men her støder vi på vores problem. Fordi vi har indstillet overflow: hidden, forsvinder knapperne og halvdelen af det første afsnit.

Og hvis vi ikke havde indstillet overflow: hidden, ville vi se to scroll-bars, som i billedet ovenfor. For at løse dette skal vi sende postmeddelelser fra child.html til det overordnede vindue!

child.html

Så tilbage i child.html skal vi tilføje nye event listeners til scriptsektionen.

Vi skal give besked til det overordnede element om iframe-elementets højde:

• hver gang det indlæses,
• når vinduet ændres i størrelse, og
• når der trykkes på en knap.

Når hver af disse hændelser indtræffer, udløser vi en funktion kaldet sendPostMessage.

Sæt følgende kode lige før det afsluttende <script>-tag:

Nu skal vi oprette vores sendPostMessage()-funktion.

Vi ønsker at måle højden på elementet med id container. Hvis (og kun hvis) højden ændrer sig, vil vi sende en besked kaldet frameHeight til det overordnede vindue, der informerer det om opdateringen.

Den følgende kode skal gå over det, vi lige har skrevet:

Det andet argument i postMessage-metoden repræsenterer måloprindelsen: værtsnavnet for det overordnede vindue.

Dette er nyttigt af hensyn til sikkerheden, idet det sikrer, at meddelelsen kun sendes til bestemte domæner, men til udviklingsformål kan vi indstille måloprindelsen til '*'. Det betyder, at ethvert overordnet vindue vil modtage meddelelsen.

Overordnet set bør koden for child.html se således ud:

parent.html

Lad os indlæse parent.html i browseren og åbne konsollen (tryk på CTRL+Shift+ J i Google Chrome).

Når vi ændrer størrelsen på vinduet, bør vi nu se værdier blive vist i konsollen. Det sidste skridt er at bruge disse til at indstille iframe-højden, når en af disse værdier sendes.

Vi skal lytte efter beskedbegivenheder, og når vi modtager en, skal vi bruge den til at indstille højdeegenskaben for iframe (plus lidt padding):

Samlet set skal din parent.html-fil se således ud:

Hvis du har fulgt trinene korrekt, vil din iframe nu ændre størrelsen automatisk, som om dens indhold var en del af det overordnede vindue!