Récapitulatif de l'utilisation de l'iframe HTML collection_HTML/Xhtml_Production de pages Web

Analyse de l'utilisation des Iframe

BORDER

Définir la largeur du bord autour du cadre
FRAMEBODER
AUTO )
SRC

Spécifiez le fichier ou l'image appelé par IFRAME (HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
Effet "Picture-in-picture" - discussion de l'utilisation des balises IFRAME
En regardant les sites Web d'aujourd'hui, la vitesse d'Internet est un peu lente, mais presque chaque page doit mettre des bannières , images de colonnes, droits d'auteur, etc. Bien sûr, il n'y a rien de mal avec beaucoup de choses similaires en raison de la nécessité d'un style de site Web et d'un effet publicitaire unifiés, mais après tout, le portefeuille de l'utilisateur est de plus en plus vidé de son argent par ces "embellissements". " choses. Existe-t-il un moyen de rendre cela possible ? Après avoir téléchargé ces éléments similaires une fois, il n'est pas nécessaire de les télécharger à nouveau, mais seuls les contenus de pages Web avec des zones de contenu modifiées sont téléchargés ?
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 jeté dans le "coin oublié", mais quand 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 faire une page stupide page par page, j'ai soudain pensé, s'il existe un moyen de conserver les autres parties. de la page inchangée, il suffit de rendre le didacticiel. Il devient une page de contenu page par page, sans autre contenu. Lorsque vous cliquez sur le lien haut et bas de la page, 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 si le didacticiel comporte trois changements longs et deux courts dans le futur, il est également très pratique et n'affectera pas l'ensemble de 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 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 de la
balise Iframe est :

Copier le codeLe code est le suivant :

src : fichier Le chemin 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 spécifié ; Le fichier HTML de SRC est dans la zone spécifiée. Lorsque l'option de défilement n'est pas affichée ou complétée, 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 créer des « image dans l'image » qui se fondent avec le contenu adjacent, généralement défini sur 0. »
Par exemple :

Copier le code Le code est le suivant :

>
2. Le 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, tandis que le cadre flottant est appelé le formulaire enfant. Cette relation est importante 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 sous-formulaire du formulaire parent
Dans le formulaire parent, l'Iframe, ou sous-formulaire, est un objet enfant de l'objet document, et vous pouvez accéder directement au sous-formulaire dans le script. objets dans .
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 :

Copier le code

Le code est le suivant :

le code du fichier test.htm est :

,mon garçon< /h1>

Si nous voulons changer le texte dans la balise H1 avec le numéro d'identification myH1 en bonjour , ma chère, il peut être utilisé :
document.myH1.innerText="hello,my dear" (le document peut être omis)
Dans le fichier exemple.htm, le sous-formulaire pointé par l'objet tag Iframe est cohérent avec le modèle objet DHTML général. La méthode de contrôle d'accès aux objets est la même et ne sera pas décrite à nouveau.
2. Accéder et contrôler les objets dans le formulaire parent dans le sous-formulaire
Dans le sous-formulaire, nous pouvons accéder aux objets dans la fenêtre parent via son objet parent (parent).
Comme example.htm :

Copier le codeLe code est le suivant :

< ;html>

bonjour, ma femme

;



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"
L'objet parent représente ici le formulaire actuel (le formulaire où se trouve example.htm Vous devez accéder aux objets du formulaire parent dans le). formulaire enfant, sans exception. Tout cela 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 que 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 de programmation, de sauvegarde. beaucoup de travail manuel fastidieux ! 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 (la balise Iframe). site Web), mais aussi pour les internautes pour économiser de l'argent sur les frais Internet, pourquoi pas ?
Exemple

Copier le codeLe code est le suivant :

< iframe src= "Page" width="width" height="height" align="La disposition peut être à gauche ou à droite, au centre" scrolling="S'il y a une barre de défilement, remplissez non ou oui" >

< IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300>

2 :::::::::::::::::::::::::::::::::::::::::: ::::::::::::: :::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::
Après avoir utilisé iframe, j'ai trouvé que la barre de défilement n'était pas belle et j'ai vous souhaitez utiliser 2 images pour le remplacer ↑↓

Comment doit-il être implémenté ?
Réponse :
Remplacez le

par le code suivant : Copiez le code

Le code est le suivant :

..

文字
文字

文字

文字

文字

Iframe的使用
Iframe可以在一人表格内调用一个外部文件，是非常有用的。本
现在我们学一下Iframe标记的使用。
Iframe标记的使用格式是:

复制代码

代码如下 :

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。
IFrame也可以编辑文字
有没有想过除了表单(

) L'application IFrame est basée sur l'utilisation d'IFrame.个文本编辑器。





其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！
只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果

Voici quelques ajouts supplémentaires :

Inutile de le dire.
La largeur est la largeur de la page insérée ; la hauteur est la hauteur de la page insérée ; le défilement indique s'il faut afficher la barre de défilement de la page (les paramètres facultatifs sont automatiques, oui, non, si ce paramètre est omis, la valeur par défaut est automatique ); frameborder border size;
Remarque : Il est recommandé d'utiliser des chemins absolus pour les URL
La légende dit :
Noirci 88*8. . .
Exemple 2.
S'il y a un cadre dans une page. . Cliquez simplement sur le lien sur la page et demandez à l'ouvrir dans cet
Modifiez ensuite le mode d'ouverture par défaut : Ajoutez < href=URL target=**>ou le cadre cible du lien partiel est défini sur (**)
　Exemple 3.
Pour insérer une page. Demandez à ne prendre que la partie médiane. Je ne veux rien d'autre. ,. .
　Code :

Contrôler la profondeur de la page insérée couverte par le cadre marginwidth=0 marginheight=0; Contrôler la profondeur de la partie supérieure couverte par le cadre vspace=-170
S'il faut faire défiler la barre de défilement (auto, oui, non) La taille de la bordure du frameborder frame, width=776 height=2500 La taille de ce cadre.
1. Ajouter une iframe à la page
,
le défilement indique s'il faut afficher la barre de défilement de la page , facultatif Les paramètres sont auto, yes et no. Si ce paramètre est omis, la valeur par défaut est auto.
2. Le lien hypertexte pointe vers la page Web intégrée. Nommez simplement l'iframe. La méthode est , alors, l'instruction de lien hypertexte sur la page Web doit être écrite comme :
3. Si frameborder est défini sur 1, l'effet sera comme un zone de texte
Utilisation d'IFRAME transparent
Il doit être pris en charge par IE5.5 ou supérieur
Dans la balise du fichier transparentBody.htm, j'ai ajouté style="background-color=transparent " Grâce aux quatre IFRAME suivants, je pense que vous devriez bien comprendre comment implémenter l'effet de transparence d'arrière-plan iframe :
=" Frame3" SRC="transparentBody.htm">
:
Fenêtre et cadre flottant Contrôle mutuel entre
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. Il est important de clarifier la relation. entre les deux, car lorsque vous accédez à un sous-formulaire 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 via un programme.
1. Accéder et contrôler les objets dans le sous-formulaire du formulaire parent
Dans le formulaire parent, l'Iframe ou le sous-formulaire est un objet enfant de l'objet document Vous pouvez accéder au sous-formulaire directement dans les objets du 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 :
　　
test.htm文件代码为:
　　
　　　
　　　　

hello,my boy

　　　
　　
　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
　　2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　
　　　
　　　　
　　　　

hello,my wife

　　　
　　
　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myH2.innerText="hello,my friend"
或者parent.document.getElementById("myH2").innerText="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
3:frame的一个子元素访问frame的另一个子元素
例如：框架文件frame.html中嵌入了另外两个html文件

那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),
其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
　　要注意的是，Nestscape6.0之前版本不支持Iframe标记。
　　例子：
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
应该怎么实现呢？
回答：
用下列代码替换网页的

文字 文字 文字 文字 文字
	< / TD>

:::::::::::::::::::::::: :::: :::::::::::::::::::::::::::::::::::::::::::: :::::::::: ::
Le code suivant peut implémenter la hauteur adaptative IFrame, c'est-à-dire qu'il s'adapte automatiquement à la longueur de la page pour éviter que des barres de défilement n'apparaissent sur la page et IFrame en même temps .
Le code source est le suivant

Balises HTML

被引用的文件UserLogin.html：

会员登录

用户名：
密码：

现在假设« 最新主题列表 »文件中有一个超链接,点击其,包含« 最新主题列表”的iframe就重新加载，此时需要利用javascript来实现：
www.baidu.com