Balise iframe

La balise iframe permet d'intégrer le contenu d'un site dans un autre. Elle est utilisée pour afficher du contenu, tel que des vidéos, des images ou des articles, sans avoir à ouvrir une nouvelle fenêtre ou un nouvel onglet.

Le contenu du site intégré aura le design de ce site spécifique. Par conséquent, les styles CSS de notre site, ainsi que notre code JavaScript n'auront pas d'impact sur le contenu de la balise iframe.

Il est possible d'appliquer notre JavaScript au contenu du iframe, mais pour cela, il faut utiliser des méthodes particulières.

La balise iframe est largement utilisée sur les sites pour intégrer des vidéos depuis YouTube et d'autres plateformes, ainsi que pour afficher des articles et des images provenant d'autres sources.

Attributs

Attribut	Description
`src`	Spécifie l'adresse de la page à intégrer.
`srcdoc`	Permet de définir le contenu de l'iframe directement dans l'attribut.
`frameborder`	Définit une bordure autour de l'iframe. La valeur `yes` ajoute une bordure (par défaut), et la valeur `no` supprime la bordure.
`scrolling`	Définit les barres de défilement à l'intérieur de l'iframe. La valeur `auto` - défilement si nécessaire (par défaut), la valeur `yes` - défilement toujours activé, la valeur `no` - pas de défilement.

Exemple

Insérons sur notre site un iframe avec un autre site (par exemple prenons ) :

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

Результат:

Exemple

Insérons une vidéo YouTube sur notre site :

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

Результат:

Exemple

Écrivons le contenu directement dans l'iframe :

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

Результат: