Comment et quand utiliser Iframes (Inline Frames)

Les cadres en ligne, couramment appelés "iframes", sont le seul type de cadre autorisé dans HTML5. Ces cadres sont essentiellement une section de votre page que vous "découpez". Dans l'espace que vous avez coupé de la page, vous pouvez ensuite insérer une page Web externe. En substance, un iframe est une autre fenêtre de navigateur située directement dans votre page Web. Vous voyez les iframes couramment utilisés sur les sites Web qui doivent inclure du contenu externe, tel qu'une carte Google ou une vidéo de YouTube. Ces deux sites Web populaires utilisent des iframes dans leur code d'intégration.

Comment utiliser l'élément IFRAME

L'élément utilise les éléments globaux HTML5 ainsi que plusieurs autres éléments. Quatre sont également des attributs en HTML 4.01:

• -L'URL de la source du cadre
• -La hauteur de la fenêtre
• -La largeur de la fenêtre
• -Le nom de la fenêtre

Et trois sont nouveaux dans HTML5:

• srcdoc-Le HTML pour la source du cadre. Cet attribut a priorité sur toute URL de la liste. src attribut
• bac à sable- une liste de fonctionnalités qui devraient être autorisées ou interdites dans la fenêtre de cadre
• sans couture- indique à l'agent utilisateur que l'iframe doit être restitué comme s'il faisait partie du document parent de manière invisible

Pour construire un simple iframe, vous définissez l'URL source, ainsi que la largeur et la hauteur:

Notez que vous pouvez choisir de ne pas utiliser de valeurs en pixels pour les paramètres de votre iframe, mais d'utiliser plutôt un pourcentage. Si vous créez un site Web réactif dont la taille doit changer avec différentes tailles d'écran, ces pourcentages seront importants.

Certains attributs sont également valides dans HTML 4.01 mais obsolètes dans HTML5. Étant donné que la plupart des sites Web actuels utilisent HTML5 +, ces attributs sont ceux que vous ne voudrez pas utiliser (mais que vous pouvez voir dans certains documents existants).

• -À la place, utilisez un UNE élément à relier à une description
• -À la place, utilisez le CSS flotte propriété
• permettre la transparence-À la place, utilisez le CSS Contexte propriété pour rendre l'ifram transparent
• - au lieu d'utiliser le frontière Propriété CSS
• marge de hauteur-À la place, utilisez le CSS marge propriété
• marginwidth-À la place, utilisez le CSS marge propriété
• -À la place, utilisez le CSS débordement propriété

Prise en charge du navigateur IFRAME

le IFRAME element est supporté par tous les navigateurs modernes:

• Android
• Chrome
• Firefox
• Internet Explorer 2+
• iOS / Safari Mobile
• Netscape 7+
• Opera 3+
• Safari

Si aucun numéro de version ne figure dans la liste ci-dessus, c'est que toutes les versions de ce navigateur le prennent en charge.

Une chose à prendre en compte est que, bien que tous les navigateurs supportent la IFRAME élément, la prise en charge de certaines fonctionnalités HTML5 est encore limitée.

• En utilisant débordement désactiver le défilement n'est pas fiable. Si vous ne voulez pas de barres de défilement sur vos iframes, vous devez continuer à utiliser le défilement attribut.
• le srcdoc, bac à sable, et sans couture Les attributs ne sont pris en charge par aucun navigateur pour le moment.

Liaison avec les iframes

Quand vous donnez à votre iframes un prénom ou identifiant vous pouvez ensuite pointer vos liens vers ce cadre avec l'attribut sur le UNE élément. Ensuite, lorsqu'un utilisateur clique sur le lien, celui-ci s'ouvre dans l'iframe référencé plutôt que dans la fenêtre actuelle.

Essayez vous-même. Tapez le texte suivant dans une page Web:

id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">

C'est mon iframe

Lorsque vous cliquez sur ce lien, un nouveau document s'ouvrira dans la fenêtre ci-dessus.

Si le document ouvert dans le IFRAME Si aucune cible n'est définie, tous ces liens s'ouvriront dans le même iframe que le document parent.

Vous pouvez utiliser cette fonctionnalité pour créer des liens dans un IFRAME changer le contenu d'un autre IFRAME sur la même page.

IFrames et sécurité

le IFRAME Cet élément, en soi, n’est pas un risque pour la sécurité de vos lecteurs. Malheureusement, les iframes ont mauvaise réputation, car ils peuvent être utilisés par des sites Web malveillants pour inclure du contenu susceptible d'infecter l'ordinateur d'un visiteur sans que celui-ci ne le voie sur la page. Ceci est fait en ayant des liens pointant vers l'invisible IFRAME et ces scripts déclenchent un code malveillant. L'utilisateur clique sur le lien et pense que celui-ci est rompu car rien ne semblait se produire, mais un script a été déclenché là où il ne pouvait pas le voir.

Il existe également des virus informatiques qui vont injecter un invisible IFRAME dans vos pages Web, transformant efficacement votre site Web en un botnet. Ils peuvent le faire par injection SQL et autres attaques.

La chose à retenir lors de l'inclusion d'un IFRAME sur votre page Web, vos utilisateurs sont aussi sûrs que le contenu de tous les sites auxquels vous vous connectez. Si vous avez des raisons de penser qu'un site n'est pas digne de confiance, ne créez aucun lien vers celui-ci et ne l'incluez certainement pas dans son contenu. IFRAME. La création de liens vers vos propres pages au sein d'iframes ne pose toutefois pas de risque de sécurité pour vous ou vos utilisateurs.

Article original de Jennifer Krynin. Edité le 07/11/16 par Jeremy Girard