L'élément HTML <iframe>
représente un contenu de navigation imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. Window
).
Chaque contexte de navigation possède son propre historique et son propre document actif.
Chaque contexte de navigation créé par un élément <iframe>
représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de l page. Aussi bien qu'en théorie on puisse ajouter au d'iframes que possible et sur autant de niveau d'imbrication que voulu, on gardera à l'esprit que cela peut nuire aux performances.
Catégories de contenu | Contenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible. |
---|---|
Contenu autorisé | Le contenu alternatif, qui sera affiché par les navigateurs qui ne prennent pas en charge cet élément. |
Omission de balise | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
Parents autorisés | Tout élément qui accepte du contenu intégré. |
Rôles ARIA autorisés | application , document , img |
Interface DOM | HTMLIFrameElement |
Attributs
Cet élément prend en charge les attributs universels.
allowfullscreen
- Cet attribut, lorsqu'il vaut
true
(vrai) indique que l'iframe intégré peut être passé en plein écran via la méthodeElement.requestFullscreen()
. Si cet attribut n'est pas employé, l'élément ne pourra pas être affiché en mode plein écran. allowpaymentrequest
- Cet attribut, lorsqu'il vaut
true
, permet à l'iframe intégré d'appeler l'API Payment Request. height
- Cet attribut définit la hauteur du cadre en pixels CSS (HTML5). En HTML 4.01, elle peut être exprimée en pixels ou en pourcentages.
name
- Un nom pour le contexte de navigation (ou la frame). Ce nom peut être utilisé comme la valeur de l'attribut
target
(cible) d'un élément<a>
ou<form>
(formulaire) ou comme valeur de l'attributformtarget
d'un élément<input>
(entrée) ou<button>
(bouton). Il peut également être utilisé comme valeur pour le paramètreewindowName
de la méthodewindow.open()
. referrerpolicy
- Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération de la ressource :
"no-referrer"
signifie que l'en-têteReferer
ne sera pas envoyé.- "
no-referrer-when-downgrade
" signifie qu'aucun en-têteReferrer
ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur. "origin"
signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).- "origin-when-cross-origin" signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.
"unsafe-url"
signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.
-
sandbox
HTML5 uniquement- Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'iframe. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont :
allow-forms
: le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.allow-modals
: le contexte de navigation peut ouvrir des fenêtres modales.allow-orientation-lock
: le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.allow-pointer-lock
: le contexte de navigation peut utliser l'API Pointer Lock.allow-popups
: le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avecwindow.open
,target="_blank"
,showModalDialog
). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.allow-popups-to-escape-sandbox
: ce mot-clé permet à un document isolé dans un bac à sable (sandboxed) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.allow-presentation
: ce mot-clé permet à un iframe de démarrer une session de présentation.allow-same-origin
: ce mot-clé permet au contenu d'être considéré comme étant de la même origine que le contexte parent. Si ce mot-clé n'est pas utilisé, le contenu intégré est considéré comme provenant d'une autre origine.allow-scripts
: le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.allow-top-navigation
: le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.allow-top-navigation-by-user-activation
: le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.
Notes :
- Lorsque le document intégré possède la même origine que la page principale, il est fortement déconseillé d'employer
allow-scripts
etallow-same-origin
simultanément car cela permet de retirer l'attributsandbox
par programme. Bien que ce soit accepté, ce cas de figure n'est pas plus sûr que de ne pas utiliser l'attributsandbox
. - La mise en bac à sable (sandboxing) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un iframe sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.
- L'attribut
sandbox
n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.
src
- L'URL de la page qu'on souhaite intégrer. On pourra utiliser 'about:blank' pour les pages vides, pour respecter les règles de même origine (Same-Origin Policy).
srcdoc
HTML5 uniquement- Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation. Cet attribut est généralement utilisé avec l'attribut
sandbox
. Si le navigateur prend en charge l'attributsrcdoc
, ce dernier surchargera le contenu éventuellement défini via l'attributsrc
. Si un navigateur ne prend pas en charge l'attributsrcdoc
, c'est le contenu lié viasrc
qui sera affiché. On notera que si le contenu de l'attribut contient une balise ouvrante<script>
, il est nécessaire d'avoir une balise fermante afin que le script soit exécuté, même s'il n'y a aucun contenu après le script. width
- Cet attribut indique la largeur de l'iframe en pixels CSS (HTML5). (En HTML 4.01, la largeur peut être exprimée en pixels ou en pourcentages.)
Attributs dépréciés ou obsolètes
align
Obsolète depuis HTML4.01, Obsolète depuis HTML5- Cet attribut obsolète permettait de définir l'alignement de l'iframe par rapport à son contexte englobant.
frameborder
HTML 4 uniquement- Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée.
longdesc
HTML 4 uniquement- Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.
marginheight
HTML 4 uniquement- L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.
marginwidth
HTML 4 uniquement- L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.
mozallowfullscreen
- Il faut utiliser l'attribut
allowfullscreen
à la place. Pour Gecko 9.0 et les versions ultérieures, cet attribut peut valoirtrue
afin qu'on puisse placer le cadre en plein écran grâce à la méthodeelement.mozRequestFullScreen()
. Si cet attribut n'est pas utilisé, l'élément ne peut pas être affiché en mode plein écran. webkitallowfullscreen
- Il faut utiliser l'attribut
allowfullscreen
à la place. Pour Chrome 17 et les versions ultérieures (et peut-être plus tôt), cet attribut peut valoirtrue
afin qu'on puisse placer le cadre en plein écran grâce à la méthodeelement.webkitRequestFullScreen()
. Si cet attribut n'est pas utilisé, l'élément ne peut pas être affiché en mode plein écran. scrolling
HTML 4 uniquement- Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour le cadre :
auto
: la barre de défilement est uniquement affichée lorsque c'est nécessaire.yes
: la barre de défilement est toujours affichée.no
: aucune barre de défilement n'est affichée.
iframe et scripts
Les iframes
, tels que les <frame>
, font partie du pseudo-tableau window.frames
.
En utilisant l'élément iframe
du DOM, les scripts peuvent accéder à l'objet window
de la page HTML incluse par la propriété contentWindow
. La propriété contentDocument
fait référence au document contenu dans l'iframe
(l'équivalent de contentWindow.document
) mais n'est pas prise en charge par Internet Explorer avant IE8.
Depuis l'iframe, un script peut obtenir une référence à la fenêtre parente via la propriété Window.parent
.
Les scripts qui tentent d'accéder au contenu de l'iframe doivent respecter les règles de même origine et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un iframe qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode Window.postMessage()
.
Exemples
Un <iframe>
simple
Voici un exemple simple où, lorsque l'utilisateur clique sur le bouton, le titre est affiché dans une fenêtre contextuelle.
HTML
<iframe title="exemple 1 avec iframe" src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"> <p>Your browser does not support iframes.</p> </iframe>
Résultat
Ouvrir un lien dans un <iframe>
dans un autre onglet
Dans cet exemple, une carte Google est affichée dans un cadre.
HTML
<base target="_blank"> <iframe id="Example2" name="Example2" title="Example2" width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> </iframe> <br> <small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a> </small>
Résultat
Notes
À partir de Gecko 6.0, le rendu des "iframes" respecte correctement les bordures de leur élément contenant lorsqu'ils sont arrondis en utilisant border-radius
.
Accessibilité
Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peut utiliser l'attribut title
pour obtenir la description du contenu embarqué par l'iframe
. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.
<iframe title="La page Wikipédia consacrée à Robert Louis Stevenson" src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"></iframe>
Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'iframe
et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs iframe
et/ou du contenu interactif tel que des vidéos ou de la musique.
Spécifications
Spécification | État | Commentaires |
---|---|---|
Referrer Policy La définition de 'referrerpolicy attribute' dans cette spécification. |
Candidat au statut de recommandation | Ajout de l'attribut referrerpolicy . |
HTML Living Standard La définition de '<iframe>' dans cette spécification. |
Standard évolutif | |
HTML5 La définition de '<iframe>' dans cette spécification. |
Recommendation | |
HTML 4.01 Specification La définition de '<iframe>' dans cette spécification. |
Recommendation | |
Screen Orientation API | Version de travail | Ajout du mot-clé allow-orientation-lock pour l'attribut sandbox . |
Presentation API La définition de 'allow-presentation' dans cette spécification. |
Candidat au statut de recommandation | Ajout du mot-clé allow-presentation pour l'attribut sandbox . |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 1 | Oui | Oui1 | Oui | Oui | Oui2 |
align | 1 | Oui | Oui | Oui | Oui | Oui |
allowfullscreen | 27 17 webkit | Oui | 18 9 moz | 11 ms | Oui | 7 Oui webkit |
allowpaymentrequest | Non | Non | Non | Non | Non | Non |
frameborder | 1 | Oui | Oui | Oui | Oui | Oui |
height | 1 | Oui | Oui | Oui | Oui | Oui |
longdesc | 1 | Oui | Oui | Oui | Oui | Oui |
marginheight | 1 | Oui | Oui | Oui | Oui | Oui |
marginwidth | 1 | Oui | Oui | Oui | Oui | Oui |
name | 1 | Oui | Oui | Oui | Oui | Oui |
referrerpolicy | 51 | Non | 50 | Non | ? | ? |
scrolling | 1 | Oui | Oui | Oui | Oui | Oui |
sandbox | 4 | Oui | 17 | 10 | 15 | 5 |
sandbox : sandbox='allow-popups' | Oui | Oui | 28 | ? | ? | ? |
sandbox : sandbox='allow-popups-to-escape-sandbox' | 46 | Non | 49 | Non | 32 | ? |
sandbox : sandbox='allow-modals' | ? | Non | 49 | Non | ? | ? |
sandbox : sandbox='allow-presentation' | 53 | Non | ? | Non | 40 | ? |
sandbox : sandbox='allow-top-navigation-by-user-activation' | 58 | Non | ? | Non | 45 | ? |
src | 1 | Oui | Oui | Oui | Oui | Oui |
srcdoc | 20 | Non | 25 | Non | 15 | 6 |
width | 1 | Oui | Oui | Oui | Oui | Oui |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | Oui | Oui | Oui | Oui1 | Oui | Oui2 | Oui |
align | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
allowfullscreen | ? | ? | Oui | 18 9 moz | Non | 7 Oui webkit | ? |
allowpaymentrequest | Non | Non | Non | Non | Non | Non | Non |
frameborder | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
height | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
longdesc | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
marginheight | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
marginwidth | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
name | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
referrerpolicy | 51 | 51 | Non | 50 | ? | ? | 5.0 |
scrolling | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
sandbox | Oui | Oui | Oui | 17 | ? | 4.2 | Oui |
sandbox : sandbox='allow-popups' | ? | ? | Non | 27 | ? | ? | ? |
sandbox : sandbox='allow-popups-to-escape-sandbox' | 46 | 46 | Non | 49 | 32 | ? | 5.0 |
sandbox : sandbox='allow-modals' | ? | ? | Non | 49 | ? | ? | ? |
sandbox : sandbox='allow-presentation' | Non | 53 | Non | ? | 40 | ? | 6.0 |
sandbox : sandbox='allow-top-navigation-by-user-activation' | 58 | 58 | Non | ? | 45 | ? | 7.0 |
src | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
srcdoc | ? | ? | Non | 25 | ? | ? | ? |
width | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
1. The resize
CSS property doesn't have any effect on this element due to bug 680823.
2. Safari has a bug that prevents iframes from loading if the iframe
element was hidden when added to the page. iframeElement.src = iframeElement.src
should cause it to load the iframe.