“Iframe” significa “inline frame”: in qualsiasi momento in un documento che non utilizzi una struttura a frame è possibile creare un frame al volo grazie a questo tag.
Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame>: si tratta di una vera e propria finestra verso l’esterno all’interno di un documento ordinario.
iFrame: sintassi e funzionamento
Questo tag è correttamente supportato da tutti i browser moderni (Netscape 4 non lo supporta, ma questo browser oramai sta scomparendo). La sintassi è:
<iframe src="http://pro.html.it" width="300" height="300">
Contenuto alternativo per i browser che non leggono gli iframe.
</iframe>Come si può vedere tra l’apertura e la chiusura del tag è possibile specificare un contenuto alternativo per i browser che non siano in grado di leggere l’<iframe>: in realtà questi browser sono ciechi a questo tag (come abbiamo visto per il <noframes>) e dunque leggono direttamente il contenuto al suo interno. Sono invece i browser che supportano questa sintassi a ignorare volutamente quanto viene compreso tra apertura e chiusura del tag.
Anche in questo caso sarò opportuno utilizzare la possibilità di inserire un contenuto alternativo per migliorare il posizionamento nei motori di ricerca. Ad esempio:
<iframe src="http://pro.html.it" width="300" height="300">
<p>Su <a href="http://pro.html.it">PRO.HTML.it</a> -
Approfondimenti sul Web Publishing e articoli per webmaster</p>
</iframe>Attributi del tag iFrame
Ecco un elenco degli attributi per personalizzare l'iframe, incluse alcune novità introdotte con HTML5
| Attributo | Valori | Descrizione |
|---|---|---|
| src | URL | L'indirizzo che contiene il contenuto dell'iframe |
| width | in pixel | La larghezza dell'iframe |
| height | in pixel | L'altezza dell'iframe |
| name | stringa | Il nome dell'iframe |
| seamless | seamless |
Indica che l'iframe apparirà come parte del documento |
| scrdoc | codice HTML | Permette di inserire direttamente l'HTML del contenuto |
| sandbox | "" |
Abilita una serie di restrizioni aggiuntive ai contenuti del'iframe, utile soprattutto per questioni di sicurezza |
Quello che segue invece è un elenco degli attributi deprecati, o aboliti da HTML5:
| Attributo | Valori | Descrizione |
|---|---|---|
| align | left, right, top, middle, bottom |
Ignorato in HTML5 era già deprecato in HTML 4.0.1 e serviva per specificare l'allineamento dell'iframe |
| scrolling | yes, no, auto |
Indica se visualizzare o meno le barre di scorrimento nell'iframe |
| frameborder | 0,1 |
Ignorato in HTML5, serviva a mostrare o a nascondere il bordo dell'iframe |
| longdesc | URL | Ignorato in HTML5, specifica una pagina che contiene una descrizione approfondita dell'iframe |
| marginwidth e marginheight | pixel | Ignorati in HTML5, indicano rispettivamente il margine orizzontale e verticale dell'iframe |
Un esempio completo è disponibile a questa pagina.