<iframe>

Dans cet article

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. En HTML 4.01, un document peut contenir un élément <head> et un élément <body> ou un élément <head> et un élément <frameset> mais pas à la fois un élément <body> et un élément <frameset>. En revanche une <iframe> peut être utilisée à l'intérieur du corps d'un document normal. 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.

Catégories de contenu	Contenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible.
Contenu autorisé	Spécifique, voir les détails sur cette page.
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`

Attributes

Cet élément prend en charge les attributs universels.

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.

allowfullscreen

Cet attribut, lorsqu'il vaut true indique que l'iframe intégrée peut être passée 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ée d'appeler l'API Payment Request.

frameborder HTML 4 uniquement

Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre l'iframe et toute autre iframe. Lorsqu'il vaut 0, aucune bordure n'est dessinée.

height

Cet attribut définit la hauteur de l'iframe en pixels CSS (HTML5). En HTML 4.01, elle peut être exprimée en pixels ou en pourcentages.

longdesc HTML 4 uniquement

Un URI vers une description détaillée du contenu de l'iframe. 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 de l'iframe et ses marges haute et basse.

marginwidth HTML 4 uniquement

L'espace, exprimé en pixels, entre le contenu de l'iframe 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 valoir true afin qu'on puisse placer l'iframe en plein écran grâce à la méthode element.mozRequestFullScreen(). Si cet attribut n'est pass 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, cet attribut peut valoir true afin qu'on puisse placer l'iframe en plein écran grâce à la méthode element.webkitRequestFullScreen(). Si cet attribut n'est pass utilisé, l'élément ne peut pas être affiché en mode plein écran.

name

Un nom pour le contexte de navigation. Ce nom peut être utilisé comme la 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>.

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ête Referer ne sera pas envoyé.
"no-referrer-when-downgrade" signifie que l'entête Referer sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par 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.

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 l'iframe :

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.

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 popups (par exemple avec window.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 avoir à appliquer les mêmes restrictions sur la page initiale.
allow-presentation : ce mot-clé permet à une 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 popups). 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écouragé d'employer both allow-scripts et allow-same-origin simultanément car cela permet de retirer l'attribut sandbox. Bien que ce soit accepté, ce cas de figure serait aussi sécurisé que de ne pas utiliser l'attribut sandbox.
La mise en bac à sable (sandboxing) ne sera que peu d'utilisé si un attaquant peut injecter du contenu en dehors d'une iframe sous sandbox. Aussi, il est recommandé de servir le contenu de l'iframe depuis un domaine dédié séparé, afin de limiter les éventuels dangers.
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 sur 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'attribut srcdoc, ce dernier surchargera le contenu éventuellement défini via l'attribut src. Si un navigateur ne prend pas en charge l'attribut srcdoc, c'est le contenu lié via src 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.)

`iframe` et les scripts

Les iframes, telles 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 grâce à 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 script d'une iframe qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode Window.postMessage().

Exemples

Une `<iframe>` simple

Voici un exemple simple où, lorsque l'utilisateur clique sur le bouton, le titre est affiché dans une popup.

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 d'une `<iframe>` dans un onglet

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

Résultat

Spécifications

Spécification	État	Commentaires
Referrer Policy La définition de 'referrerpolicy attribute' dans cette spécification.	Brouillon de l'éditeur	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`.

Ordinateur
Mobile

Fonctionnalité	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	1	(Oui)	(Oui)[1]	(Oui)	(Oui)	(Oui)[2]
`sandbox`	4	(Oui)	17.0 (17.0)	10	15	5
`srcdoc`	20	Pas de support	25.0 (25.0)	Pas de support	15	6
`allowfullscreen`	17 webkit 27	(Oui)	9.0 (9.0) moz 18.0 (18.0)	11 ms	(Oui)	(Oui) webkit 7
`sandbox="allow-popups"`	(Oui)	(Oui)	28.0 (28.0)	?	?	?
`sandbox="allow-popups-to-escape-sandbox"`	46	Pas de support	49.0 (49.0)	?	32	?
`sandbox="allow-modals"`	?	Pas de support	49.0 (49.0)	?	?	?
`referrerpolicy`	51	Pas de support	50.0 (50.0)	?	?	?
`sandbox="allow-presentation"`	53	Pas de support	?	?	40	?
`sandbox="allow-top-navigation-by-user-activation"`	58	?	?	?	45	?
`allowpaymentrequest`	?	?	?	?	?

Fonctionnalité	Webview Android	Chrome pour Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	(Oui)	(Oui)	(Oui)	(Oui)[1]	(Oui)	(Oui)	(Oui)
`sandbox`	(Oui)	(Oui)	(Oui)	17.0 (17.0)	10	Pas de support	4.2
`srcdoc`	?	?	(Oui)	25.0 (25.0)	Pas de support	?	?
`allowfullscreen`	?	?	(Oui)	9.0 (9.0) moz 18.0 (18.0)	Pas de support	Pas de support	(Oui) webkit 7
`sandbox="allow-popups"`	?	?	Pas de support	27.0 (27.0)	?	?	?
`sandbox="allow-popups-to-escape-sandbox"`	46	46	Pas de support	49.0 (49.0)	?	32	?
`sandbox="allow-modals"`	?	?	Pas de support	49.0 (49.0)	?	?	?
`referrerpolicy`	51	51	Pas de support	50.0 (50.0)	?	?	?
`sandbox="allow-presentation"`	Pas de support	53	Pas de support	?	?	40	?
`sandbox="allow-top-navigation-by-user-activation"`	58	58	?	?	?	45	?
`allowpaymentrequest`	?	?	?	?	?	?	?

[1] La propriété resize n'a aucun effet sur cet élément à cause du bug bug 680823. À partir de Gecko 6.0, les iframes sont affichées correctement dans leur conteneur si celui-ci possède des bordures arrondies avec border-radius.

[2] Safari contient un bug qui empêche les iframes de charger si l'élément iframe a été caché lorsqu'il a été ajouté à la parge. Utiliser l'instruction iframeElement.src = iframeElement.src devrait permettre de charger le contenu correctement.

Étiquettes et contributeurs liés au document

Étiquettes :

Contributeurs à cette page : SphinxKnight, PxlCtzn, marie-ototoi, shinigami35, msherefel, tregagnon

Dernière mise à jour par : SphinxKnight, 9 août 2017 à 10:34:40

Voir aussi

Éléments HTML
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. <dialog>
  8. ~~<dir>~~
  9. <div>
  10. <dl>
  11. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. <picture>
  4. ~~<plaintext>~~
  5. <pre>
  6. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <rtc>
  4. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <slot>
  8. <small>
  9. <source>
  10. ~~<spacer>~~
  11. <span>
  12. ~~<strike>~~
  13. <strong>
  14. <style>
  15. <sub>
  16. <summary>
  17. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. <xmp>

Jul	AUG	Sep
	13
2016	2017	2018

<iframe>

Attributes

iframe et les scripts

Exemples

Une <iframe> simple

HTML

Résultat

Ouvrir un lien d'une <iframe> dans un onglet

HTML

Résultat

Spécifications

Compatibilité des navigateurs

Étiquettes et contributeurs liés au document

Merci ! Veuillez vérifier votre boîte de réception afin de confirmer votre inscription.

Pourquoi MDN a-t-il changé de style ?

`iframe` et les scripts

Une `<iframe>` simple

Ouvrir un lien d'une `<iframe>` dans un onglet