Introduzione
Gli iframe sono elementi HTML che permettono di incorporare una pagina web dentro un’altra pagina. In pratica, puoi mostrare un contenuto separato senza dover cambiare schermata o ricaricare l’intero sito. Questo li rende utili per molte situazioni reali: anteprime di documenti, dashboard interne, pagine di supporto, ambienti di test e contenuti modulari.
In questo tutorial ci concentriamo su un caso molto pratico e spesso sottovalutato: incorporare una pagina del proprio sito dentro un’altra pagina del proprio sito. È un approccio utile quando vuoi riutilizzare un contenuto già esistente, ad esempio una guida, una scheda prodotto, una pagina di configurazione o un pannello di amministrazione leggero.
Questo scenario è diverso dall’integrazione di servizi esterni: qui hai più controllo sul contenuto, ma devi comunque gestire correttamente dimensioni, sicurezza e compatibilità tra pagine. Vedremo quindi come creare un iframe ben strutturato, come passare parametri in modo semplice e quali errori evitare.
Codice completo
Nel seguente esempio, una pagina principale incorpora una pagina interna chiamata guida.html. L’iframe mostra una guida breve e un pulsante di navigazione indipendente.
<!-- Pagina principale: index.html -->
<h1>Area documentazione prodotto</h1>
<p>Qui sotto trovi una guida rapida incorporata dalla sezione interna del sito.</p>
<iframe
src="guida.html?tema=installazione"
title="Guida rapida all´installazione"
width="100%"
height="420"
loading="lazy"
referrerpolicy="no-referrer"
>
Il tuo browser non supporta gli iframe.
</iframe>
<p>
<a href="guida.html?tema=installazione">Apri la guida in una nuova pagina</a>
</p>
<!-- Pagina incorporata: guida.html -->
<h1>Guida rapida</h1>
<p>Tema selezionato: installazione</p>
<h2>Passaggi principali</h2>
<ul>
<li>Scarica i file necessari</li>
<li>Verifica i requisiti del server</li>
<li>Carica il progetto nella cartella corretta</li>
<li>Apri la pagina di configurazione</li>
</ul>
<p>
<strong>Suggerimento:</strong> usa lo stesso stile visivo della pagina principale
per rendere l´esperienza più coerente.
</p>Spiegazione
Vediamo nel dettaglio come funziona questo esempio.
1. L’attributo src
L’attributo src indica l’URL del contenuto da caricare nell’iframe. In questo caso punta a una pagina interna del sito: guida.html. Questo è un vantaggio importante, perché puoi controllare il contenuto e aggiornarlo senza modificare tutte le pagine che lo incorporano.
2. Il titolo accessibile
L’attributo title è fondamentale per l’accessibilità. Descrive il contenuto dell’iframe agli screen reader e aiuta anche a capire lo scopo del riquadro incorporato. Un iframe senza titolo è meno chiaro per utenti con tecnologie assistive.
3. Dimensioni dell’iframe
Gli attributi width e height definiscono lo spazio occupato dal frame. Nell’esempio usiamo width="100%" per adattarlo al contenitore e height="420" per evitare che il contenuto venga tagliato. In progetti reali, l’altezza va scelta in base al contenuto oppure gestita in modo dinamico con JavaScript, se necessario.
4. loading="lazy"
L’attributo loading="lazy" ritarda il caricamento dell’iframe finché non si avvicina alla viewport. È utile per migliorare le prestazioni, soprattutto quando la pagina contiene più elementi incorporati o contenuti pesanti.
5. referrerpolicy
L’attributo referrerpolicy controlla quante informazioni sulla pagina di origine vengono inviate al contenuto incorporato. Nell’esempio abbiamo usato no-referrer per limitare la condivisione di dati. Anche se il contenuto è interno al sito, è una buona abitudine ragionare sulla privacy e sulla trasmissione dei riferimenti.
6. Contenuto di fallback
Il testo inserito tra i tag di apertura e chiusura dell’iframe viene mostrato solo se il browser non supporta gli iframe. È una soluzione semplice ma utile per garantire compatibilità minima.
7. Passaggio di parametri
Nell’URL abbiamo aggiunto ?tema=installazione. Questo permette alla pagina incorporata di leggere un parametro e mostrare contenuti diversi in base al valore ricevuto. È un modo pratico per riutilizzare la stessa pagina in più contesti senza duplicare codice.
Per esempio, una sola pagina guida.html potrebbe mostrare:
- installazione
- configurazione
- risoluzione problemi
- aggiornamento
In questo modo l’iframe diventa un contenitore flessibile, non solo una finestra statica.
Best practice
Gli iframe sono utili, ma vanno usati con attenzione. Ecco alcune buone pratiche da seguire.
- Usa iframe solo quando serve davvero. Se puoi includere il contenuto direttamente nella pagina con componenti HTML standard, spesso è preferibile.
- Inserisci sempre un title descrittivo. È una regola importante per accessibilità e manutenzione.
- Evita dimensioni rigide non realistiche. Un iframe troppo basso può tagliare il contenuto, uno troppo alto può creare spazio vuoto inutile.
- Controlla il contenuto incorporato. Se la pagina interna cambia spesso, assicurati che il layout sia compatibile con il frame.
- Proteggi la navigazione interna. Se l’iframe contiene link, valuta se devono aprirsi nel frame o fuori da esso.
- Non abusare degli iframe annidati. Più livelli di incorporamento rendono il debug più complesso e possono peggiorare le prestazioni.
- Testa su dispositivi mobili. Gli iframe possono comportarsi male su schermi piccoli se il contenuto non è responsive.
Un punto spesso trascurato riguarda la coerenza visiva. Se incorpori una pagina del tuo sito dentro un’altra, l’utente si aspetta un’esperienza uniforme. Cerca quindi di mantenere tipografia, colori, spaziature e comportamento dei pulsanti simili tra pagina principale e contenuto incorporato.
Un altro aspetto importante è la manutenzione. Se il contenuto incorporato è riutilizzato in più punti del sito, conviene centralizzarlo in una sola pagina o in un solo componente. Così eviti duplicazioni e riduci il rischio di inconsistenze.
Riepilogo
Gli iframe permettono di incorporare una pagina dentro un’altra e sono molto utili anche all’interno dello stesso sito. In questo tutorial hai visto come usare un iframe per mostrare una pagina interna riutilizzabile, come passare parametri tramite URL e come migliorare accessibilità e prestazioni.
- src definisce la pagina da incorporare
- title rende l’iframe comprensibile e accessibile
- width e height controllano la dimensione del riquadro
- loading="lazy" aiuta le prestazioni
- i parametri nell’URL permettono di riutilizzare la stessa pagina in più contesti
Se usati bene, gli iframe possono semplificare l’organizzazione dei contenuti e migliorare la modularità del progetto. Se usati male, invece, possono creare problemi di leggibilità, accessibilità e manutenzione. La chiave è scegliere questo strumento solo quando il suo vantaggio è davvero concreto.
Approfondisci con risorse ufficiali
- MDN Web Docs - iframe: documentazione completa sull’elemento iframe e i suoi attributi.
- MDN Web Docs - HTML element reference: panoramica ufficiale sugli elementi HTML.
- WHATWG HTML Living Standard: specifica tecnica aggiornata del linguaggio HTML.
- MDN Web Docs - loading: approfondimento sull’attributo di caricamento lazy.
- MDN Web Docs - accessibility: linee guida per rendere i contenuti più accessibili.