Il codice

Per questo tutorial, abbiamo bisogno di due file HTML: un file padre dove mettiamo l’iframe, e un file figlio che contiene il contenuto dell’iframe.

child.html

Il nostro file figlio conterrà un semplice generatore di testo fittizio, dove le persone possono cliccare un pulsante per aggiungere un altro paragrafo di testo lorem ipsum.

Poiché questo tutorial riguarda l’iframe, e non la funzionalità di ciò che c’è dentro, sentitevi liberi di copiare e incollare quanto segue in child.html:

Potete provare il codice sopra in questo CodePen:

parent.html

Possiamo ora inserire il nostro iframe in parent.html.

Aggiungi il solito codice boilerplate HTML5, e poi inserisci il seguente tra i tag body:

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

Ma qui incontriamo il nostro problema. Poiché abbiamo impostato overflow: hidden, i pulsanti e metà del primo paragrafo scompaiono.

E se non avessimo impostato overflow: hidden vedremmo due barre di scorrimento, come nell’immagine sopra. Per risolvere questo, abbiamo bisogno di inviare messaggi di post da child.html alla finestra genitore!

child.html

Quindi, tornando in child.html, dobbiamo aggiungere nuovi ascoltatori di eventi alla sezione script.

Abbiamo bisogno di notificare all’elemento padre l’altezza dell’iframe:

• ogni volta che viene caricato,
• ogni volta che la finestra viene ridimensionata, e
• ogni volta che viene premuto un pulsante.

Quando ognuno di questi eventi si verifica, attiveremo una funzione chiamata sendPostMessage.

Inseriamo il seguente codice appena prima del tag di chiusura <script>:

Ora creiamo la nostra funzione sendPostMessage().

Vogliamo misurare l’altezza dell’elemento con id container. Se (e solo se) l’altezza cambia, vogliamo inviare un messaggio chiamato frameHeight alla finestra padre, notificandole l’aggiornamento.

Il seguente codice dovrebbe andare sopra quello che abbiamo appena scritto:

Il secondo argomento del metodo postMessage rappresenta l’origine di destinazione: l’hostname della finestra padre.

Questo è utile per la sicurezza, assicurandosi che il messaggio sia inviato solo a domini specifici, ma per scopi di sviluppo, possiamo impostare l’origine di destinazione a '*'. Questo significa che qualsiasi finestra padre riceverà il messaggio.

In generale, il codice di child.html dovrebbe assomigliare a questo:

parent.html

Carichiamo parent.html nel browser e apriamo la console (premiamo CTRL+Shift+ J in Google Chrome).

Ogni volta che ridimensioniamo la finestra, dovremmo ora vedere i valori apparire nella console. Il passo finale è quello di usarli per impostare l’altezza dell’iframe ogni volta che uno di questi valori viene inviato.

Abbiamo bisogno di ascoltare gli eventi dei messaggi e ogni volta che ne riceviamo uno dovremmo usarlo per impostare la proprietà dell’altezza dell’iframe (più un po’ di padding):

In totale, il vostro file parent.html dovrebbe assomigliare a questo:

Se avete seguito correttamente i passi, il vostro iframe ora si ridimensionerà automaticamente come se il suo contenuto fosse parte della finestra madre!