Gli iframe sono elementi HTML che permettono di visualizzare una pagina web all'interno di un'altra pagina. Sono molto utilizzati per incorporare contenuti esterni, come mappe, video, documenti o pagine provenienti da altri siti.
Per creare un iframe si utilizza il tag <iframe>. Per indicare quale pagina deve essere visualizzata, bisogna aggiungere l'attributo src=”valore”, dove valore rappresenta il percorso o l'indirizzo della pagina da caricare.
<iframe src="pagina.html"></iframe>
Gli iframe supportano diversi attributi che permettono di personalizzarne l'aspetto e il comportamento. Vediamo quelli più utilizzati.
Come molti altri elementi HTML, anche <iframe> può utilizzare gli attributi width=”valore” e height=”valore”. Questi permettono di impostare rispettivamente la larghezza e l'altezza dell'iframe, generalmente espresse in pixel oppure in percentuale.
<iframe src="pagina.html" width="300px" height="100px"></iframe>
targetL'attributo target, già visto nella lezione dedicata ai collegamenti, può essere utilizzato per aprire un link direttamente all'interno di un iframe invece che nella finestra o nella scheda corrente. Per farlo, l'iframe deve avere l'attributo name=”valore”, mentre il link dovrà usare lo stesso nome come valore di target.
<iframe src="pagina.html" name="iframe-prova"></iframe>
<a href="pagina.html" target="iframe-prova">Apri qui</a>
Se il contenuto dell'iframe è più grande delle dimensioni impostate con width e height, normalmente compariranno le barre di scorrimento. Per impedirne la visualizzazione puoi utilizzare scrolling="no". In questo modo l'utente non potrà scorrere il contenuto dell'iframe.
<iframe src="pagina.html" width="300px" height="100px" scrolling="no"></iframe>
Per impostazione predefinita, molti browser mostrano un bordo attorno all'iframe. Se desideri eliminarlo, puoi utilizzare l'attributo style=”border:none”. In questo caso border:none è il valore CSS che rimuove completamente il bordo, rendendo l'iframe più integrato nel layout della pagina.
<iframe src="pagina.html" width="300px" height="100px" style="border:none"></iframe>