Résumé
L'élément HTML <iframe>
(pour inline frame) représente un contexte de navigation imbriqué, ce qui se traduit par l'intégration d'une page HTML dans la page courante. Chaque contexte de navigation possède son propre historique de session et son document actif. Le contexte de navigation entourant le contenu intégré est appelé contexte de navigation parent. La fenêtre de navigation est généralement le contexte de navigation de plus haut-niveau (c'est à dire celui n'ayant pas de parent).
- Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible.
- Contenu autorisé Cas spécial, voir la syntaxe et l'exemple
- Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
- Éléments parents autorisés Tout élément acceptant du contenu intégré
- Interface DOM
HTMLIFrameElement
.
Attributs
Cet élément inclut les attributs globaux.
align
Obsolète depuis HTML4.01, Obsolète depuis HTML5- L'alignement de cet élément par rapport au contexte qui l'entoure.
allowfullscreen
- Si cet attribut vaut
true
, l'élément pourra être affiché en mode plein écran en appelant la méthodeelement.mozRequestFullScreen()
. S'il n'est pas renseigné, l'élément ne pourra pas être affiché en mode plein écran. frameborder
HTML 4 seulement- Si cet attribut vaut 1 (la valeur par défaut), le navigateur affichera un cadre (trait) entre cet élément et ceux qui l'entourent. S'il vaut 0, le navigateur ne dessinera pas de cadre autour de l'élément.
height
- Indique la hauteur de l'élément. En HTML5, elle est exprimée en pixels CSS. En HTML 4.01 elle est exprimée en pixels ou par pourcentage.
longdesc
HTML 4 seulement- Un URI pour une description étendue du contenu de l'élément. Suite à un usage incorrect généralisé, cet attribut ne doit plus être considéré comme étant utile par les navigateurs non-graphiques.
marginheight
HTML 4 seulement- L'espace (en pixels) entre le contenu de l'élément et ses marges hautes et basses.
marginwidth
HTML 4 seulement- L'espace (en pixels) entre le contenu de l'élément et ses marges droites et gauches.
mozallowfullscreen
- L'attribut
allowfullscreen
doit être utilisé à la place de celui-ci. Dans la version 9.0 de Gecko et les versions ultérieures, cet attribut peut être fixé àtrue
si l'élément peut être affiché en mode plein écran avec l'appel de la méthodeelement.mozRequestFullScreen()
. S'il n'est pas renseigné, l'élément ne pourra pas être affiché en mode plein écran. webkitallowfullscreen
- L'attribut
allowfullscreen
doit être utilisé à la place de celui-ci. À partir de la version 17 de Chrome, cet attribut peut être fixé àtrue
si l'élément peut être affiché en mode plein écran avec l'appel de la méthodeelement.webkitRequestFullScreen()
. Si cet attribut n'est pas renseigné, l'élément ne pourra pas être affiché en mode plein écran. mozapp
Only available on Firefox OS- Pour les éléments
<iframe>
intégrant une application web, cet attribut représente l'URL du manifeste d'application. Cela permet de s'assurer que l'application est chargée avec les autorisations nécessaires. Voir l'utilisation de l'API Browser pour plus de détails. Disponible à partir de Gecko 13.0. mozbrowser
Only available on Firefox OS- Indique que l'élément doit être affiché comme étant au plus haut niveau, celui de la fenêtre du navigteur. Cela signifie que
window.top
,window.parent
,window.frameElement
, ... ne reflèteront pas la hiérarchie de cet élément. Cela permet par exemple d'implémenter l'interface utilisateur d'un navigateur web en n'utilisant seulement que des technologies web grâce aux autorisations adéquates. Voir l'utilisation de l'API Browser pour plus de détails. Disponible à partir de Gecko 13.0. name
- Un nom pour désigner le contexte de navigation intégré. La valeur de cet attribut pourra être utilisée comme valeur de l'attribut
target
d'un élément<a>
ou<form>
ou comme valeur de l'attributformtarget
d'un élément<input>
ou<button>
. remote
Only available on Firefox OS- Charge la page de l'élément dans un processus séparé.
scrolling
HTML 4 seulement- Attribut énuméré indiquant si le navigateur doit fournir une barre de défilement (ou autre chose permettant le défilement de la page) pour l'élément. Il peut valoir :
auto
: fournira une barre de défilement seulement si nécessaireyes
: fournira toujours une barre de défilementno
: ne fournira pas de barre de défilement.
sandbox
HTML5 seulement- Si cet attribut vaut la chaîne de caractères vide (""), il entrainera l'activation de restrictions supplémentaires concernant le contenu à afficher dans l'élément. La valeur de cet attribut peut être une liste de mots-clés séparés par un espace, chacun de ces mot-clé lèvera une restriction spécifique. Les mots-clés autorisés sont :
allow-same-origin
: permet au contenu d'être traité comme s'il était affiché depuis son origine. Si ce mot-clé n'est pas utilisé, le contenu intégré est traité comme s'il provenait d'une origine unique.allow-top-navigation
: permet au contenu intégré de charger du contenu dans le contexte de navigation de plus haut niveau. Si ce mot-clé n'est pas utilisé, cette opération est interdite.allow-forms
: permet au contenu intégré d'envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération est interdite.allow-popups
: permet l'affichage de pop-up (tel qu'avec (like fromwindow.open
,target="_blank"
,showModalDialog
). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera silencieusement.allow-scripts
: permet au contenu intégré de lancer des scripts (sans toutefois permettre la création de fenêtres popup). Si ce mot-clé n'est pas utilisé, cette opération est interdite.allow-pointer-lock:
Permet au contenu intégré d'utiliser le
Note :
- Lorsque le document intégré possède la même origine que la page utilisée, il est fortement déconseillé d'utiliser à la fois
allow-scripts
etallow-same-origin
car cela autorise le contenu intégré à passer outre l'attributsandbox
. Si cela est possible, il faut comprendre que cette utilisation n'est pas plus sécurisée que de celle où l'attributsandbox
n'est pas utilisé. - Le sandboxing (séparation des processus dans un « bac à sable » isolé) n'est souvent utile que si quelqu'un attaquant le site ne peut pas afficher de contenu en dehors de l'élément
iframe
isolé (sandboxed). Il est recommandé qu'un tel contenu soit servi par la page depuis un domaine dédié séparé afin de limiter les dégats potentiels. - L'attribut sandbox n'est pas supporté par Internet Explorer 9 et les versions antérieures. Il n'est pas non plus supporté par Opera.
seamless
HTML5 seulement- Cet attribut booléen indique si le navigateur doit afficher l'élément comme s'il faisait partie du document contenant (en appliquant par exemple les règles CSS s'appliquant à l'élément
<iframe>
avant d'appliquer celles de ce document et en ouvrant les liens de ce contexte de navigation dans le contexte parent à moins qu'un réglage empêche cela). src
- L'URL de la page à intégrer.
srcdoc
HTML5 seulement- Le contenu de la page que le contexte intégré est supposé contenir.
width
- Indique la largeur de l'élément. En HTML5, elle est exprimée en pixels CSS. En HTML 4.01, elle est exprimée en pixels ou par un pourcentage.
Utilisation de scripts
Les éléments <iframe>
, tout comme les éléments <frame>
font partie du pseudo-tableau window.frames
.
Depuis l'élément DOM iframe
, les scripts peuvent accéder à l'objet window
de la page HTML incluse grâce à la propriété contentWindow
. La propriété contentDocument
fait référence au document contenu à l'intérieur de l'élément iframe
(et est donc équivalent à ceci : contentWindow.document
), mais il n'est pas supporté par les versions d'Internet Explorer antérieures à IE8.
Depuis l'intérieur d'un élément <frame>
ou <iframe>
, un script peut obtenir une référence vers la fenêtre parente grâce à
window.parent
.
Les scripts qui tentent d'accéder au contenu de ces éléments (<frame>
ou <iframe>
) sont sujets à la règle d'origine identique (same-origin policy), et ne peuvent donc pas accéder à la plupart des propriétés de l'objet window
s'ils ont été chargés depuis un autre domaine. Cela s'applique également aux scripts contenu dans un élément <frame>
ou <iframe>
tentant d'accéder à leur fenêtre parente. Un communication transversale entre domaines peut cependant être achevée grâce à window.postMessage
.
Exemples
Exemple 1
<script type="text/javascript"> var iframe = window.getElementsByTagName( "iframe" )[ 0 ]; alert( "Titre de l'iframe: " + iframe.contentWindow.title ); </script> <iframe src="page.html" width="300" height="300"> <p>Votre navigateur ne supporte pas l'élément iframe</p> </iframe>
Exemple 2 : Ouvrir un lien dans une iframe dans un autre onglet
<base target="_blank" /> <iframe width="400" height="215" 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>
Note
À partir de Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), le rendu des <iframe>
respecte la bordure arrondie indiquée par l'élément parent lorsque l'attribut CSS border-radius
est utilisé.
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
WHATWG 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 |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 1.0 | (Oui) | (Oui) | (Oui) | (Oui) |
sandbox |
4 | 17.0 (17.0) | 10 | 15 | 5 |
seamless |
Pas de support | Pas de support | Pas de support | Pas de support | 6 |
srcdoc |
20 | 25.0 (25.0) | Pas de support | 15 | 6 |
allowfullscreen |
17 webkit Nightly build |
9.0 (9.0) moz 18.0 (18.0) |
Pas de support | (Oui) | Pas de support |
sandbox="allow-popups" |
? | 27.0 (27.0) | ? | ? | ? |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
sandbox |
2.2 | 17.0 (17.0) | 10 | Pas de support | 4.2 |
seamless |
? | Pas de support | Pas de support | ? | ? |
srcdoc |
? | 25.0 (25.0) | Pas de support | ? | ? |
allowfullscreen |
? | 9.0 (9.0)moz 18.0 (18.0) |
Pas de support | Pas de support | Pas de support |
sandbox="allow-popups" |
? | 27.0 (27.0) | ? | ? | ? |