Effet « Image dans l'image » – discussion sur l'utilisation des balises IFRAME
Auteur：Eve Cole
Date de mise à jour：2009-06-11 17:24:01
En regardant le site Web actuel, la vitesse d'Internet est un peu lente, mais presque chaque page contient de nombreux éléments similaires tels que des bannières, des images de colonnes, des droits d'auteur, etc. Bien sûr, en raison de la nécessité d'un style de site Web et d'un effet publicitaire unifiés , il n'y a rien de mal à cela. Mais après tout, les portefeuilles des utilisateurs sont de plus en plus vidés de leur argent par ces choses « embellies ». Existe-t-il un moyen de faire en sorte que ces choses similaires n'aient plus besoin d'être téléchargées après un seul téléchargement, mais uniquement de téléchargement. le contenu web dans les domaines où le contenu a changé ?
La réponse est définitivement : appliquez la balise Iframe !
1. L'utilisation des balises Iframe <BR> Lorsqu'il s'agit d'Iframe, vous l'avez peut-être jeté dans le "coin oublié", mais lorsqu'il s'agit de son frère Frame, vous ne serez pas étranger. La balise Frame est une balise frame Ce que nous appelons une structure multi-frame consiste à afficher plusieurs fichiers HTML dans une fenêtre de navigateur. Or, nous sommes confrontés à une situation très réaliste : s'il existe un tutoriel, il est divisé en sections une à une. A la fin de chaque page, il y a des liens vers la « section précédente » et la « section suivante », sauf que le contenu de celle-ci. chaque tutoriel est différent. De plus, le contenu des autres parties de la page est le même. Cela semble trop ennuyeux de créer des pages stupides page par page, j'ai soudain pensé, s'il existe un moyen de conserver d'autres parties de la page. la page inchangée, il suffit de créer le didacticiel. Elle devient une page de contenu page par page, sans autre contenu. Lorsque vous cliquez sur le lien de page haut et bas, seule la partie du contenu du didacticiel sera modifiée et les autres parties resteront inchangées. de cette façon, l'un permet de gagner du temps, et l'autre est que le didacticiel comportera trois changements longs et deux courts à l'avenir, est également très pratique et n'affectera pas l'ensemble de l'armée, plus important encore, les bannières publicitaires, les listes de colonnes, la navigation et d'autres éléments inclus dans presque toutes les pages ne sont téléchargés qu'une seule fois, puis ne sont plus téléchargés.
Balise Iframe, également appelée balise de cadre flottant, vous pouvez l'utiliser pour intégrer un document HTML dans un affichage HTML. La plus grande caractéristique qui diffère de la balise Frame est que le fichier HTML référencé par cette balise n'est pas affiché indépendamment des autres fichiers HTML, mais peut être directement incorporé dans un fichier HTML et intégré au contenu du fichier HTML pour devenir un tout. De plus, vous pouvez également afficher le même contenu plusieurs fois sur une page sans avoir à écrire le contenu à plusieurs reprises. Une métaphore frappante est celle de la télévision « image dans l'image ».
Parlons maintenant de l'utilisation des balises Iframe.
Le format d'utilisation de la balise Iframe est :
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src : Le chemin du fichier, qui peut être un fichier HTML, texte, ASP, etc. ;
width, height : la largeur et la hauteur de la zone « image dans l’image » ;
défilement : Lorsque le fichier HTML spécifié de SRC n'est pas affiché dans la zone spécifiée, l'option de défilement, si elle est définie sur NON, la barre de défilement n'apparaîtra pas si elle est Auto : la barre de défilement apparaîtra automatiquement si elle est Oui ; il sera affiché ;
FrameBorder : La largeur de la bordure de la zone afin de mélanger "l'image dans l'image" avec le contenu adjacent, elle est souvent définie sur 0.
Par exemple:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
2. Contrôle mutuel entre le formulaire parent et le cadre flottant <BR> Dans le langage de script et la hiérarchie des objets, la fenêtre contenant l'Iframe est appelée formulaire parent, tandis que le cadre flottant est appelé formulaire enfant. Indiquez clairement que ces deux relations. est important car pour accéder à un formulaire enfant dans un formulaire parent ou vice versa, vous devez connaître la hiérarchie des objets avant de pouvoir accéder et contrôler le formulaire par programme.
1. Accéder et contrôler les objets du sous-formulaire dans le formulaire parent <BR> Dans le formulaire parent, l'Iframe, c'est-à-dire le sous-formulaire, est un objet enfant de l'objet document. Vous pouvez accéder directement aux objets du sous-formulaire dans. le scénario.
Maintenant, il y a une question, c'est-à-dire comment contrôler cet Iframe ? Ici, nous devons parler de l'objet Iframe. Lorsque nous définissons l'attribut ID sur cette balise, nous pouvons effectuer une série de contrôles sur le HTML contenu dans l'Iframe via le DOM Document Object Model.
Par exemple, intégrez le fichier test.htm dans example.htm et contrôlez certains objets balises dans test.htm :
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
Le code du fichier test.htm est :
<html>
<corps>
<h1 id="myH1">Bonjour, mon garçon</h1>
</corps>
</html>
Si nous voulons changer le texte de la balise H1 avec le numéro d'identification myH1 en bonjour, ma chère, nous pouvons utiliser :
document.myH1.innerText="bonjour, mon cher" (le document peut être omis)
Dans le fichier example.htm, le sous-formulaire pointé par l'objet Iframe mark est cohérent avec le modèle objet DHTML général et la méthode de contrôle d'accès aux objets est la même, je n'entrerai donc pas dans les détails.
2. Accéder et contrôler les objets du formulaire parent dans le sous-formulaire <BR> Dans le sous-formulaire, nous pouvons accéder aux objets de la fenêtre parent via son objet parent (parent).
Tel que exemple.htm :
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">bonjour, ma femme</h1>
</corps>
</html>
Si nous voulons accéder au texte du titre dans frame1.htm avec le numéro d'identification myH2 et le changer en "bonjour, mon ami", nous pouvons écrire comme ceci : parent.myH2.innerText="bonjour, mon ami"
Ici l'objet parent représente le formulaire courant (le formulaire où se trouve exemple.htm). Pour accéder aux objets du formulaire parent dans le formulaire enfant, sans exception, cela se fait via l'objet parent.
Bien qu'Iframe soit intégré dans un autre fichier HTML, il reste relativement indépendant et constitue un « royaume indépendant ». Les caractéristiques d'un seul HTML s'appliquent également aux frames flottants.
Imaginez simplement, grâce à la balise Iframe, nous pouvons exprimer le contenu inchangé sous forme d'Iframe, de cette façon, nous n'avons pas besoin d'écrire le même contenu à plusieurs reprises. C'est un peu comme un processus ou une fonction en programmation, et c'est fastidieux. le travail manuel est économisé ! De plus, et surtout, cela rend les modifications de page plus réalisables, car au lieu de devoir modifier chaque page pour ajuster la mise en page, il vous suffit de modifier la mise en page d'un formulaire parent.
Une chose à noter est que le navigateur Nestscape ne prend pas en charge la balise Iframe, mais dans le monde actuel d'IE, cela ne semble pas être un gros problème. Les balises Iframe sont largement utilisées, pas seulement pour elles-mêmes (le site Web), mais aussi pour les internautes d'économiser sur les frais Internet. Pourquoi pas ?
