Explication détaillée du rôle et des techniques d'utilisation de la balise iframe en HTML

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, pour répondre à la nécessité d'un style de site Web unifié et effet publicitaire, il n'y a rien de mal à cela, mais après tout, les portefeuilles des utilisateurs sont de plus en plus épuisés 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 téléchargement, mais seulement télécharger les zones dont le contenu a changé ? Qu'en est-il du contenu Web ?

La réponse est définitivement : appliquez la balise Iframe !

　1. L'utilisation des balises Iframe

Quand il s'agit d'Iframe, vous l'avez peut-être déjà jeté dans le Coin "oublié", cependant, il n'est pas étranger à parler de son frère Frame. 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. Maintenant, nous rencontrons une situation très réaliste : s'il y a un tutoriel, il est divisé en sections une à une, il y a des liens vers la « section précédente » et la « section suivante ». à chaque section du didacticiel À l'exception du contenu différent, le contenu des autres parties de la page est le même. Cela semble trop ennuyeux de créer des pages stupides page après page. Puis j'ai soudainement pensé s'il existait un moyen de créer d'autres parties du didacticiel. page inchangée, transformez simplement le didacticiel en 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. , l'un fait gagner du temps, et l'autre est que s'il y a un tutoriel dans le futur, les changements de trois longs et de deux courts sont également très pratiques, et n'affecteront pas toute l'armée, plus important encore, ces bannières publicitaires, ces 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 HTML pour l'afficher. 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 utilisé pour les balises Iframe est :

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

src : Le chemin d'accès au fichier, qui peut être soit un fichier HTML ou un texte, ASP, etc. ;

largeur, hauteur : la largeur et la hauteur de la zone "image dans l'image"

< ; 🎜> défilement : lorsque le HTML spécifié par SRC Lorsque le fichier n'est pas affiché dans la zone spécifiée, l'option de défilement, si 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 ; c'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. à 0.

Par exemple :

<Iframe src="http://www.webjx.com" width="250" height="200" scrolling="no" frameborder="0"></iframe>

2. Contrôle mutuel entre le formulaire parent et le cadre flottant

Dans le langage de script et la hiérarchie des objets, la fenêtre contenant l'Iframe est appelée le formulaire parent et le cadre flottant est appelé la fenêtre enfant. Assurez-vous 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 dans le formulaire enfant dans le formulaire parent

Dans le formulaire parent Dans Iframe , le sous-formulaire est un sous-objet de l'objet document et les objets du sous-formulaire sont accessibles directement dans le script.

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 tag dans test.htm :

<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>

test Le code du fichier .htm est :

<html>
　　　<body>
　　　　<h1 id="myH1">hello,my boy</h1>
　　　</body>
　　</html>

Si nous voulons changer le texte dans la balise H1 avec le numéro d'identification myH1 Pour bonjour, ma chère, vous pouvez utiliser :

document.myH1.innerText="bonjour, ma chère" (où le document peut être omis)

Dans le fichier example.htm, le sous-formulaire pointé par l'objet tag Iframe 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 dans le formulaire parent dans le sous-formulaire

Dans le sous-formulaire Nous pouvons accéder au objets dans la fenêtre parent via son objet parent (parent).

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">hello,my wife</h1>
　　　</body>
　　</html>

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：parent.myH2.innerText="hello,my friend"

　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!