iframe: spie­ga­zio­ne del tag HTML

Volete integrare il vostro sito web con contenuti esterni? Potete ricorrere agli in­li­ne­fra­me (iframe), i quali con­sen­to­no di in­cor­po­ra­re im­pli­ci­ta­men­te contenuti ag­giun­ti­vi in un documento HTML. Nel migliore dei casi, infatti, i vi­si­ta­to­ri del sito web quasi non si accorgono di ricevere contenuti ag­giun­ti­vi. Ma come integra cor­ret­ta­men­te il tag iframe?

Ogni sito web è un documento HTML. Per inserirvi elementi ag­giun­ti­vi come documenti, immagini e video è ne­ces­sa­rio ricorrere a un frame. In passato si uti­liz­za­va­no i classici frame HTML, mentre oggi si usa il tag iframe. In un in­li­ne­fra­me gli elementi integrati appaiono come separati dal resto. Ciò si nota ad esempio quando, se le di­men­sio­ni del contenuto integrato lo per­met­to­no, l’in­li­ne­fra­me scorre se­pa­ra­ta­men­te.

Gli in­li­ne­fra­me si uti­liz­za­no so­prat­tut­to 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 ap­pli­ca­zio­ni spe­ci­fi­che che sono integrati come documenti HTLM in­di­pen­den­ti.

Gli in­li­ne­fra­me sono creati all’interno del codice HTML dal tag iframe.

Perché il frame sia eseguito cor­ret­ta­men­te, vanno spe­ci­fi­ca­ti i seguenti attributi:

• src: fonte del contenuto, spe­ci­fi­ca­to sotto forma di URL.
• width: larghezza del frame, spe­ci­fi­ca­ta in pixel o in per­cen­tua­le.
• height: altezza del frame, spe­ci­fi­ca­ta in pixel o in per­cen­tua­le.
• name: nome del frame specifico.
• sandbox: associa il frame ad alcune misure pre­cau­zio­na­li.
• srcdoc: contiene il codice HTML da vi­sua­liz­za­re nell’iframe.

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

• scrolling: il frame scorre se­pa­ra­ta­men­te.
• align: al­li­nea­men­to del frame.
• fra­me­bor­der: il frame deve avere un bordo visibile.
• longdesc: de­scri­zio­ne ap­pro­fon­di­ta del frame.
• mar­gi­n­width: larghezza del margine sinistro e destro.
• mar­gi­n­height: 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 at­tra­ver­so gli attributi. In linea di principio all’interno del tag non c’è contenuto. In pratica questo spazio è uti­liz­za­to per ospitare un testo al­ter­na­ti­vo. Se un browser non è in grado di vi­sua­liz­za­re un iframe, è ri­pro­dot­to questo contenuto. Di norma ciò non dovrebbe accadere, essendo tutti i comuni browser più recenti in grado di gestire questa tec­no­lo­gia.

Un iframe valido può pre­sen­tar­si nel seguente modo:

L’esempio riporta un frame di un documento HTML in un altro sito web. Anche i documenti HTML me­mo­riz­za­ti sul proprio web server possono essere integrati uti­liz­zan­do i tag iframe. In questo caso è suf­fi­cien­te indicare il nome del file ed even­tual­men­te il percorso solo se il documento non si trova nella stessa cartella.

Per rendere l’iframe este­ti­ca­men­te ac­cat­ti­van­te si ricorre all’utilizzo di CSS. Nella maggior parte dei casi, però, può essere pro­get­ta­to solo il frame stesso. Se il contenuto proviene da una fonte esterna, raramente può essere adattato per la vi­sua­liz­za­zio­ne sulla propria pagina. Con alcuni trucchi CSS un iframe può essere integrato con un design re­spon­si­vo.

Gli in­li­ne­fra­me sono utili per includere elementi di fonti esterne nella propria pagina. L’utente, invece di spostarsi su un altro dominio, può co­mo­da­men­te con­ti­nua­re a navigare sul sito web. Questo aumenta de­ci­sa­men­te la facilità d’uso. Inoltre, l’in­te­gra­zio­ne può avere anche un vantaggio tecnico. Il contenuto dell’iframe è caricato in­di­pen­den­te­men­te dal resto del sito web. L’utente vi­sua­liz­za i contenuti ag­giun­ti­vi, anche se non tutti gli altri elementi della pagina sono già stati caricati.

In realtà gli in­li­ne­fra­me stanno perdendo im­por­tan­za perché il metodo presenta alcuni svantaggi. Gli elementi integrati non sono gestiti cor­ret­ta­men­te dai motori di ricerca e questo può influire sull’ot­ti­miz­za­zio­ne dei risultati di ricerca e quindi sul po­si­zio­na­men­to del sito web. Molto più pre­oc­cu­pan­te è il rischio di sicurezza. L’in­te­gra­zio­ne 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 co­no­scen­za.

Re­cen­te­men­te gli iframe sono stati ri­pe­tu­ta­men­te discussi per motivi di pro­te­zio­ne dei dati perché sono spesso uti­liz­za­ti per i plug-in dei social media che talvolta accedono ai dati utente, anche se i vi­si­ta­to­ri del sito web non in­te­ra­gi­sco­no con il pulsante Mi piace o Condividi e non sono re­gi­stra­ti nella community di ri­fe­ri­men­to.