< Iframe >… Bonjour tout le web !

Vous souhaitez intégrer des contenus externes dans votre site Internet ? Les inlineframes (iframes) sont tout indiquées. Elles permettent d’héberger de façon élégante des contenus supplémentaires dans un document HTML. Dans le meilleur des cas, les visiteurs du site Internet n’ont pas conscience du fait que des contenus supplémentaires leur sont affichés. Comment intégrer une iframe ?

À quoi sert la balise iframe ?

En principe, chaque site Internet est constitué d’un unique document HTML. Si vous souhaitez insérer d’autres éléments, il est nécessaire d’utiliser un frame. Celui-ci permet alors d’intégrer des documents, des images ou des vidéos supplémentaires dans le document HTML. Par le passé, on utilisait pour cela des frames HTML normaux. Aujourd’hui, ils ne sont plus utilisés et on leur préfère la balise iframe. Dans une inlineframe, les autres éléments sont présentés de façon isolée. Si la taille du contenu intégré le nécessite, il est ainsi possible de faire défiler l’inlineframe séparément.

C’est pourquoi les inlineframes sont généralement utilisés pour intégrer des objets d’autres sites internet dans un site. Parmi les exemples d’iframes, on peut citer les vidéos YouTube ou les cartes de Google Maps. Les plug-ins de réseaux sociaux ou les applications spécifiques, mais aussi des documents HTML peuvent également être intégrés à l’aide d’iframes.

Structure des inlineframes

Les inlineframes sont créés dans le code HTML à l’aide de la balise iframe.

<iframe>...</iframe>

Il est nécessaire d’indiquer les attributs suivants pour remplir correctement la balise :

• src : la source du contenu à intégrer ; indiquée sous la forme d’une URL.
• width : la largeur du frame ; exprimée en pixels ou en pour cent.
• height : la hauteur du frame ; exprimée en pixels ou en pour cent.
• name : nom choisi pour le frame en question.
• sandbox : associe l’inlineframe à certaines précautions de sécurité.
• srcdoc : contient le code HTML devant être affiché dans l’iframe.

Outre ces attributs toujours d’actualité, il existe en pratique d’autres attributs qui ne sont plus supportés depuisHTML5. Pour ces fonctionnalités, il est nécessaire d’utiliser des solutions CSS.

• scrolling : sera-il possible de faire défiler l’inlineframe ?
• align : quelle est l’orientation du frame ?
• frameborder : le frame doit-il disposer d’un cadre visible ?
• longdesc : description longue du frame.
• marginwidth : largeur de la bordure à gauche et à droite.
• marginheight : largeur de la bordure en haut et en bas.
• vspace : espace vertical autour de l’iframe.

Le contenu de l’iframe ainsi qu’une partie de la mise en page peuvent donc être paramétrés exclusivement à l’aide de ces attributs. Les parenthèses de la balise ne comportent en principe aucun contenu. En pratique, cet emplacement est utilisé pour indiquer un texte alternatif. Ce contenu est lu lorsqu’un navigateur est dans l’incapacité d’afficher une iframe. Toutefois, cela ne devrait normalement plus se produire de nos jours. Cette technologie est en effet supportée par les dernières versions de tous les navigateurs courants.

Une iframe valide peut par exemple ressembler à ce qui suit :

<iframe src="http://example.org/demo.html" height="400" width="800" name="demo">
  <p>Votre navigateur ne supporte aucune iframe !</p>
</iframe>

Dans cet exemple, notre document HTML renvoie à un autre site internet. Les balises iframe permettent toutefois également d’intégrer des documents HTML enregistrés sur votre serveur Web. Il vous suffit alors d’indiquer le nom du fichier et, le cas échéant, le chemin si le document ne se situe pas dans le même dossier. Conseil

Si vous souhaitez intégrer des vidéos YouTube dans votre site Internet, vous pouvez également utiliser les inlineframes. La plateforme de vidéos vous indique le code correspondant directement sur la page de la vidéo en question.

Afin de concevoir une balise iframe adaptée, il est nécessaire d’utiliser le CSS. Mais dans la plupart des cas, seul le frame peut être mis en page. Si le contenu provient d’une source externe, vous aurez rarement la possibilité d’adapter l’affichage sur votre propre site Internet. Il est également possible d’intégrer une iframe dans un responsive Web design à l’aide de quelques astuces CSS.

Avantages et inconvénients des iframes

Les inlineframes sont utiles si vous souhaitez intégrer des éléments de sources externes sur votre propre site. Grâce aux iframes, l’utilisateur n’est pas envoyé sur l’autre domaine et peut naviguer en toute tranquillité sur votre site ce qui augmente grandement la convivialité. L’intégration peut en outre comporter des avantages techniques. Le contenu de l’iframe est chargé indépendamment du reste du site internet. L’utilisateur peut ainsi accéder aux contenus même si tous les éléments de la page ne sont pas encore chargés.

Les iframes sont toutefois de moins en moins utilisées, car elles présentent également certains inconvénients. Les éléments intégrés ne sont en effet pas traités de façon pertinente par les moteurs de recherche. Ceci peut impacter l’optimisation SEO et donc le référencement du site internet. Ce qui est nettement plus problématique, c’est toutefois le risque de sécurité lié aux iframes : lorsque l’on intègre des contenus externes, ces derniers peuvent avoir un effet négatif sur le système de l’utilisateur ou l’utilisateur lui-même. Le contenu de l’iframe peut par exemple contenir un plugin nuisible ou effectuer de l’hameçonnage sans que vous en ayez conscience en tant qu’exploitant du site Internet.

Les iframes font de plus en plus débat pour des raisons de protection des données. En effet, les inlineframes sont souvent utilisés pour les plug-ins de réseaux sociaux qui collectent des données utilisateur même si le visiteur du site internet n’interagit pas avec le bouton J’aime ou Partager et même si celui-ci n’est pas connecté au réseau correspondant.