Tag HTML <iframe>

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>

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>

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>

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)

Le tag <iframe> supporte également les Attributs globaux et les Attributs d'événements.


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées