IFRAME

Syntaxe

Paramètres

Description

Cette balise permet de créer une sous-fenêtre intégrée à la fenêtre. La balise IFRAME est souvent utilisée pour fusionner une page Web à l'intérieur d'une page Web existante, dans d'autres cas pour l'inclusion d'une publicité ou enfin dans les applications Web afin de donner un aperçu du contenu.

Remarques

• Lenteur de redimensionnement : Si vous souhaitez effectuer des redimensionnements de la taille de vos balises IFRAME dans votre page Web, vous devrez songez à utiliser la propriété de feuille de style «pointer-events:» disponible à partir de quelques spécifications CSS3 et pleinement à partir du CSS4.
• Il ait déconseillé d'utiliser les services de JavaScript de Google Analytics (ga.js) avec cette balise, car de nombreuses incompatibilités peuvent survenir.
• Les attributs «rel="nofollow"» sont uniquement supporté par la balise «A». De plus, Googlebot ne bloc pas la lecture du contenu par cette méthode. Si vous êtes confronté à cette situation, il faudra utiliser le fichier «robots.txt» et d'utiliser une balise «META» comme ceci : «<meta name="robots" content="noindex,nofollow">» (laquelle interdira la page au complet et non pas uniquement le IFRAME). Si le JavaScript est supporté par le navigateur, vous pouvez aussi écrire votre IFRAME avec une instruction dans le genre «<script>document.write('<iframe .. >')</script>»
• Page HTTPS : Si vous êtes dans une page HTTPS, votre page indiqué dans un IFRAME doit aussi être une page avec un lien HTTPS car sinon il affichera une page blanche. De plus, le serveur du nom de domaine cible doit retourner une identificateur comme ceci si le serveur Web est Apache :

Header set Access-Control-Allow-Origin "*"

Sinon, il retournera un message d'erreur «Refused to display '...' in a frame because it set 'X-Frame-Options' to 'sameorigin'».

• Une URL vers un HTTPS dans une page HTTP est une très mauvaise pratique, car il rend difficile la demande d'informations détaillée sur cette page (en particulier les informations de sécurité). Ainsi, vous empêchez le navigateur d'afficher les symboles de sécurité habituelle : le verrou, la barre d'adresse du site,... De plus, cette pratique n'est pas recommandée par «3-D Secure» pour les transactions électroniques. Il faut donc avoir la page au complet en HTTPS pour résoudre le problème et idéalement ne pas avoir de IFRAME.
• Si vous souhaitez vous connecter avec un utilisateur particulier dans un IFRAME, soit un «Basic Authentication», vous devrez écrire un code source ressemblant à ceci :
1. <iframe src="http://username:password@www.gladir.com/..."></iframe>

Cependant, comme le mentionne la base de connaissance Microsoft kb834489, IE ne prend pas en charge par défaut ce genre de fonctionnalité pour des raisons de sécurité.

• Conflit : Dans la plupart des navigateurs, le paramètre «style» est prioritaire sur le paramètre «class» ou «id». Ainsi, si vous définissez aux deux endroits, des valeurs différentes, par exemple «style="color:red;"» et «color:green» dans la classe, c'est le paramètre «style» avec son «color:red» qui sera utilisé par le navigateur Web. Il est à noter qu'il est préférable de ne pas mettre des informations contradictoires comme celle-ci (deux paramètres identiques avec des valeurs différentes) car le résultat peut malgré tout demeurer imprévisible.
• Appliquer des CSS dans le contenu d'un IFRAME : Pour des raisons de sécurité, le IFRAME doit provenir du même nom de domaine que son parent si vous souhaitez modifier son contenu. Uniquement s'il s'agit du même nom de domaine, il est possible de le modifier à l'aide d'un code JavaScript ressemblant à ceci :
1. <script>
2. var cssLink = document.createElement("link") 
3. cssLink.href = "style.css"; 
4. cssLink.rel = "stylesheet"; 
5. cssLink.type = "text/css"; 
6. frames['frame1'].document.body.appendChild(cssLink);
7. </script>

Il est aussi possible d'utiliser une technique similaire avec jQuery :

1. <script>
2.  $("iframe").load(function() {
3.    var frameContents;
4.    frameContents = $("#iframeId").contents(); 
5.    frameContents.find("#elementId").css("color","#fff");
6.  }
7. </script>


• IFRAME dynamique : Si vous souhaitez créer dynamiquement un IFRAME, vous devrez utilisez un code ressemblant à ceci en JavaScript :
1. <html>
2. <body>
3. <div id="insereici"></div>
4. <script>
5. var iframe = document.createElement('iframe');
6. iframe.width="100%";
7. var html = '<html><body>Ceci est dans un IFRAME</body></html>';
8. document.getElementById("insereici").appendChild(iframe);
9. iframe.contentWindow.document.open('text/html', 'replace');
10. iframe.contentWindow.document.write(html);
11. iframe.contentWindow.document.close();
12. </script>
13. </body>
14. </html>

Exemple

Il n'est pas possible de montrer un exemple sans avoir au moins 2 fichiers, ainsi voici tout d'abord le contenu du fichier «mainiframe.html» :

et le fichier «childiframe.htm» étant appeler par le premier fichier :

on obtiendra le résultat suivant :

Références

HTML - The Definitive Guide, 3rd Edition, Edition O'Reilly, Chuck Musciano, Bill Kennedy, 1998, ISBN: 1-56592-492-4, page 513 à 514
La Bible Micro Application HTML & Développement Web, Edition Micro Application, Stefan Munz, Wolfgang Nefzger, 2003, ISBN: 2-7429-2898-7, page 614