Iframe 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. A differenza di frame non è deprecato ed è supportato anche da HTML5.

 

<iframe>...</iframe>

L'elemento <iframe> possiede al suo interno diversi attributi, quello fondamentale è src che serve per il nome della pagina web da richiamare. Questo tag necessita del relativo elemento di chiusura </iframe>

<iframe>

Molti gli attributi associabili a questo tag:

alignframeborderheightmarginwidthmarginheightnamescrollingsrcwidth.

</iframe

Torna su


 

src

L'attributo src è fondamentale in quanto specifica il nome della pagina da visualizzare all'interno di iframe. Può essere completo del percorso che specifica da dove richiamarla, URL compresi.

<iframe src="nome_pagina.html"></iframe>

L'esempio sopra è privo di qualsiasi altro attributo se si esclude src, 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 e height.

Torna su


 

width e height

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

<iframe ... height="170width="80%"></iframe>

Da notare che le dimensioni possono essere espresse sia in pixel "170" (fissa), che in percentuale "80%" (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.

Torna su


 

scrolling

L'attributo scrolling serve per determinare se visualizzare o meno le barre di scorrimento della finestra di iframe. Quando le dimensioni della pagina iframe superano le dimensioni della finestra del browser vengono visualizzate automaticamente, è possibile modificare questo automatismo con i valori: 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 attributo non è più supportato da HTML5

<iframe scrolling="no" height="170" width="80%"></iframe>

Questo è un esempio simile a quello sopra, la sola differenza è il valore no nel parametro per la soppressione dello scrolling. Da notare che lo spazio che occupavano le barre di scorrimento è in questo esempio restituito alle dimensioni della pagina richiamata.

Torna su


 

frameborder

L'attributo frameborder serve per rendere visibili o meno i bordi di iframe, a prescindere se siano o meno visibili le barre di scorrimento. Per default si trova a [1] visibile, impostare [0] nel caso in cui non si voglia rendere visibile il bordo. Questo attributo non è più supportato da HTML5

<iframe frameborder="0"></iframe>

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

Torna su


 

marginwidth e marginheight

Gli attributi marginwidth e marginheight accettano valori numerici che corrispondono al numero di pixel, forzano i margini sui lati: destro e sinistro, alto e basso della pagina richiamata rispetto alla finestra di iframe. Questo attributo non è più supportato da HTML5

<iframe marginheight="50"></iframe>

In questo esempio 50 pixel impostati per i margini alto e basso o superiore ed inferiore.

Torna su


 

align

L'attributo align serve per impostare il tipo di allineamento del riquadro iframe rispetto al testo e agli altri elementi che compongono la pagina web. I parametri sono gli stessi del testo: left, center, rigth justify (a sinistra, al centro, a destra, giustificato) Questo attributo non è più supportato da HTML5

<iframe align="valore"></iframe>

In questo esempio l'allineamento scelto è quello destro (align="right"). Per i vari modi di allineare iframe vale quanto già detto per l'attributo align relativo all'elemento IMG

Torna su


 

name

L'attributo name è estremamente importante nel caso in cui volessimo aprire dei links al suo interno, serve per assegnare un nome alla finestra 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 possono essere due nomi completamente diversi oppure lo stesso nome ma con funzioni decisamente diverse.

<iframe name="pippo" src="pagina.html"></iframe>

Così facendo è stato assegnato il nome pippo al nostro iframe, adesso basterà inserire l'attributotarget="pippo" ai vari links che dovranno essere visualizzati all'nterno dell'iframe. Provate con questi tre 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 sotto dove vengono sovrapposti, non è pratico e di conseguenza non serve a nulla ma rende molto bene l'idea di posizionamento.

Torna su


Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!