Codul

Pentru acest tutorial, vom avea nevoie de două fișiere HTML: un fișier părinte în care punem iframe-ul și un fișier copil care conține conținutul iframe-ului.

child.html

Filierul nostru copil va conține un simplu generator de text fictiv, unde oamenii pot face clic pe un buton pentru a adăuga un alt paragraf de text lorem ipsum.

Cum acest tutorial se referă la iframe, și nu la funcționalitatea a ceea ce se află în el, nu ezitați să copiați și să lipiți următoarele în child.html:

Puteți încerca codul de mai sus în acest CodePen:

parent.html

Acum putem insera iframe-ul nostru în parent.html.

Adaugați codul obișnuit HTML5 boilerplate și apoi inserați următoarele între tag-urile body:

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

Dar aici întâlnim problema noastră. Pentru că am setat overflow: hidden, butoanele și jumătate din primul paragraf dispar.

Și dacă nu am fi setat overflow: hidden am fi văzut două bare de defilare, ca în imaginea de mai sus. Pentru a rezolva acest lucru, trebuie să trimitem mesajele de postare din child.html către fereastra părinte!

child.html

Atunci, înapoi în child.html, trebuie să adăugăm noi ascultători de evenimente la secțiunea script.

Trebuie să notificăm elementul părinte de înălțimea iframe-ului:

• de fiecare dată când se încarcă,
• de fiecare dată când fereastra este redimensionată și
• de fiecare dată când este apăsat un buton.

Când apare fiecare dintre aceste evenimente, vom declanșa o funcție numită sendPostMessage.

Puneți următorul cod chiar înainte de tag-ul de închidere <script>:

Acum să creăm funcția noastră sendPostMessage().

Vrem să măsurăm înălțimea elementului cu id-ul container. Dacă (și numai dacă) înălțimea se modifică, dorim să trimitem un mesaj numit frameHeight către fereastra părinte, notificându-i actualizarea.

Codul următor ar trebui să meargă deasupra a ceea ce tocmai am scris:

Cel de-al doilea argument al metodei postMessage reprezintă originea țintă: numele de gazdă al ferestrei părinte.

Acest lucru este util pentru securitate, asigurându-ne că mesajul este trimis doar către domenii specifice, dar în scopuri de dezvoltare, putem seta originea țintă la '*'. Acest lucru înseamnă că orice fereastră părinte va primi mesajul.

În general, codul lui child.html ar trebui să arate astfel:

parent.html

Să încărcăm parent.html în browser și să deschidem consola (apăsați CTRL+Shift+ J în Google Chrome).

De fiecare dată când redimensionăm fereastra, ar trebui să vedem acum valorile care apar în consolă. Pasul final este să le folosim pentru a seta înălțimea iframe-ului ori de câte ori este trimisă una dintre aceste valori.

Trebuie să ascultăm evenimentele mesajelor și ori de câte ori primim unul ar trebui să-l folosim pentru a seta proprietatea de înălțime a iframe-ului (plus puțină umplutură):

În total, fișierul dvs. parent.html ar trebui să arate așa:

Dacă ați urmat pașii corect, iframe-ul dvs. se va redimensiona acum automat ca și cum conținutul său ar face parte din fereastra părinte!