Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

PayPal met au point « Zoid », une bibliothèque JavaScript, pour améliorer l'élément HTML « iframe »
En lui ajoutant des fonctionnalités

Le , par Bill Fassinou

1.7KPARTAGES

4  0 
L’élément HTML « iframe » est jusqu'à aujourd'hui l’un des composants les plus utilisés pour afficher du contenu provenant d’un autre site tiers sur sa propre page Web. Il permet d'intégrer un document Web entier dans un autre, comme s'il s'agissait d'un élément « img » ou d'un autre élément de ce type. Mais, il semblerait que les iframes, même s’ils sont régulièrement utilisés aujourd'hui, ne jouissent plus de la même popularité qu’à leur apparition dans la programmation Web. L’on dénote plusieurs limites aux iframes et Google a même proposé une alternative.

L'élément HTML « iframe » définit un contexte de navigation imbriqué qui permet d'obtenir une page HTML intégrée dans la page courante. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur. Chaque contexte de navigation possède son propre historique et son propre document actif. Chaque contexte de navigation créé par un élément iframe représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page.

Les iframes ne font plus l'unanimité au sein des développeurs

Par exemple, en navigant sur une page web, un internaute peut voir s’afficher un élément correspondant à un autre site, mais intégré à la page sur laquelle il est. L’un des gros avantages d’un iframe est de pouvoir intégrer un contenu dans une page, tout en permettant que ce contenu qui vient d’un autre site conserve ses propres scripts et styles. Cela permet d’avoir un contenu indépendant de la page dans laquelle il est inséré. Interagir avec l’élément en iframe ne devrait donc pas avoir d’impacts sur la page Web. Il est aussi recommandé que la balise iframe soit utilisée essentiellement pour ce genre de contenu.

Néanmoins, en théorie, bien que l’on puisse ajouter autant d'iframe que possible sur autant de niveaux d'imbrication que voulus, il faut garder à l'esprit que cela peut nuire aux performances d’un site Web. Toutefois, depuis quelques années, l’élément iframe semble « s'être démodé » et a perdu l’engouement de nombreux développeurs de la communauté et même des entreprises comme Google. L’on cite aujourd’hui plusieurs inconvénients quant à l’utilisation des iframe. Certains estiment par exemple que leur chargement est lent et qu'ils créent ainsi une mauvaise expérience utilisateur.

Google a proposé <portals>, une alternative à la balise <iframe>

D’autres développeurs citent plusieurs autres inconvénients. Dans ce schéma, Google a proposé à la conférence I/O de cette année l’utilisation de nouvelles balises qu'il nomme <portal> pour remplacer les <iframe>. Selon Google, il s’agit d’une nouvelle API de plateforme Web qui vise à faciliter le chargement et la navigation sur les pages Web en rationalisant l'expérience de navigation des utilisateurs sur votre site. « Nous espérons que l’API Portals pourra répondre à certaines de ces préoccupations tout en offrant une autre fonctionnalité puissante aux développeurs Web », a écrit Google dans un document explicatif du projet.

D’après la description faite par Google de la technologie, l’API Portals a été construite pour permettre une navigation transparente entre sites ou pages. En particulier, cela permettra à une page d'afficher une autre page en tant qu'encart et d'effectuer une transition en douceur entre un état encart et un état parcouru. En d’autres termes, Google explique que l’objectif de « Portails » est d’améliorer la navigation en offrant des transitions plus rapides et plus fluides sur le Web, tout en préservant la confidentialité de l’utilisateur. L’utilisation de l’API Portals se fera à travers de nouvelles balises <portal>.

Google expert que ces balises pourront remplacer à l’avenir les balises <iframe> qui représentent aujourd’hui le standard pour incorporer du contenu ou imbriquer des pages Web les unes dans les autres. « Avant les balises <portals>, nous aurions pu rendre une autre page en utilisant un <iframe>. Nous aurions également pu ajouter des animations pour déplacer des cadres sur des pages données. Mais avec une balise <iframe>, vous n'avez pas la possibilité de naviguer dans son contenu. Les balises <portals> comblent cet écart, ce qui permet des cas d'utilisation intéressants », a déclaré Google. Pour le géant de la recherche, les balises <iframe> souffrent d’énormes inconvénients.

PayPal met au point une bibliothèque pour améliorer les iframes


PayPal, le service de paiement en ligne, partage le même avis que Google. Néanmoins, PayPal ne souhaite pas remplacer l’élément HTML iframe. L’entreprise désire plutôt l’améliorer. De quelle façon entend-elle procéder ? Les ingénieurs de PayPal ont mis au point « Zoid », une bibliothèque JavaScript graphique, afin de compléter les performances des iframe. Selon Daniel Brain, ingénieur chez PayPal, Zoid ajoute des fonctionnalités intéressantes aux iframes dont en voici quelques-unes. Zoid permet :

  • d’afficher un iframe ou un popup à partir d’un domaine et de transmettre des objets et des fonctions ;
  • d’ajouter un prérendu pour éviter la perception d'un rendu lent : Zoid fournit également des mécanismes de prérendus de HTML et de CSS dans des iframes et des popups, de sorte que vous puissiez au moins rendre un spinner de chargement, ou peut-être quelque chose de plus avancé, pendant que la nouvelle fenêtre charge son contenu ;
  • de naviguer de l'intérieur d'un iframe vers d'autres parties de la page Web qui l’héberge (un peu à la manière de l'API Portal de Google) ;
  • d'afficher plus rapidement vos composants créés avec React, Vue.js ou Angular : Zoid n'est pas conçu pour construire des composants pour votre propre site. Pour cela, vous devez utiliser des bibliothèques de composants natifs comme React. Zoid fait en sorte que ces composants s'affichent rapidement sur votre page ;
  • de partager des fonctionnalités avec d'autres sites, avec lesquels vous ne pouvez pas partager des composants JavaScript natifs ;
  • etc.

D’après PayPal, Zoid n'est pas conçu pour remplacer des bibliothèques comme React, qui sont responsables du rendu des composants du même domaine. Les ingénieurs de l’entreprise ont expliqué qu’en fait, le seul véritable rendu que fait Zoid, c'est les iframes et les popups. Le reste dépend de vous. Vous pouvez construire vos composants à l'aide de n'importe quel framework, bibliothèque ou motif de votre choix, puis utiliser Zoid pour exposer vos composants entre domaines. Il devrait bien fonctionner avec n'importe quel autre framework.

Toutefois, les ingénieurs de PayPal sont bien conscients qu'il y a des insuffisances. Selon les explications de Daniel Brain, il y a certains problèmes qu'une simple bibliothèque JavaScript ne peut pas résoudre. Et vous, quelle méthode ou quel remède préconisez-vous pour résoudre les différents problèmes que soulèvent les iframe ? Faut-il suivre Google en remplaçant les iframe ou faut-il encore essayer de les améliorer comme les ingénieurs de PayPal le suggèrent ?

Source : Zoid

Et vous ?

Quelles sont les insuffisances des iframes que vous connaissez ?
Faut-il suivre Google en trouvant simplement d'autres alternatives aux iframes ?
Comme PayPal, pensez-vous qu'il faille améliorer les iframes ?
Que pensez-vous de Zoid ?

Voir aussi

Google lance <portal> pour remplacer <iframe>, créant ainsi un nouveau système de navigation de page Web pour Chrome

Le langage JavaScript est-il responsable de la lenteur des sites Web de nos jours ? Oui, selon un expert

Faut-il migrer de JavaScript vers PureScript ? Oui, car JavaScript serait très limité pour la programmation fonctionnelle, selon Alex Kelley

Facebook publie en open source Hermes, un moteur JavaScript léger, optimisé pour exécuter React Native sur Android

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de L33tige
Membre habitué https://www.developpez.com
Le 21/08/2019 à 11:56
Citation Envoyé par BenaeSan Voir le message
L'un des gros soucis de l'utilisation d'une iframe, c'est que les navigateurs bloque les requêtes CORS, ce qui limite déjà vachement sont utilisation!!
Il les bloquent seulement si la réponse ne comporte pas le header permettant le crossOrigin
3  0 
Avatar de mh-cbon
Membre extrêmement actif https://www.developpez.com
Le 21/08/2019 à 8:17
il vous faudra pratiquer le couple html/css sans javascript pour apprécier les possibilités offertes par cette balise.

Je regrette d'ailleurs que les concepteurs de navigateurs aient complètement délaissés cet aspect du développement HTML qui nécessite encore quelques efforts pour le présenter comme une alternative viable face à toute la débauche d'UX permise par le JS.

On peut déjà citer quelques avantages à cette pratique. Plus rapide à afficher, plus léger, plus sécurisé, meilleur support natif cross platform.
De plus avec le CSS on peut déjà réaliser tout un tas d'animation et autres transitions pour rendre l'ux plus agréable, reste alors le manque de finition de la norme HTML pour des cas d'utilisation devenus standard depuis l'avènement de JS.
Les possibilités qui nous sont offertes à l'heure actuelle ne permettent que l'implémentation de solutions alambiquées et difficile à maintenir.
1  0 
Avatar de Steinvikel
Membre chevronné https://www.developpez.com
Le 21/08/2019 à 1:01
<iframe> ...c'est pas aussi l'élément qui sert à pouvoir recharger seulement la balise plutôt que toute la page ?
0  0 
Avatar de BenaeSan
Membre du Club https://www.developpez.com
Le 21/08/2019 à 9:44
L'un des gros soucis de l'utilisation d'une iframe, c'est que les navigateurs bloque les requêtes CORS, ce qui limite déjà vachement sont utilisation!!
1  1 
Avatar de L33tige
Membre habitué https://www.developpez.com
Le 21/08/2019 à 11:54
Citation Envoyé par mh-cbon Voir le message
il vous faudra pratiquer le couple html/css sans javascript pour apprécier les possibilités offertes par cette balise.

Je regrette d'ailleurs que les concepteurs de navigateurs aient complètement délaissés cet aspect du développement HTML qui nécessite encore quelques efforts pour le présenter comme une alternative viable face à toute la débauche d'UX permise par le JS.

On peut déjà citer quelques avantages à cette pratique. Plus rapide à afficher, plus léger, plus sécurisé, meilleur support natif cross platform.
De plus avec le CSS on peut déjà réaliser tout un tas d'animation et autres transitions pour rendre l'ux plus agréable, reste alors le manque de finition de la norme HTML pour des cas d'utilisation devenus standard depuis l'avènement de JS.
Les possibilités qui nous sont offertes à l'heure actuelle ne permettent que l'implémentation de solutions alambiquées et difficile à maintenir.
Certaines animations en js sont plus légères qu'avec du CSS, en utilisant GSAP dans certains cas les animations sont moins gourmandes qu'en CSS pur.
0  0 
Avatar de ben51
Nouveau membre du Club https://www.developpez.com
Le 22/08/2019 à 9:21
Citation Envoyé par BenaeSan Voir le message
L'un des gros soucis de l'utilisation d'une iframe, c'est que les navigateurs bloque les requêtes CORS, ce qui limite déjà vachement sont utilisation!!
Il y a d'autre méthode https://developer.mozilla.org/fr/doc...ow/postMessage
Ce qui est plus gênant c'est que sur iOS les pages ouverte en iframe sont privé de cookie (donc de session).
0  1