iframe, pour un contenu dynamique ou isolé de la page
Cette balise faisait déjà partie de la spécification HTML 4 mais est développée dans la version 5 alors que les frames, et donc la balise frameset, sont devenus obsolètes.
Iframe signifie "inline frame", en français cadre en ligne, il s'insère dans le flot du contenu de la page.
On utilisait déjà l'iframe pour créer du contenu dynamique avant l'apparition d'Ajax: en assignant un contenu avec JavaScript, on pouvait modifier la page très facilement après son chargement. Mais Ajax permet une interaction plus complète avec le serveur.
L'iframe a cependant d'autres utilisations. Pour le webmaster, c'est un moyen de présenter du contenu aux visiteurs qui ne sera pas visible aux moteurs de recherche. Si par exemple, on veut afficher un même texte dans toutes les pages, sans déclencher des signaux de contenu dupliqué chez les robots qui deviennent de plus en plus sensibles à ce sujet, on doit le placer dans une iframe.
Indépendamment des moteurs de recherche les iframes permettent d'insérer du contenu plus facilement qu'avec Ajax qui requiert des fonctions XMLHttpRequest. Il suffit d'assigner l'attribut src, dans le code initial, ou dynamiquement avec JavaScript.
Ajax reste indispensable pour charger une page HTML créée sur le serveur, en fonction de paramètres fournis par l'utilisateur. Mais on peut toujours éventuellement inclure cette page dans une iframe.
Utilisation d'iframe
On définit une iframe en assignant l'URL d'une page contenant le contenu à inclure à l'attribut src. On définit ses dimensions par les attributs weight et height ou par une feuille de style. Exemple:
Code source:
<iframe src="iframe-demo.html"
width="320"
height="200"
style="border:2px solid orange">
</iframe> Les nouveaux attributs dans HTML 5
Outre les attributs génériques weight, height pour définir les dimensions, cette balise a aussi des attributs originaux.
Avec HTML 5 on peut placer le contenu d'une iframe dans une boite à sable, autrement dit l'isoler complètement du reste de la page.
Pour ce faire, trois nouveaux attributs ont été ajoutés (pas forcément compatibles avec tout navigateur):
- sandbox
- Permet d'isoler le contenu inséré de la page, et éventuellement définir des permissions.
allow-same-origin: indique que la page liée est considérée comme ayant la même origine que la page qui l'affiche.
allow-top-navigation: permet aux scripts dans le contenu inclut d'accéder au DOM de la page qui le contient.
allow-forms: autorise la soumission des formulaires dans le contenu inséré.
allow-scripts: permet d'exécuter les scripts dans le contenu, lors de l'affichage.
Si aucune valeur n'est attribuée à l'attribut sandox, la protection est maximale et rien de tout ceci ne sera accepté. La page sera sécurisée. - seamless
- Quand cet attribut est ajouté (il peut l'être ou être supprimé dynamiquement), le contenu est traité comme s'il faisait partie de la page courante.
Ainsi, s'il contient des liens et qu'on clique sur un lien, la page remplacera la page courante. Sinon elle remplacera le contenu de l'iframe. - srcdoc
- Indique un contenu à insérer directement dans l'iframe.
Certains attributs faisaient partie de la spécification HTML 4: marginweight et marginheight pour choisir l'épaisseur de la marge autour du cadre, frameborder qui vaut 1 ou 0 selon que l'on veut une bordure ou non, scrolling qui vaut auto, yes ou no, selon que l'on veuille des barres de défilement ou non.
Ils sont en fait inutiles car ce sont des propriétés de présentation que l'on doit plutôt définir dans la feuille de style ou dans l'attribut <style>, et ils sont donc supprimés dans HTML 5.
Voir aussi
Référence