Che cos'è un iframe?

Un <iframe> (inline frame) è un elemento HTML che incorpora un'altra pagina web o documento all'interno della pagina corrente. Crea un contesto di navigazione separato all'interno di un'area rettangolare della pagina, consentendo la visualizzazione di contenuti da un URL diverso — come una mappa, un video o un widget di terze parti — senza che l'utente abbandoni la pagina.

Gli iframe vengono comunemente utilizzati per incorporare video di YouTube, Google Maps, moduli di pagamento, widget di social media e banner pubblicitari. Poiché il contenuto incorporato viene eseguito nel suo proprio contesto, attributi come sandbox e allow consentono agli sviluppatori di controllare rigorosamente ciò che la pagina incorporata è autorizzata a fare.

Descrizione dello strumento

Questo strumento genera codice HTML <iframe> pronto per essere incollato da un modulo semplice. Configura l'URL di origine, le dimensioni, il comportamento dello scorrimento, la strategia di caricamento, le autorizzazioni e le restrizioni sandbox, e lo strumento genera istantaneamente il tag corrispondente. Non è necessaria la scrittura manuale degli attributi o la memorizzazione della sintassi dei flag sandbox.

Esempi

Iframe minimo:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe caricato in modo lazy con sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe con autorizzazioni per fotocamera e microfono:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Funzionalità

  • Genera codice <iframe> valido da un modulo visuale — non è richiesta alcuna conoscenza di HTML
  • Controllo completo sulle autorizzazioni (allow) e sulle restrizioni sandbox
  • L'anteprima in tempo reale si aggiorna mentre modifichi qualsiasi opzione

Opzioni spiegate

Opzione Descrizione
URL L'attributo src — l'indirizzo della pagina da incorporare
Larghezza / Altezza Dimensioni in pixel dell'iframe
Titolo Etichetta accessibile (attributo title) per i lettori di schermo
Nome L'attributo name, utilizzato come destinazione di un collegamento
Scorrimento Controlla la barra di scorrimento: automatico, sempre attivo o sempre disattivo
Caricamento eager carica immediatamente; lazy rimanda fino a quando non è vicino al viewport
Consenti schermo intero Aggiunge allowfullscreen in modo che il contenuto incorporato possa passare a schermo intero
Bordo Se deselezionato, aggiunge style="border: none;" per rimuovere il bordo predefinito
Consenti funzionalità Concede autorizzazioni specifiche dell'API del browser alla pagina incorporata
Flag sandbox Limita ciò che la pagina incorporata può fare; ogni flag riabilita una capacità specifica

Suggerimenti

  • Fornisci sempre un attributo title per l'accessibilità — i lettori di schermo lo annunciano quando l'iframe riceve il focus.
  • Utilizza loading="lazy" per gli iframe sotto la piega per migliorare le prestazioni di caricamento della pagina.
  • L'aggiunta dell'attributo sandbox senza flag blocca completamente il contenuto; aggiungi solo i flag di cui hai effettivamente bisogno.