Le comunicazioni fra iFrame e finestre con contenuti su domini diversi sono sempre stato un grosso problema per la programmazione web.

O meglio, le legittime esigenze di sicurezza e la Same origin policy hanno reso questa funzionalità sostanzialmente impossibile e così se apriamo un iframe di un sito dentro una pagina che risiede su un dominio diverso riusciamo di solito a farle parlare dopo preghiere e pianti in greco copto e sacrifici umani.

Ma ora non più! :)

Grazie ad una comodissima e poco conosciuta API di HTML5 è possibile inviare messaggi fra documenti aperti in finestre e iframe con un dominio diverso da quello di origine.

Questa piccola meraviglia delle tecnica è la window.postMessage API e in questo tutorial vedremo quanto è facile usarla (e quanto è utile!)

Ma prima di tutto, eccovi il demo: cliccate sul bottone qui sotto per accedere alla pagina dove viene mostrato questo meccanismo all’opera, senza trucchi e senza inganni…

Apri il demo

 Il mittente

Il sistema è davvero molto molto semplice: partiamo prima di tutto dal “mittente”, ovvero dalla pagina che invia i messaggi all’altro documento contenuto in un iFrame o in una nuova finestra (e su un altro dominio).

Questo è il codice per inviare il “messaggio” al contenuto di un iFrame:

Il destinatario

Dal canto suo, la pagina di destinazione (cioè quella contenuta nell’iFrame, in questo caso) dovrà stare ad “ascoltare” per l’evento “message” e poi interpretare il messaggio ricevuto:

Casi d’uso e supporto

Non so a voi ma a noi questa API piace un casino. Finalmente possiamo far dialogare pezzi del nostro sito e iFrame come Dio comanda, senza doversi inventare ogni volta dei sistemi complicatissimi e difficili da mantenere.

L’utilizzo di queste funzionalità può essere davvero notevole, dal semplice passaggio di contenuti testuali da un iFrame all’altro fino all’invio di veri e propri “comandi”: nel demo che abbiamo preparato, ad esempio, il bottone “Svuota la lista” invia un comando che viene interpretato dall’iFrame di destinazione, chiamando di fatto una funzione da “remoto”.

Il supporto è piuttosto buono: come vedete qui sotto, praticamente tutti i browser riconoscono e onorano questa API e quindi… diamoci dentro! :)

caniuse_postmessage

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis