<iframe>

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é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

Spécifications

Compatibilité des navigateurs