Tag HTML <iframe>

❮ Précédent Suivant ❯

Le tag <iframe> crée une zone intégrée (frame) sur la page Web, dans laquelle on peut afficher le contenu d’un autre document ou page web. Le contenu de frame et de la page web, sur laquelle on est situé, sont indépendants l’un de l’autre, mais ils peuvent interagir via JavaScript.

Ce ne sont pas tous les navigateurs, qui supportent des frames. En ce cas, on doit indiquer un texte alternatif, qui sera affiché à l’utilisateur, si le navigateur ne pourra pas afficher le contenu du frame.

Les navigateurs affichent visuellement le contenu de l’élément <iframe> avec un cadre étroit par défaut, que on peut effacer à l’aide de la propriété CSS border.

Syntaxe

Le contenu de l’élément est placé entre le tag ouvrant (<iframe>) et le tag fermant (</iframe>).

L’attribut src est requis pour le tag <iframe>. Il indique l’adresse du document, qui doit être affiché en frame.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com"></iframe>
  </body>
</html>

Essayez-vous-même!

Résultat

Pour définir la taille de iframe, vous pouvez utiliser les attributs height et width , ou utilisez CSS. Les valeurs des attributs sont définies en pixels par défaut, mais elles peuvent être également en poucents.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
  </body>
</html>

Essayez-vous-même!

Résultat

Par défaut, il y a une bordure autour de iframe. Pour retirer la bordure, vous pouvez utiliser l'attribut style ou la propriété CSS border .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Essayez-vous-même!

Résultat

Attributs

Attribut	Valeur	Description
align	left right top bottom middle	Spécifie comment le texte est aligné et enroulé autour du cadre. Non supporté en HTML5.
allowfullscreen		Spécifie, que le frame peut être ouvré en mode plein écran.
frameborder	1 0	Spécifie, s’il faut afficher le cadre autour de frame ou non. Non supporté en HTML5.
height	pixels	Spécifie la hauteur du frame (hauteur par défaut 150 pix).
longdesc	URL	Contient le lien vers la description détaillée de la page incorporée dans le cadre. Non supporté en HTML5.
marginheight	pixels	Spécifie les bords hauts et bas de frame. Non supporté en HTML5.
marginwidth	pixels	Spécifie les bords gauches et droits de frame. Non supporté en HTML5.
name	text	Spécifie le nom de frame.
sandbox
		Spécifie les restrictions sur le contenu chargé dans le frame.
	""	Applique toutes les restrictions.
	allow-forms	Permet d’envoyer les formulaires sur la page attachée.
	allow-same-origin	Il perçoit le document joint comme un document téléchargé de la même source que le document parent.
	allow-scripts	Permet de faire les scripts sur la page attachée.
char	allow-top-navigation	Permet au contenu du document joint d'accéder aux éléments de niveau supérieur (documents, fenêtres).
scrolling	yes no auto	Définit, afficher ou non la barre de défilement. Non supporté en HTML5.
seamless	seamless	Spécifie, que le contenu du document attaché doit être affiché comme une partie du document parental.
src	URL	Indique l’adresse du document dont le contenu sera chargé dans le frame.
srcdoc	HTML_code	Stocke le contenu du frame directement dans l'attribut.
width	pixels	Spécifie la largeur du frame. (300px par défaut)