iFrame

Un iframe (inline frame : cadre, encadrement, carcasse en ligne) est un espace défini dans une page Web. Dans cet espace réservé on va pouvoir afficher une autre page Web provenant de notre site ou de n'importe quel autre site sur le réseau. Le W3C appelle cet espace un contexte de navigation et plus particuliérement contexte de navigation imbriqué (nested browsing context. En simplifiant c'est comme si on avait une nouvelle fenêtre (onglet) du navigateur à l'intérieur de la fenêtre (onglet) de la page principale. Cette fenêtre n'a pas de barre de menu ou de barre d'URL, mais elle aura éventuellement des barres de défilement. Elle a aussi son propre historique de navigation.

Le principe des iframes est utilisé par exemple pour embarquer des publicités sur un site, inclure des "widgets" provenant d'autres sites (météo, cours de la bourse, mur facebook, tweets, vidéos youtube, google map, etc) ou encore émuler un système d'onglets.

Ce qui est intéressant avec les iframes c'est que le temps de chargement et d'affichage de leur contenu ne bloque pas l'affichage de la page principale. Le navigateur fait d'abord le rendu de la page principale, réserve un espace pour l'affichage de la page embarquée dans l'iframe et quand il a fini le rendu principale s'occcupe du rendu du contenu de l'iframe.

Les exemples suivants nécessitent une connexion Internet car ils affichent des éléments se trouvant sur le réseau. Ce sont des widgets offerts par différents sites que l'on peut intégrer dans nos propres pages.

Ce dernier exemple embarque une page twitter. Twitter ne fournit pas le code HTML pour intégrer un iframe mais un lien HTML et du code JavaScript. C'est l'exécution de ce code qui au final générera un iframe.

L'élément <iframe>

On utilise l'élément iframe pour embarquer dans la page web en cours une autre page. La balise doit avoir une balise de fermeture </iframe> bien que le contenu de l'élément ne soit pas dans le fichier HTML.

Dimensions

L'élément iframe créant un espace d'affichage dans une page, il faut en définir les dimensions avec les attributs width et height. La valeur de ces attributs est un nombre de pixels, sans que l'unité ne soit précisée.

Il n'est pas possible que les dimensions d'un iframe s'adaptent automatiquement à leur contenu.
Si le contenu de la page embarquée est trop petit pour remplir complétement l'iframe, un espace vide sera généré.
Si le contenu de la page embarquée est trop grand pour tenir dans l'espace de l'iframe, une barre de défilement verticale et/ou une barre de défilement horizontale seront automatiquement créée par le navigateur pour que le contenu puisse être vu malgré tout.

L'attribut src

Comme pour tous les éléments embarqués, il faut aussi définir la localisation de la ressource sur le réseau. On utilise l'attribut src dont la valeur est l'URL de la ressource.
Bien sûr si la ressource est située dans un des dossiers de votre site, il faut utiliser une URL relative pour faire le lien.

Je vous rappelle qu'il convient d'être prudent avec les caractères utilisés pour les noms des fichiers et des dossiers qui les contiennent et je vous conseille (à nouveau) d'adopter les règles suivantes :

les noms de fichier et de dossiers étant sensibles à la casse, utilisez uniquement des minuscules,
utilisez uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9), le caractère -, le caractère _ et le caractère .
n'utilisez jamais d'espaces.

En testant l'exemple, on voit que le navigateur a automatiquement placé une barre de défilement verticale pour que l'on puisse faire défiler la page embarquée et la consulter en entier.
Une barre de défilement horizontal aurait aussi été ajoutée automatiquement si cela avait été nécessaire.

iframe est un élément en ligne. Si vous agrandissez la fenêtre de test, vous verrez que le texte entoure l'iframe. Pour qu'un iframe soit considéré comme un bloc il faut le placer dans un élément p ou div, ou l'entourer par des éléments de bloc.

On peut avoir autant d'élements iframe que l'on veut dans une page.

Bordure

Dans les versions précédentes de HTML, des attributs permettaient de gérer la bordure entourant un iframe. Bien que ces attributs soient toujours supportés par les navigateurs, il convient maintenant d'utiliser des propriétés de style CSS pour agir sur l'aspect des iframes.

Par défaut les iframes sont entourés par une bordure de 1 ou 2 pixels. On peut gérer cette bordure avec plusieurs propriétés CSS comme border, border-style, border-color, etc.

L'exemple suivant montre comment enlever la bordure autour d'un iframe, ou comment changer sa couleur.

Barres de défilement

Comme on l'a vu dans les exemples précédents, le navigateur place automatiquement une barre de défilement verticale pour que l'on puisse faire défiler la page embarquée et la consulter en entier.

Avant HTML5, l'attribut scrolling permettait de gérer ces barres de défilement, mais cet attribut est déprécié et n'a pas été remplacé. Pour le moment, la propriété de style CSS overflow qui devrait gérer cet affichage n'est pas pris en compte pour les iframes par les navigateurs.
On continue donc d'utiliser l'attribut scrolling avec les valeurs :

no : aucune barre de défilement ne sera présente, et ce même si le contenu embarqué ne tient pas dans l'espace de l'iframe ;
yes : dans les versions anciennes de navigateurs, une barre de défilement verticale (et éventuellement une barre de défilement horizontale) seront présentes, et ce même si elles sont inutiles. Dans les nouvelles versions cette valeur réagit comme auto ;
auto : le navigateur gère automatiquement les barres de défilement (comportement par défaut).

Liens et iframes

Avec l'attribut target de l'élément a on va pouvoir faire un lien qui va s'afficher dans un iframe.

Pour que ça fonctionne, il faut que l'élément iframe soit nommé en utilisant un attribut name ou un attribut id. La valeur de cet attribut sera utilisée comme valeur de l'attribut target du lien.

Liens vers un iframe

Complétez le code HTML pour obtenir le résultat ci-dessous.

Quand on clique sur les petites images en haut de la page, une image correspondante de grandes dimensions s'affiche dans l'iframe situé sous les petites images.

L'iframe a pour dimensions 816 pixels sur 600. Il est entouré par une bordure noir de 1 pixel d'épaisseur.

Les images se trouvent dans l'arborescence ci-contre.

Pour simplifier, ne donnez pas les dimensions des images dans le code HTML.

Nom	Dossier	Correspondance	Dossier
`affiche_150.jpg`	`lord_rings`	`affiche_800.jpg`	`images` dans `lord_rings`
`lego_150.jpg`	`star_wars`	`lego_800.jpg`	`images` dans `star_wars`
`family_150.jpg`	`star_wars`	`family_800.jpg`	`images` dans `star_wars`

Code à compléter

Une solution possible

Liens vers des iframes

Réalisez des ensembles de liens et d'iframes pour obtenir le résultat ci-contre.

Quand on clique sur les images, une page HTML descriptive du personnage s'affiche dans l'iframe situé sous le personnage.

Les pages sur lesquelles pointent les liens se trouvent dans l'arborescence suivante :

Les pages HTML concernant "Le Seigneur des Anneaux" se trouvent dans le dossier lord_rings.
Les images concernant "Le Seigneur des Anneaux" se trouvent dans le dossier lord_rings/images.

Les pages HTML concernant "La Guerre des Etoiles" se trouvent dans le dossier star_wars.
Les images concernant "La Guerre des Etoiles" se trouvent dans le dossier star_wars/images.

Les pages s'appellent du nom du personnage, tout en minuscules, et les espaces éventuels remplacés par un _ (underscore). L'extension du fichier est .html

Les images s'appellent du nom du personnage, tout en minuscules, et les espaces éventuels remplacés par un _ (underscore). L'extension du fichier est .png. Pour simplifier ne donnez pas les dimensions des images.

Par ordre d'apparition : Gandalf, Frodon, Gimli, Sauron, Saroumane, Gollum, Yoda, Luke Skywalker, Chewbacca, Palpatine, Dark vador, Comte Dooku.

Code à compléter

Une solution possible

Exercice : liens vers des iframes

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Liens vers des iframes</title>
	</head>
	<body>
		<h3>Anneaux ou Etoiles ?</h3>
		<p>
			<a href="../exemples/lord_rings/gandalf.html"
			   target="lord_gentils">
				<img src="../exemples/lord_rings/images/gandalf.png"></a>
			<a href="../exemples/lord_rings/frodon.html"
			   target="lord_gentils">
				<img src="../exemples/lord_rings/images/frodon.png"></a>
			<a href="../exemples/lord_rings/gimli.html"
			   target="lord_gentils">
		<img src="../exemples/lord_rings/images/gimli.png"></a>
		</p>
		<iframe width="350" height="150" name="lord_gentils">
		</iframe>
		
		<p>
			<a href="../exemples/lord_rings/sauron.html"
			   target="lord_mechants">
				<img src="../exemples/lord_rings/images/sauron.png"></a>
			<a href="../exemples/lord_rings/saroumane.html"
		   		target="lord_mechants">
				<img src="../exemples/lord_rings/images/saroumane.png"></a>
			<a href="../exemples/lord_rings/gollum.html"
			   target="lord_mechants">
				<img src="../exemples/lord_rings/images/gollum.png"></a>
		</p>
		<iframe width="350" height="150" name="lord_mechants">
		</iframe>

</body>
</html>

Une page dans un iframe peut aussi donner comme cible d'un de ses liens la page conteneur. La valeur de l'attribut target doit être le mot-clé _parent.

Code HTML de la page affichée dans l'iframe de l'exemple suivant :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Lien vers le parent</title>
	</head>
	<body>
	
	<p>Ce lien va ouvrir la 
		<a href="gandalf.html" target="_parent">
		page gandalf.html</a> dans la fenêtre principale.
	</p>

	</body>
</html>

Protection

Embarquer une page étrangère dans notre site peut s'avèrer dangereux car la page embarquée aura accès a l'environnement de la page parent : les cookies, le stockage local, les scripts, les éléments HTML, etc.

L'attribut sandbox permet de restreindre les droits des pages embarquées. sandbox travaille sur le principe de la liste blanche : d'abord on enlève tous les droits, puis on accord seulement les droits qui semblent nécessaires.

Si l'attribut sandbox est absent de la balise d'ouverture de l'élément iframe, la page embarquée a tous les droits. Si c'est une page de votre site, c'est normal, par contre si c'est une page d'un autre site c'est peut-être trop.

Si la valeur de l'attribut sandbox est une valeur vide (<iframe sandbox="" src="http/site.com/page.html">) on enlève le maximum de droits :

les scripts JavaScript de la page embarquée ne seront pas exécutés,
la page embarquée n'aura accès à aucun cookie ou moyens de stockage local (DOM, Indexed DB, etc.),
la page embarquée ne pourra pas créer de nouvelles fenêtres (par exemple avec des liens target="_blank",
les formulaires de la page embarquée ne pourront pas être envoyés,
la page embarquée peut seulement naviguer dans son contexte de navigation (les liens avec target="_parent" ou target="_top" ne fonctionneront pas,
tous les éléments avec des événements automatiques sont bloqués (par exemple une vidéo avec autoplay,

Pour accorder des droits à la page embarquée, on va donner comme valeur à l'attribut sandbox une liste de mots-clés :

allow-forms : les formulaires peuvent être envoyés
allow-popups : des nouvelles fenêtres peuvent être créées (avec target ou par JavaScript),
allow-pointer-lock : autorise le verrouillage du curseur de la souris,
allow-same-origin : donne accès à la page embarquée aux objets qui ont la même origine (domaine) qu'elle,
allow-scripts : autorise l'exécution du code JavaScript et l'exécution automatique des éléments,
allow-top-navigation : autorise la page embarquée à naviguer dans les contextes de navigation suppérieurs.