iframe


Le terme "iframe" est le diminutif de "inline frame". Il désigne un élément HTML qui peut être intégré dans un cadre fixe sur un site web existant. C’est généralement le cas de bannières publicitaires ou d’autres contenus tels que des clips vidéo. Cette technique est également supportée par l’HTML5 et propose un nombre encore plus élevé de configurations possibles. Il convient de ne pas confondre la balise iframe sous forme de code HTML avec le format vidéo iFrame, développé par Apple.

Utilisation

À l’aide des balises iframe, les sites web, leurs fonctionnalités et leurs contenus peuvent être étendus sans pour autant nécessiter un travail de programmation. De nombreuses entreprises proposent également les balises iframe sous forme de widgets que d’autres personnes peuvent ensuite intégrer à leurs sites. Les vidéos YouTube intégrées constituent un parfait exemple d’utilisation des balises iframe.

Codage

Toute personne qui souhaite intégrer un Inlineframe sur son site web peut l’insérer de la même manière qu’une image source sous forme de ligne HTML dans le code source. Pour ce faire, la hauteur, l’orientation et d’autres attributs sont inscrits dans les snippets qui déterminent l’aspect esthétique et l’orientation de l’iframe. En règle générale, une balise iframe est insérée sous la forme suivante :

<iframe src="http://www.sampesite.com/iframe.html" 
 name="Name of embedded iframe" width="Width that the iframe will be output as in the frontend"
 height="Height of the iframe" align="alignment" scrolling="is a scrolling bar supposed to be inserted?"
 marginheight="Height of margin" marginwidth="Width of margin"
 frameborder="Width of frame border">
 </iframe>

Toutes les dimensions sont indiquées en pixels. Si l’iframe est orientée à gauche, tous les autres éléments de textes et éléments de la page se trouvent à sa droite.

Balises iframe et HTML5

Grâce à l’HTML5, les balises iframe peuvent être étendues à de nombreux autres éléments. Parallèlement, certains attributs ne sont plus considérés comme standard sous HTML5.

  • Autoriser l’affichage de l’iframe en mode plein écran : pour ce faire, l’attribut « allowfullscreen » est inséré dans le code d’intégration. Par exemple, si une vidéo est intégrée à l’aide d’un iframe, le film peut être adapté à la taille totale de l’écran. Cette technique est d’ores et déjà mise à disposition par la plateforme vidéo YouTube lorsque les utilisateurs récupèrent le code d’intégration.

Exemple : <iframe width="560" height="315" src="https://www.youtube.com/embed/HR3a6pnI17k" frameborder="0" allowfullscreen></iframe>

Dans ce cas, seule la vidéo est affichée en mode plein écran lorsqu’elle est en cours de visionnage. L’iframe conserve les dimensions indiquées dans le code. Si ces dimensions sont également appliquées au mode plein écran, il convient d’utiliser également JavaScript.

  • Sandboxing : les iframes liées à HTML5 peuvent être associées aux attributs de sandbox correspondants. Ainsi, le programmeur peut définir si l’iframe peut modifier les contenus du site web auxquels elle est liée. À l’origine, cette fonctionnalité était impossible, puisque les navigateurs se fondaient sur la « Same Origin Policy » et empêchaient donc que les éléments intégrés provenant d’autres serveurs puissent manipuler les contenus du site affiché. Le contournement de cette fonctionnalité de sécurité peut se révéler important lorsque le fournisseur de l’iframe a besoin de demandes de formulaires supplémentaires afin que les contenus de l’iframe puissent être utilisés, comme par exemple dans le cas d’un contrôle de l’âge. Dans cette situation, l’iframe doit être étendue à l’aide de l’attribut suivant : <iframe sandbox=" allow-same-origin“>.
  • Attributs supprimés : sous HTML5, les iframes n’utilisent plus les attributs style=border ou scrolling de manière standard, puisque les cadres ne sont plus actualisés pour les iframes et qu’ils perturbent une mise en page moderne. L’orientation à l’aide de l’attribut align n’est plus supportée non plus. La balise noframe disparaît elle aussi sous HTML5.

Balises iframe et référencement

Les moteurs de recherche peuvent certes reconnaître les iframes, mais les robots d'exploration ne prennent cependant pas en compte les contenus des Inlineframes et remontent seulement à l’origine des liens qu’ils contiennent. Il peut également arriver que certains navigateurs ainsi que quelques CMS ne puissent pas afficher correctement un iframe. Par conséquent, il est recommandé d’éviter une utilisation excessive des iframes au profit d’une meilleure utilisabilité et d’une meilleure accessibilité. Le chargement des iframes peut par exemple être empêché par l’installation d’extensions d’un navigateur, comme par exemple NoScript de Firefox.

Lien web

iframe, developer.mozilla.org, ouvert le 28.09.2017