La balise IFRAME peut créer une trame intégrée dans la page Web, qui appelle le contenu d'un autre document de page Web en spécifiant l'attribut SRC. Comme Frameset, il est utilisé pour diviser la structure de la page Web pour maintenir certaines parties de la page Web publiques, mais par rapport à la structure du framework de Frameet divisant toute la page Web, les iframes sont plus flexibles et peuvent être intégrés n'importe où sur la page Web. En raison de cette fonctionnalité de l'utilisation de l'IFRAME, il a été largement utilisé dans certaines pages Web, ce qui a également conduit à des abus inappropriés. La conception Web analysera plusieurs façons courantes d'utiliser l'élément Web IFRAME.
- Faire un composant de page de réponse sans actualisation comme solution pour l'échange asynchrone de données. Il s'agit d'une autre méthode pour envoyer des demandes de manière asynchrone sans utiliser Ajax au début. En définissant un élément IFRAME invisible sur la page et en pointant son attribut SRC à l'adresse de la page où la demande doit être envoyée, la demande peut être envoyée. Dans le même domaine, la page retournée peut être analysée DOM pour obtenir des données. Un autre avantage est qu'il contourne le modèle de sécurité de sandbox de l'Ajax et peut envoyer avec succès les demandes de domaine transversal pour obtenir des données, mais dans ce cas, l'objet de document de l'IFRAME ne peut pas être récupéré. En raison de sa caractéristique, il est toujours applicable dans certaines pages Web qui nécessitent des demandes de domaine croisé. Ce type de rafraîchissement signifie que la page parent ne s'actualite pas pendant le processus d'échange de données et continue de répondre aux opérations utilisateur. L'échange de données réel est verrouillé par la page IFRAME intégrée sur la page parent. Cette page IFRAME intégrée peut être définie pour être visible ou invisible selon les besoins et n'affectera pas la réponse des autres éléments de la page parent à l'utilisateur. Cet effet est similaire à l'Ajax sans rafraîchissement, mais on peut voir que son mécanisme est complètement différent. Même si Gmail est un modèle pour les applications AJAX, il combine de nombreux iframes pour atteindre ses performances supérieures et son expérience utilisateur.
- Un moyen d'optimiser une page. Utilisez des iFrames pour charger des scripts en parallèle pour résoudre les problèmes de chargement du contenu tiers à chargement lent tel que les icônes et les annonces. La plateforme publicitaire de Google Adsense signifie utiliser IFRAME pour partager les revenus sur les sites Web des utilisateurs. Vous pouvez également voir ce type de technologie en visualisant et en analysant les codes publicitaires sur la page d'accueil du portail national. Vous pouvez également utiliser un iframe caché pour précharger des fichiers plus grands pour se cacher lorsque le réseau est sous une faible pression de réseau, afin que d'autres pages puissent l'utiliser. Le concept de précharge peut être analysé à l'aide de Firebug pour la page d'accueil de Google. Vous pouvez voir dans l'étiquette corporelle:
onload = document.fqfocus (); if (document.images) new image (). src = '/images/nav_logo4.png'
Avec un tel code, l'image chargée nav_logo4.png n'est pas utilisée sur la page d'accueil, mais lorsque vous utilisez cette image sur d'autres pages telles que la liste de résultats de recherche, vous n'avez qu'à le lire à partir du cache et n'a pas besoin de le télécharger à nouveau.
- En tant que méthode de piratage pour la couche flottante dans le navigateur IE6 pour bloquer les contrôles de sélection et les éléments flash. Dans l'ère Web2.0, la technologie Lightbox (ou Thickbox) est devenue un effet populaire avec sa bonne expérience et sa nouvelle expérience visuelle. Cette technologie utilise en fait un calque flottant absolument positionné pour couvrir la page d'origine pour présenter des informations, des images, des formulaires, des formulaires ou tout autre élément de page arbitraire, en remplacement de la voie dans le développement Web des premiers sites Web, les propres messages et les contrôles d'entrée des navigateurs pop-up sont souvent utilisés pour interagir avec les utilisateurs. Dans les anciens, les scripts qui apparaissent de nouvelles fenêtres sont souvent interceptés par le système de blocage des publicités du navigateur, et les contrôles de messages du navigateur sont critiqués par les chercheurs de l'expérience utilisateur, car ils interrompent le processus du navigateur, ce qui a entraîné la verrouillage de la page et d'autres pages Web via plusieurs balises. En tant que développeur Front-ligne Front-end avec des exigences strictes sur vous-même, vous rencontrerez certainement ce problème dans le processus d'implémentation de l'effet LightBox. La couche de positionnement absolu ne peut pas couvrir les contrôles de sélection et flash sur la page Web dans IE6, et même si le style est défini sur une valeur Z-Index plus élevée, il sera inutile. En effet, l'élément Select est un élément de niveau de forme dans IE6, et sa priorité est beaucoup plus élevée que toutes les autres balises HTML. Seuls les iframes du même niveau de forme peuvent le couvrir. Par conséquent, les développeurs ont constaté que la mise en place de la couche flottante dans un iframe ou le placer un iframe dans la couche flottante peut résoudre ce problème. Heureusement, ce problème a été corrigé dans la version de mise à niveau IE après IE6, mais pour IE6, qui a encore 50% + part de marché (statistiques à l'époque de la publication), cette solution est toujours d'une signification pratique.
En plus des trois applications ci-dessus, certaines applications inappropriées sont également courantes pour les éléments IFRAME. Par exemple, intégrez trop de trames IFRAME dans la page et mettez à jour l'IFRAME lorsqu'il est cliqué en spécifiant l'attribut cible de la balise de liaison en dehors du cadre. Cette utilisation est similaire à Frameset, atteignant le but de partager la navigation. L'intention initiale est bonne, mais il n'y a aucun doute sur les inconvénients. Cela conduira à trop de demandes de page. L'article "Les meilleures pratiques pour accélérer votre site Web" mentionnées ci-dessus indiquent clairement que l'optimisation des pages nécessite de minimiser le nombre de tames IFRATS et résume trois inconvénients:
- Même si le contenu est vide, il entraînera une perte de ressources (y compris le client et le serveur);
- Blocks Page Onload Event Triggers (Blocks Page Onload, et elle est traduite par elle empêchera la page de se charger, il y a un doute ici)
- Pas de sémantique (le référencement est une partie importante du marketing de site Web)
Dans la prochaine version de HTML5 de XHTML1.0, il n'y a pas de prise en charge de la balise Frameset en raison de l'impact négatif sur la disponibilité de la page Web, ce qui explique également certains problèmes de côté.
De plus, comme l'iframe intégré ne peut pas s'adapter automatiquement à sa taille de contenu interne, afin de maintenir l'intégrité de l'affichage de la page, il est également nécessaire d'écrire un script JavaScript pour ajuster instantanément sa taille en fonction des modifications du contenu IFRAME. Les multiples demandes diffusées, associées à la nécessité de corriger les scripts JavaScript, augmentent le risque de plusieurs systèmes de pages IFRAME. Alors, y a-t-il un bon moyen de garder le contenu de la page public? Le côté serveur nous a longtemps fourni des solutions. L'inclusion dans ASP et les méthodes requises en PHP sont tous utilisés pour inclure un morceau de code existant dans le programme. Cela peut également permettre à une certaine partie de la page (comme les menus de navigation, les pieds de page). Cependant, après l'exécution, il est sorti en tant que page complète, réduisant efficacement les demandes des clients, et il n'y a pas de problème d'adaptabilité élevée des iframes.
