Table des matières

Le Tutoriel de HTML IFrame

View more Tutorials:

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 :
  • TODO Link!
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

View more Tutorials: