Iframe Introdotto e supportato inizialmente soltanto dai browser IE è poi stato riconosciuto anche dagli altri browser.

Si adopera per creare una cornice (frame) all'interno di una pagina web, (internal frame) in questa cornice è possibile visualizzare una qualsiasi altra pagina web. Così facendo si ottengono pagine o porzioni di pagine web all'interno di altre pagine web.

Non è necessario avere una struttura a frames per farne uso, questo elemento è indipendente dai frames ed è sufficiente richiamarlo in qualsiasi punto di una qualsiasi pagina web.

<IFRAME>...</IFRAME>

L'elemento <IFRAME> possiede al suo interno diversi attributi, quello fondamentale è src che serve per specificare il nome della pagina web da richiamare. Necessita del relativo elemento di chiusura </iframe> e tutto il codice html che sarà inserito dopo la chiusura di iframe> e prima del tag </iframe sarà eseguito da quei browser che non supportano iframe stesso. Come per frame mi rifiuto di pensare che vi siano ancora browser che non supportano questo elemento.

SRC="url nome pagina"

L'attributo src è fondamentale in quanto specifica il nome della pagina da visualizzare all'interno di iframe.

L'esempio sopra con src è privo di qualsiasi altro attributo e genera una finestra con le stesse dimensioni e caratteristiche di quella che vedete in questo esempio. Vengono assegnate per default le due barre di scorrimento orizzontale e verticale nel caso in cui la pagina da visualizzare fosse di dimensioni superiori a quella generata da iframe. Anche i bordi sono in evidenza: interni ed esterni, per dare un senso di tridimensionalità.

Conviene specificare sempre le dimensioni per larghezza ed altezza facendo uso degli appositi attributi.

WIDTH="valore"   HEIGHT="valore"

Gli attributi width e height servono rispettivamente per impostare le dimensioni in larghezza ed in altezza per la finestra interna generata da iframe.

Da notare che le dimensioni possono essere espresse sia in pixel "170" (fissa), che in percentuale "95%" (variabile), oppure in entrambi i modi. Se anche una sola delle misure adoperate viene espressa in percentuale(%) verranno generate in modo automatico le relative barre di scorrimento orizzontale e/o verticale nel caso in cui le dimensioni della finestra del browser fossero più piccole di quelle della finestra di iframe. Provate adesso a ridimensionare questa vostra finestra del browser; noterete come anche iframe si ridimensioni ed una volta raggiunte le dimensioni minime della pagina vengono generate automaticamente le barre di scorrimento.

SCROLLING="yes|no|auto"

L'attributo scrolling serve per le barre di scorrimento, quando le dimensioni della pagina iframe superano le dimensioni della finestra del browser vengono visualizzate le barre di scorrimento. yes = si alla visualizzazione di queste barre sempre, no = no nessuna barra mai, auto = si ma soltanto se il contenuto di iframe la richiede.

Questo è un esempio simile a quello sopra, è stato impostato No nel parametro per la generazione dello scrolling. Da notare che questa volta ridimensionando la finestra del browser il suo contenuto tende a sparire senza che siano visualizzate le barre di scorrimento.

FRAMEBORDER="0|1"

L'attributo frameborder serve per rendere visibili o meno i bordi di iframe, per default si trova a [1] quindi impostare [0] soltanto nel caso in cui non si voglia ridisegnare il bordo.

Notare la mancanza assoluta di bordi quasi non fosse un iframe ma una immagine piatta inserita nella pagina web.

MARGINWIDTH="valore"  MARGINHEIGHT="valore"

Gli attributi marginwidth e marginheight accettano valori numerici che corrispondono a pixel, forzano il rientro sui lati: destro e sinistro, alto e basso.

In questo esempio 100 pixel per il bordo verticale.

ALIGN=" left | center | right | justify "

Allineamento del riquadro iframe rispetto al testo e agli altri elementi che compongono la pagina web.(a sinistra, al centro, a destra, giustificato)

In questo esempio l'allineamento scelto è quello destro (right). Per i vari modi di allineare vale quanto detto per l'attributo align dell'elemento IMG

NAME="nome_frame"

L'attributo NAME è estremamente importante nel caso in cui volessimo aprire dei links all suo interno, serve per assegnare un nome ad iframe che deve essere univoco e sarà poi il "bersaglio" target o destinazione di collegamenti da altri links tramite l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai links e loro gestione. Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi oppure lo stesso nome ma con funzioni decisamente diverse.

Così facendo è stato assegnato il nome pippo al nostro iframe, adesso basterà inserire l'attributo target="pippo" ad eventuali links che questi saranno aperti dentro iframe stesso. Provate con questi links di prova: link 1   link 2   link 3  

Con l'aiuto dei CSS (fogli di style) è possibile posizionare i vari iframe in un punto preciso dello schermo, guardate questo esempio dove vengono sovrapposti, non è pratico e di conseguenza non serve a nulla ma rende bene l'idea.

  Potete fare domande e discutere l'argomento sul Forum