Le Tutoriel de HTML IFrame

HTML iframe
width, height
srcdoc
name
sandbox

1. HTML iframe

Dans HTML, l'étiquette <iframe> est utilisée pour afficher une page web dans une autre page web.

C'est la syntaxe la plus simple pour créer une <iframe> :

<iframe src="URL"></iframe>

La liste des attributs (attribute) de la <iframe> :

Attribut (Attribute)	Valeur	Description
src	URL	Spécifie l'adresse du document à intégrer dans l'étiquette <iframe>.
srcdoc	HTML_code	Spécifie le contenu HTML de la page à afficher dans l'étiquette <iframe>.
name	text	Spécifie le nom d'une <iframe>.
height	pixels	Spécifie la hauteur d'une <iframe>. La valeur par défaut est 150 pixel.
width	pixels	Spécifie la largeur d'une <iframe>. La valeur par défaut est 300 pixel.
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Permet un ensemble supplémentaire de restrictions pour le contenu d'une <iframe>.

Remarques : Il y a plusieurs autres attributs (attributes) HTML4.1 <iframe> mais ils n'étaient plus supportés dans HTML5, il comprend: align, frameborder, longdesc, marginheight, marginwidth, scrolling.

L'étiquette <iframe> supporte également quelques attributs standards dans HTML :

HTML Global Attributes

Voir plus : Utiliser Javascript pour travailler avec les hiérarchies Frame :
Le Tutoriel de Javascript Window

2. width, height

Les attributs width, height vous permet de spécifier la largeur et la hauteur en pixel de <iframe>, la valeur par défaut de (width,height) = (300px,150px).

width-height-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head> 
<body>
  <h3>iframe - width/height:</h3>

  <iframe src='child.html'
      width= 300 height = 100
      style="border:1px solid black"></iframe>
</body>
</html>

Vous pouvez également utiliser CSS pour régler la largeur et la hauteur de <iframe> :

css-width-height-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - width/height:</h3>
  <iframe src='child.html'
      style="width:300px;height:100px;border:1px solid black"></iframe>
</body>
</html>

vw, vh

En CSS, l'unité vw est l’abréviation de Viewport Width, et l'unité vh est l’abréviation de Viewport Height.

20vw = 20% Viewport Width
100vw = 100% Viewport Width
20vh = 20% Viewport Height
100vh = 100% Viewport Height
...

L'exemple ci-dessous utilise CSS pour définir la largeur 100%, la hauteur 100% de <iframe> :

width-height-100-vw-vh.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe:</h3>
  <p>style={width:100vw; height:100vh}</p>
  <iframe src='child.html'
      style="border:1px solid black;width:100%;height:100vh;"></iframe>
  <br/>
</body>
</html>

De plus, il existe 2 autres approches pour régler la largeur et la hauteur du <iframe> à 100%, comme par exemple :

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

Ou :

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

3. srcdoc

L'attribut srcdoc spécifie le contenu HTML pour afficher dans l'étiquette <iframe>.

srcdoc-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
  <script>
     function setNewContentForIframe() {
        var div = document.getElementById("mydiv");
        document.getElementById("myframe").srcdoc = div.innerHTML;
     }
  </script>
</head>
<body>
  <h3>iframe - srcdoc:</h3>

  <iframe srcdoc="<h3>This is an iframe</h3>" id ="myframe"
      height ="100"
      style="border:1px solid black"></iframe>
  <p>Div</p>
  <div style="background: #e5e7e9;padding:5px;" id="mydiv">
      <h4>Content in a div</h4>
      Content in a div
  </div>
  <br/>
  <button onClick="setNewContentForIframe()">Set new Content for Iframe</button>
  <a href="">Reset</a>
</body>
</html>

4. name

Le nom de l'étiquette <iframe> peut être utilisé comme target (cible) pour l'étiquette <a> :

name-example.html

<!DOCTYPE html>
<html>
<head>
  <title>iframe name</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - name:</h3>
  <a href="child.html" target="myframe">Open Link in 'myframe'</a>
  <br/><br/>
  <iframe src=''
         style="border:1px solid black" name="myframe"></iframe>
  <br/>
  <a href="">Reset</a>
</body>
</html>

5. sandbox

L'attribut sandbox est utilisé pour appliquer des restrictions supplémentaires à l'étiquette <iframe>.

L'attribut sandbox peut prendre l'une des valeurs ci-dessous, ou plusieurs valeurs séparées par un espace. Si la valeur du sandbox est vide, toutes les restrictions seront appliquées.

allow-forms

Permet au FORM dans l'étiquette <iframe> de submit. Si vous utilisez l'attribut sandbox pour l'étiquette <iframe> mais sa valeur ne contient pas le mot- clé "allow-forms" la soumission de FORM dans <iframe> sera invalide.

allow-modals

Permet aux fonctions alert(), confirm(), prompt() de fonctionner dans l'étiquette <iframe>.

Boîte de dialogue Alert, Confirm, Prompt en Javascript

allow-popups

Le mot- clé allow-popups permet à l'étiquette <iframe> d'ouvrir une nouvelle fenêtre, telles que window.open(), showModalDialog(), et <a target="_blank">. Si l'étiquette <iframe> a l'attribut sandbox mais sa valeur ne comprend pas le mot-clé allow-popups c'est-à-dire vous ne pouvez pas ouvrir une nouvelle fenêtre de cette <iframe>.

allow-scripts

Permet à l'étiquette <iframe> d'exécuter des Script, mais il ne permet pas de créer des fenêtres popup.

allow-top-navigation

Permet à l'étiquette <iframe> de naviguer dans son contexte de navigation (browsing context) de niveau supérieur (top-level). Cela signifie que dans l'étiquette <iframe> vous pouvez utiliser <a target="_top">, ou window.open(URL,"_top"), ...

allow-top-navigation-by-user-activation

Permet à l'étiquette <iframe> de naviguer dans son contexte de navigation (browsing context) de niveau supérieur (top-level), cependant, la navigation doit provenir des actions de l'utilisateur.

allow-same-origin

Si l'étiquette <iframe> a les attributs sandbox mais elle ne comprend pas la valeur allow-same-origin, alor le URL de <iframe> est traitée comme provenant d'un lieu particulier et ne correspondant pas à la même politique d'origine (same-origin policy).

allow-pointer-lock

Le mot-clé allow-pointer-lock permet à <iframe> d'utiliser Pointer Lock API.

Le Pointer Lock API permet de fermer (lock) le curseur dans un lieu. Il garantit que chaque événement de la souris est toujours surveillé même si le curseur dépasse la limite de cette zone. L'API est utile pour les jeux 3D s'exécutant dans le navigateur, que l'utilisateur peut contrôler le jeu même lorsque le curseur est en dehors de la zone de jeu.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

allow-orientation-lock

allow-popups-to-escape-sandbox

allow-presentation