Tag iframe

Il tag iframe consente di incorporare il contenuto di un sito in un altro. Viene utilizzato per visualizzare contenuti, come video, immagini o articoli, senza la necessità di aprire una nuova finestra o scheda.

Il contenuto del sito incorporato avrà il design proprio di quel sito. Inoltre, i CSS del nostro sito, così come il nostro codice JavaScript non influenzeranno il contenuto del tag iframe.

È possibile applicare il nostro JavaScript al contenuto di iframe, ma per farlo è necessario agire con metodi particolari.

Il tag iframe è ampiamente utilizzato sui siti web per incorporare video da YouTube e altre piattaforme, nonché per visualizzare articoli e immagini da altre fonti.

Attributi

Attributo Descrizione
src Specifica l'indirizzo della pagina che deve essere incorporata.
srcdoc Consente di definire il contenuto dell'iframe direttamente nell'attributo.
frameborder Imposta il bordo attorno all'iframe.
Il valore yes imposta il bordo (predefinito), mentre il valore no rimuove il bordo.
scrolling Imposta le barre di scorrimento all'interno dell'iframe.
Il valore auto - scorrimento quando necessario (predefinito), il valore yes - scorrimento sempre, il valore no - nessuno scorrimento.

Esempio

Inseriamo nel nostro sito un iframe con un altro sito (ad esempio prendiamo ):

html<iframe src="/" width="600" height="400"></iframe>

Результат:

Esempio

Inseriamo un video di YouTube nel nostro sito:

html<iframe
  src="https://www.youtube.com/embed/KzQrHpB1H8U"
  allowfullscreen
  width="400"
  height="400">
</iframe>

Результат:

Esempio

Scriviamo il contenuto direttamente nell'iframe:

html<iframe
  srcdoc="<h1>head</h1><p>text</p>"
  width="300"
  height="200">
</iframe>

Результат: