devstory

Le Tutoriel de HTML IFrame

  1. HTML iframe
  2. width, height
  3. srcdoc
  4. name
  5. 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 :

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>.
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.
allow-orientation-lock
allow-popups-to-escape-sandbox
allow-presentation