When it comes to Iframe, you may have thrown it into a forgotten corner, but it is no stranger to talk about its brother Frame. Frame tags are frame tags. What we call a multi-frame structure is to display multiple HTML files in a browser window. Now, we encounter a very realistic situation: if there is a tutorial, one section at a time, and a link to the previous and next sections is made at the end of each page. Except for the different contents of each section, the contents of other parts of the page are the same. If you make a stupid page on a page, it seems too annoying. At this time, you have a sudden idea. If there is a way to keep the other parts of the page unchanged, and only make the tutorial into a page-by-page content page without other content. When clicking the link to turn up and down, only change the content of the tutorial, and keep the others unchanged. In this way, one is to save time, and in the future, if there is a change in the tutorial, it is also very convenient, so that it will not affect the whole army; more importantly, download the advertising banner, column list, navigation and other things that are almost every page only once and then no longer download it.
Iframe tags, also known as floating frame tags, can be used to embed an HTML document in an HTML display. It is different from the biggest feature of the Frame tag, that is, the HTML file referenced by this tag is not displayed independently of another HTML file, but can be directly embedded in an HTML file, blended with the content of this HTML file to become a whole. In addition, the same content can be displayed on a page many times without having to repeat the content. A vivid metaphor is picture-in-picture TV.
Now let’s talk about the use of Iframe tags.
The usage format of Iframe tags is:
<Iframe src=URL width=x height=x scrolling=[OPTION] frameborder=x></iframe>
src: The path to the file, which is either an HTML file, or text, ASP, etc.;
width, height: the width and height of the picture area in the picture;
scrolling: When the specified HTML file of SRC is not displayed in the specified area, the scrolling option. If it is set to NO, no scroll bar will appear; if it is Auto: the scroll bar will automatically appear; if it is Yes, it will be displayed;
FrameBorder: The width of the area border, which is often set to 0 in order to blend the picture in the picture with the adjacent content.
for example:
<Iframe src=http://netschool.cpcw.com/homepage width=250 height=200 scrolling=no frameborder=0></iframe>
2. Mutual control between parent form and floating frameIn the scripting language and object hierarchy, windows containing Iframes are called parent forms, while floating frames are called child forms. It is important to understand the relationship between these two, because to access the child forms in the parent form or vice versa, you must be clear about the object hierarchy in order to access and control the form through the program.
1. Access and control objects in the child form in the parent form
In the parent form, Iframe, that is, a child form, is a child object of the document object, and the objects in the child form can be accessed directly in the script.
Now there is a question, that is, how do we control this Iframe? Here we need to talk about the Iframe object. After we set the ID attribute to this tag, we can use the document object model DOM to control the HTML contained in the Iframe.
For example, embed the test.htm file in example.htm and control some tagged objects in test.htm:
<Iframe src=test.htm id=test width=250 height=200 scrolling=no frameborder=0></iframe>
The test.htm file code is:
<html>
<body>
<h1 id=myH1>hello,my boy</h1>
</body>
</html>
If we want to change the text in the H1 tag with ID number myH1 to hello, my dear, then:
document.myH1.innerText=hello,my dear(where document can be saved)
In the example.htm file, the subform referred to by the Iframe tag object is consistent with the general DHTML object model and the access control method for the object is the same, so I will not repeat it again.
2. Access and control objects in the parent form in the child form
In the child form we can access objects in the parent window through its parent, i.e., parent (parent) object.
For example.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>
If you want to access the title text with ID number myH2 in frame1.htm and change it to hello, my friend, we can write it like this:
parent.myH2.innerText=hello,my friend
Here, the parent object represents the current form (the form where example.htm is located). You need to access the objects in the parent form in the child form, and all of them are carried out through the parent object without exception.
Although Iframe is embedded in another HTML file, it remains relatively independent and is a realm of independence. The characteristics in a single HTML are also suitable for floating frames.
Just imagine, through Iframe tags, we can represent those unchanging contents as Iframes, so that there is no need to repeat the same content. This is a bit like a process or function in programming, saving a lot of cumbersome manual labor! In addition, it is crucial that it makes page modifications more feasible, because you don’t have to modify each page due to layout adjustments, you just need to modify the layout of a parent form.
One thing to note is that Nestscape browser does not support Iframe tags, but in the world of IE, this seems to be fine. It widely uses Iframe tags, which not only considers itself (website) and saves netizens' online expenses. Why not do it?
Floating FRAME is a definition in the HTML4.0 specification, and currently browsers support it.
Unlike the partition represented by FRAMESET, a floating FRAME exists as a built-in object on a web page, and its style is like a graph or an applet on a page. Floating FRAME uses <IFRAME> tag, which has most of the same attribute settings as <FRAME>, including: name, src, marginwidth, marginheight, FRAMEborder, and scrolling. At the same time, it also has the same height, width and align properties as graphics or applets.
Moreover, floating FRAME follows the same target principle as normal FRAME: we can point to it by its name. This principle applies to floating FRAMEs in any type of FRAME, otherwise it is easy to do. A link without a traget in a floating FRAME points to itself, while a _parent link points to the FRAME or window where the document containing <IFRAME> is located. for example:
<IFRAME name=floater src=start.htm width=150 height=200 hspace=10 align=left>
<IMG src=Images/noFRAME.gif alt=You can't see the floating FRAME
width=150 height=200 hspace=10 align=right>
</IFRAME><BR>
<A href=one.htm target=floater>Show one.htm</A><P>
<A href=two.htm target=floater>Show two.htm</A><P>
<A href=start.htm target=floater>Bring back start.htm</A>
Note that for browsers that support <IFRAME> tags, any content located between <IFRAME> and </IFRAME> will be ignored. Instead, the content in it will be displayed, which can be used to explain that the current browser does not support <IFRAME>