A kód

Ezért a bemutatóért két HTML fájlra lesz szükségünk: egy szülő fájlra, ahová az iframe-et helyezzük, és egy gyermek fájlra, amely az iframe tartalmát tartalmazza.

child.html

A gyermek fájlunk egy egyszerű dummy szöveggenerátort fog tartalmazni, ahol az emberek egy gombra kattintva egy újabb bekezdés lorem ipsum szöveget adhatnak hozzá.

Mivel ez a bemutató az iframe-ről szól, és nem a benne lévő funkciókról, nyugodtan másold ki és illeszd be a child.htmlba a következőket:

A fenti kódot kipróbálhatod ebben a CodePen-ben:

szülő.html

Az iframe-ünket most már beilleszthetjük a parent.html-be.

Adjuk hozzá a szokásos HTML5 boilerplate kódot, majd a body tagek közé illesszük be a következőt:

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

De itt találkozunk a problémánkkal. Mivel beállítottuk a overflow: hidden-t, a gombok és az első bekezdés fele eltűnik.

És ha nem állítottuk volna be a overflow: hidden-t, akkor két görgetősávot látnánk, mint a fenti képen. Hogy ezt megoldjuk, a child.html-ból post üzeneteket kell küldenünk a szülőablakba!

child.html

Az child.html-ba visszatérve tehát új eseményhallgatókat kell hozzáadnunk a script szakaszhoz.

El kell értesítenünk a szülő elemet az iframe magasságáról:

• minden betöltéskor,
• az ablak méretének megváltoztatásakor, és
• minden gomb megnyomásakor.

Minden ilyen esemény bekövetkezésekor elindítunk egy sendPostMessage nevű függvényt.

A következő kódot közvetlenül a záró <script> tag előtt helyezzük el:

Most hozzuk létre a sendPostMessage() függvényünket.

A container azonosítóval rendelkező elem magasságát akarjuk megmérni. Ha (és csak ha) a magasság változik, akkor egy frameHeight nevű üzenetet akarunk küldeni a szülőablaknak, amely értesíti a frissítésről.

A következő kódnak kell az imént leírtak fölé kerülnie:

A postMessage metódus második argumentuma a cél eredetét jelenti: a szülőablak hostnevét.

Ez a biztonság szempontjából hasznos, biztosítva, hogy az üzenet csak meghatározott tartományokba kerüljön, de fejlesztési célokra a target origin-t beállíthatjuk '*'-re. Ez azt jelenti, hogy bármelyik szülőablak megkapja az üzenetet.

Az child.html kódjának összességében így kell kinéznie:

parent.html

Töltsük be a parent.html-t a böngészőbe, és nyissuk meg a konzolt (Google Chrome-ban nyomjuk meg a CTRL+Shift+ J gombot).

Amikor átméretezzük az ablakot, most már látnunk kell a konzolon megjelenő értékeket. Az utolsó lépés az, hogy ezeket felhasználva állítsuk be az iframe magasságát, valahányszor valamelyik értéket elküldjük.

Figyelnünk kell az üzeneteseményekre, és amikor kapunk egyet, azt arra kell használnunk, hogy beállítsuk az iframe magassági tulajdonságát (plusz egy kis kitöltés):

Az parent.html fájlunknak így kell kinéznie:

Ha helyesen követtük a lépéseket, az iframe-ünk most már automatikusan átméreteződik, mintha a tartalma a szülőablak része lenne!

Ha jól követtük a lépéseket, az iframe-ünk most már automatikusan átméreteződik, mintha a tartalma a szülőablak része lenne!