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).

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éthode element.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éthode element.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éthode element.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'attribut formtarget 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écessaire
  • yes : fournira toujours une barre de défilement
  • no : 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 from window.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 Pointer Lock API.

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 et allow-same-origin car cela autorise le contenu intégré à passer outre l'attribut sandbox. Si cela est possible, il faut comprendre que cette utilisation n'est pas plus sécurisée que de celle où l'attribut sandbox 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&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe><br />
<small>
    <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;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) ? ? ?

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : marie-ototoi, shinigami35, SphinxKnight, msherefel, tregagnon
 Dernière mise à jour par : marie-ototoi,