Les iframes sont-ils considérés comme une «mauvaise pratique»? [fermé]


286

Quelque part le long de la ligne, j'ai repris l'idée que l'utilisation des iframes est une «mauvaise pratique».

Est-ce vrai? Quels sont les avantages / inconvénients de les utiliser?

Réponses:


217

Comme pour toutes les technologies, il a ses hauts et ses bas. Si vous utilisez un iframe pour contourner un site correctement développé, alors bien sûr, c'est une mauvaise pratique. Cependant, parfois un iframe est acceptable.

L'un des principaux problèmes d'un iframe concerne les signets et la navigation. Si vous l'utilisez pour simplement intégrer une page dans votre contenu, je pense que c'est bien. Voilà à quoi sert un iframe.

Cependant, j'ai également vu des iframes abusés. Il ne doit jamais être utilisé comme partie intégrante de votre site, mais comme un élément de contenu au sein d'un site.

Habituellement, si vous pouvez le faire sans iframe, c'est une meilleure option. Je suis sûr que d'autres ici peuvent avoir plus d'informations ou d'exemples plus spécifiques, tout se résume au problème que vous essayez de résoudre.

Cela dit, si vous êtes limité au HTML et n'avez pas accès à un backend comme PHP ou ASP.NET, etc., parfois un iframe est votre seule option.


23
"si vous êtes limité au HTML et n'avez pas accès à un backend comme PHP ou ASP.NET etc, parfois un iframe est votre seule option" ... ce n'est pas vrai. Vous pouvez intégrer du contenu externe dans votre page en obtenant des données via jquery ajax, puis en remplissant une div avec ces données.
developer747

53
@ developer747 - Cela ne fonctionnera pas si le contenu externe se trouve sur un autre site en raison de la même politique d'origine . Dans certains cas obscurs, le site distant peut prendre en charge JSONP ; mais probablement pas.
Peter V. Mørch du

2
J'ai l'impression que les iframes sont beaucoup moins utiles que l'ancien frameset car les iframes ne peuvent pas être redimensionnés par l'utilisateur - mais je n'utiliserais pas un frameset pour autre chose qu'un manuel car il n'existe plus en html5. Exemple: Manuel du créateur de jeux
Domino

15
Il convient de mentionner que les iframes sont actuellement le seul moyen de définir une étendue CSS imbriquée. Ils isolent le balisage interne, la mise en page, le style et Javascript * du document externe, ce qui est utile dans de nombreux cas d'utilisation et applications. * Javascript n'est pas isolé si le document interne partage l'origine avec le document externe; d'autre part, les documents d'origines différentes peuvent toujours communiquer en utilisant window.postMessage(), par exemple pour implémenter le redimensionnement automatique collaboratif des iframes.
Tobia

1
L'iFrame est mal! peut aussi aider
DanielV

75

Ce ne sont pas de mauvaises pratiques, elles ne sont qu'un autre outil et elles ajoutent de la flexibilité.

Pour une utilisation comme élément de page standard ... ils sont bons, car ils sont un moyen simple et fiable de séparer le contenu sur plusieurs pages. Surtout pour le contenu généré par l'utilisateur, il peut être utile de "sandboxer" les pages internes dans un iframebalisage si pauvre n'affecte pas la page principale. L'inconvénient est que si vous introduisez plusieurs couches de défilement (une pour le navigateur, une pour le iframe), vos utilisateurs seront frustrés. Comme l'a dit adzm, vous ne voulez pas utiliser un iframepour la navigation principale, mais considérez-les comme un texte / balisage équivalent à la façon dont une vidéo ou un autre fichier multimédia serait incorporé.

Pour les événements d'arrière-plan de script, le choix est généralement entre un contenu masqué iframeet XmlHttpRequestpour charger le contenu de la page en cours. La différence est que cela iframegénère un chargement de page, vous pouvez donc avancer et reculer dans le cache du navigateur avec la plupart des navigateurs. Notez que Google, qui utilise XmlHttpRequestpartout, utilise également iframes dans certains cas pour permettre à un utilisateur de revenir en arrière et d'avancer dans l'historique du navigateur.


11
Je pense qu'il est important de mentionner que les iframes peuvent être utilisés pour intégrer une page d'un domaine dans une page d'un autre domaine. Si la page intégrée souhaite suivre les utilisateurs avec des cookies et conserver ces informations du domaine hôte, votre seule option est d'utiliser un iframe car JS est sous le contrôle du domaine hôte.
Nicholas Leonard

@NicholasLeonard Un bon exemple est que vous pouvez les utiliser pour forcer le cache basé sur le stockage local de la page en faisant de la page d'index un script qui détecte si la sous-page se trouve dans le stockage local. Ensuite, documentez-le à partir de localstorage s'il y en a, et sinon ajoutez un iframe à cette sous-page. Dans cette sous-page, disposez d'un script pour stocker le fichier HTML externe de l'élément HTML des sous-pages dans localstorage. Une très bonne raison d'utiliser cette méthode est qu'elle vous permet d'ajouter un écran de chargement.

Je ne suis pas d'accord, mais je ne peux pas voter contre, car c'est un point de vue important.
victorf

28

C'est une «mauvaise pratique» de les utiliser sans comprendre leurs inconvénients. Le post d'Adzm les résume très bien.

D'un autre côté, gmail fait un usage intensif des iFrames en arrière-plan pour certaines de ses fonctionnalités plus cool (comme le téléchargement automatique de fichiers). Si vous êtes conscient des limites des iFrames, je ne pense pas que vous devriez ressentir de la peine à les utiliser.


18

Ayant travaillé avec eux dans de nombreuses circonstances, j'ai vraiment pensé que les iframe sont l'équivalent en programmation Web de l'instruction goto. Autrement dit, quelque chose à éviter en général. Au sein d'un site, ils peuvent être quelque peu utiles. Cependant, cross-site, ils sont presque toujours une mauvaise idée pour autre chose que le contenu le plus simple.

Considérez les possibilités ... s'ils sont utilisés pour du contenu paramétré, ils ont créé une interface. Et dans un site professionnel, cette interface nécessite un SLA et une gestion des versions - qui sont presque toujours ignorées en urgence pour se connecter.

S'ils sont utilisés pour le contenu actif - les cadres qui hébergent le script - il existe alors des restrictions de script inter-domaines (différentes). Certains peuvent être piratés, mais rarement de manière cohérente. Et si votre contenu encadré a besoin d'être interactif, il aura du mal à le faire au-delà du cadre.

S'ils sont utilisés avec du contenu sous licence, les sites participants sont gênés par la nécessité de déplacer les informations de droits hors bande entre les hôtes.

Ainsi, bien que parfois utiles dans un site, ils sont plutôt inadaptés aux mashups. Vous regardez bien mieux de vrais portails et portlets. Pire encore, ils sont un chouchou de tous les amateurs de Web - beaucoup de responsables techniques les ont retenus comme solution à de nombreux problèmes. En fait, ils créent plus.


10

D'après mon expérience, un aspect positif de l'iframe consiste à appeler des codes tiers, ce qui peut impliquer d'appeler un javascript qui appelle un a une Document.write();commande. Comme vous le savez peut-être, ces commandes ne peuvent pas être appelées de manière asynchrone en raison de la façon dont elles sont analysées (analyseur DOM, etc.). Un exemple de ceci est http://sourceforge.net/projects/phpadsnew/ J'ai utilisé des iframes pour accélérer notre site car il y a eu plusieurs appels à phpadsnews et le site attendait la réponse avant de procéder au rendu différent parties de la page. avec un iframe, j'ai pu autoriser le site à restituer d'autres parties de la page tout en appelant la Document.write()commande des phpads de manière asynchrone. Empêchement et verrouillage js.


8

Il y a certainement des utilisations pour les gens iframes. Sinon, comment mettriez-vous le widget des réseaux météorologiques sur votre page? La seule autre façon est de saisir leur XML et de l'analyser, mais bien sûr, vous avez besoin de conditions pour afficher les graphiques météorologiques pertinents ... pas vraiment la peine, mais bien plus propre si vous avez le temps.


6

Le modèle de jeu de cadres d'origine (Frameset et Frame-elements) était très mauvais du point de vue de l'utilisabilité. IFrame est une invention ultérieure qui n'a pas eu autant de problèmes que le modèle de jeu de cadres d'origine, mais elle a ses inconvénients.

Si vous autorisez l'utilisateur à naviguer à l'intérieur de l'IFrame, les liens et les signets ne fonctionneront pas comme prévu (car vous marquez l'URL de la page externe, mais pas l'URL de l'iframe).


1
doivent être en désaccord ... un commentaire général comme celui-ci n'est pas du tout nuancé.
Dawesi

5

Lorsque votre page principale se charge dans le protocole HTTP et que certaines parties de votre page doivent fonctionner dans le protocole HTTPS, iFrame peut battre jsonp haut la main.

Surtout, si votre dataType n'est pas nativement json et doit être traduit sur le serveur en json et traduit sur le client par exemple en html complexe.

Alors non - iFrame n'est pas mauvais.


5

Ils ne sont pas mauvais, mais vraiment utiles. Il y a quelque temps, j'ai eu un énorme problème où je devais intégrer mon flux Twitter et cela ne permettait tout simplement pas à md de le faire sur la même page, alors je l'ai mis sur une page différente et je l'ai mis comme un iframe.

Ils sont également bons car tous les navigateurs (et les navigateurs téléphoniques) les prennent en charge. Ils ne peuvent pas être considérés comme une mauvaise pratique, tant que vous les utilisez correctement.


4

Il convient de noter que les iframes, quelle que soit la vitesse de la connexion Internet de vos utilisateurs ou le contenu de l'iframe, entraîneront un ralentissement faible (environ 0,3 s) mais notable de la vitesse de téléchargement de votre page. Ce n'est pas quelque chose que vous verrez en le testant localement. En fait, cela est vrai pour tout élément ajouté à une page, mais les iframes semblent être pires.


1
Pourquoi? Et est-ce un moyen de charger les iframes une fois la page principale chargée?
Nicholas Leonard

3
Je ne me souviens pas pourquoi ils sont si lents; Je faisais des recherches il y a un an. Probablement parce que le navigateur crée fondamentalement un tout nouveau contexte de rendu pour chaque iframe. Quant à les empêcher de se charger jusqu'à la fin du chargement de la page, vous pouvez utiliser un iframe vide, puis définir la balise src de l'iframe une fois le chargement de la page terminé. Notez cependant que même un iframe vierge ralentira le rendu de votre page, mais pas le téléchargement, donc les choses apparaîtront toujours un peu plus lentement à vos utilisateurs.
Brian

3
Au contraire, on pourrait envisager de discuter des CDN (Content Delivery Networks) lors du référencement de la vitesse et des iFrames. Considérez que l'iFrame peut télécharger des ressources en parallèle et donc augmenter la vitesse (selon le navigateur). Voici au moins une autre référence qui correspond à ma position. developer.yahoo.com/performance/rules.html
Strixy

2
@Strixy: L'URL que vous spécifiez indique que les IFrames sont coûteuses, même lorsqu'elles sont vides. Il recommande de minimiser l'utilisation des IFrames. L'utilisation d'un CDN pour accélérer votre site est orthogonale à l'utilisation des IFrames. Un CDN peut aider à réduire le coût d'utilisation d'un IFrame. Cependant, CDN sans IFrame est meilleur que CDN et IFrame.
Brian

1
@Strixy: Si vous souhaitez télécharger des ressources en parallèle, il existe de meilleures façons de le faire. La vieille hotness est de charger tout ça via javascript. La nouvelle fonctionnalité consiste à utiliser un agent de service, qui vous permet efficacement de gérer directement la façon dont l'agent utilisateur charge, précharge et met en cache les ressources du site à l'aide de la logique côté client. L'autre nouveauté est le push http / 2, qui vous permet d'envoyer des ressources au navigateur sans attendre que le navigateur les demande. Cependant, puisque le cache http / 2 est vérifié après les autres caches de navigateur, c'est souvent un mauvais choix à cet effet.
Brian

3

J'ai vu les IFRAME appliqués avec beaucoup de succès comme un moyen facile de créer des menus contextuels dynamiques, mais le public cible de cette application Web n'était que les utilisateurs d'Internet Explorer.

Je dirais que tout dépend de vos besoins. Si vous souhaitez vous assurer que votre page fonctionne aussi bien sur tous les navigateurs, évitez les IFRAME. Si vous ciblez un public restreint et bien connu (par exemple sur l'intranet local) et que vous voyez un avantage à utiliser les IFRAME, je dirais que c'est OK de le faire.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.