iframe: spiegazione del tag HTML

Volete integrare il vostro sito web con contenuti esterni? Potete ricorrere agli inlineframe (iframe), i quali consentono di incorporare implicitamente contenuti aggiuntivi in un documento HTML. Nel migliore dei casi, infatti, i visitatori del sito web quasi non si accorgono di ricevere contenuti aggiuntivi. Ma come integra correttamente il tag iframe?

Ogni sito web è un documento HTML. Per inserirvi elementi aggiuntivi come documenti, immagini e video è necessario ricorrere a un frame. In passato si utilizzavano i classici frame HTML, mentre oggi si usa il tag iframe. In un inlineframe gli elementi integrati appaiono come separati dal resto. Ciò si nota ad esempio quando, se le dimensioni del contenuto integrato lo permettono, l’inlineframe scorre separatamente.

Gli inlineframe si utilizzano soprattutto per integrare oggetti di altri siti web nella propria pagina online. Pensate, ad esempio, ai video di YouTube o a Google Maps, come anche ai plug-in dei social media o altre applicazioni specifiche che sono integrati come documenti HTLM indipendenti.

Gli inlineframe sono creati all’interno del codice HTML dal tag iframe.

Perché il frame sia eseguito correttamente, vanno specificati i seguenti attributi:

• src: fonte del contenuto, specificato sotto forma di URL.
• width: larghezza del frame, specificata in pixel o in percentuale.
• height: altezza del frame, specificata in pixel o in percentuale.
• name: nome del frame specifico.
• sandbox: associa il frame ad alcune misure precauzionali.
• srcdoc: contiene il codice HTML da visualizzare nell’iframe.

Oltre a questi attributi, ce ne sono altri che però non sono più supportati da HTML5. Per tali funzioni si dovrebbe ricorrere a soluzioni CSS, come:

• scrolling: il frame scorre separatamente.
• align: allineamento del frame.
• frameborder: il frame deve avere un bordo visibile.
• longdesc: descrizione approfondita del frame.
• marginwidth: larghezza del margine sinistro e destro.
• marginheight: altezza del margine superiore e inferiore.
• vspace: spazio verticale intorno all’iframe.

Il contenuto effettivo dell’iframe e di una parte della struttura sono gestititi solo attraverso gli attributi. In linea di principio all’interno del tag non c’è contenuto. In pratica questo spazio è utilizzato per ospitare un testo alternativo. Se un browser non è in grado di visualizzare un iframe, è riprodotto questo contenuto. Di norma ciò non dovrebbe accadere, essendo tutti i comuni browser più recenti in grado di gestire questa tecnologia.

Un iframe valido può presentarsi nel seguente modo:

L’esempio riporta un frame di un documento HTML in un altro sito web. Anche i documenti HTML memorizzati sul proprio web server possono essere integrati utilizzando i tag iframe. In questo caso è sufficiente indicare il nome del file ed eventualmente il percorso solo se il documento non si trova nella stessa cartella.

Per rendere l’iframe esteticamente accattivante si ricorre all’utilizzo di CSS. Nella maggior parte dei casi, però, può essere progettato solo il frame stesso. Se il contenuto proviene da una fonte esterna, raramente può essere adattato per la visualizzazione sulla propria pagina. Con alcuni trucchi CSS un iframe può essere integrato con un design responsivo.

Gli inlineframe sono utili per includere elementi di fonti esterne nella propria pagina. L’utente, invece di spostarsi su un altro dominio, può comodamente continuare a navigare sul sito web. Questo aumenta decisamente la facilità d’uso. Inoltre, l’integrazione può avere anche un vantaggio tecnico. Il contenuto dell’iframe è caricato indipendentemente dal resto del sito web. L’utente visualizza i contenuti aggiuntivi, anche se non tutti gli altri elementi della pagina sono già stati caricati.

In realtà gli inlineframe stanno perdendo importanza perché il metodo presenta alcuni svantaggi. Gli elementi integrati non sono gestiti correttamente dai motori di ricerca e questo può influire sull’ottimizzazione dei risultati di ricerca e quindi sul posizionamento del sito web. Molto più preoccupante è il rischio di sicurezza. L’integrazione di contenuti esterni può avere un effetto negativo sul sistema dell’utente o sull’utente stesso. Il contenuto dell’iframe può, ad esempio, contenere un plug-in o phishing dannoso, senza che il gestore del sito web ne sia a conoscenza.

Recentemente gli iframe sono stati ripetutamente discussi per motivi di protezione dei dati perché sono spesso utilizzati per i plug-in dei social media che talvolta accedono ai dati utente, anche se i visitatori del sito web non interagiscono con il pulsante Mi piace o Condividi e non sono registrati nella community di riferimento.