Looking at the current website, the Internet speed is a bit slow, but almost every page has a lot of similar things such as banners, column pictures, copyrights, etc. Of course, due to the need for a unified website style and advertising effect, there is nothing wrong with it. But after all, users' wallets are increasingly drained of money by these "embellished" things." Is there any way to prevent these similar things from being downloaded again after downloading them once, and only download the web content in areas where the content has changed? Woolen cloth?
The answer is definitely: apply Iframe tag!
1. Use of Iframe tags
When it comes to Iframe, you may have already thrown it into the "forgotten corner", but when it comes to its brother Frame, you will not be unfamiliar. Frame tag is a frame tag. 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, it is divided into sections one by one. At the end of each page, there are links to "previous section" and "next section", except that the content of each tutorial is different. In addition, the content of other parts of the page is the same. It seems too boring to make stupid pages page by page. At this time, I suddenly thought, if there is a way to keep other parts of the page unchanged, just make the tutorial into one The page-by-page content page does not contain other content. When you click the page up or down link, only the tutorial content part will be changed, and the other parts will remain unchanged. In this way, one saves time, and the other is that if the tutorial has three long and two short changes in the future, it will also It is very convenient, and it will not affect the whole army; more importantly, the advertising banner, column list, navigation and other things that are included in almost every page can be downloaded only once and then no longer downloaded.
Iframe tag, also called floating frame tag, you can use it to embed an HTML document in an HTML display. The biggest feature that is different from the Frame tag is that the HTML file referenced by this tag is not displayed independently from other HTML files, but can be directly embedded in an HTML file and integrated with the content of the HTML file to become a whole. In addition, , you can also display the same content multiple times on a page without having to write the content repeatedly. A vivid metaphor is "picture-in-picture" TV.
Now let's talk about the use of Iframe tags.
The usage format of Iframe tag is:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: The path of the file, which can be an HTML file, text, ASP, etc.;
width, height: the width and height of the "picture-in-picture" area;
scrolling: When the specified HTML file of SRC is not displayed in the specified area, the scrolling option, if set to NO, the scroll bar will not 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. In order to blend the "picture-in-picture" with adjacent content, it is often set to 0.
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 frame
In the scripting language and object hierarchy, the window containing the Iframe is called the parent form, and the floating frame is called the child form. It is important to understand the relationship between the two, because the child window must be accessed in the parent form. The object hierarchy must be known before a form can be accessed and controlled programmatically, or vice versa.
1. Access and control objects in the subform in the parent form <br/> In the parent form, the Iframe, that is, the subform, is a child object of the document object. You can directly access the objects in the subform in the script. object.
Now there is a question, that is, how do we control this Iframe? Here we need to talk about the Iframe object. When we set the ID attribute to this tag, we can perform a series of controls on the HTML contained in the Iframe through the Document Object Model DOM.
For example, embed the test.htm file in example.htm and control some tag 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, we can use:
document.myH1.innerText="hello,my dear"(document can be omitted)
In the example.htm file, the subform pointed to by the Iframe mark object is consistent with the general DHTML object model, and the object access control method is the same, so I will not go into details.
2. Access and control objects in the parent form in the child form <br/> In the child form, we can access the objects in the parent window through its parent (parent) object.
Such as 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 we want to access the title text in frame1.htm with ID number myH2 and change it to "hello,my friend", we can write like this: parent.myH2.innerText="hello,my friend"
Here the parent object represents the current form (the form where example.htm is located). To access the objects in the parent form in the child form, without exception, it is done through the parent object.
Although Iframe is embedded in another HTML file, it remains relatively independent and is an "independent kingdom". The characteristics in a single HTML also apply to floating frames.
Just imagine, through the Iframe tag, we can express the unchanged content as an Iframe. In this way, we do not have to write the same content repeatedly. This is a bit like a process or function in programming, and how much tedious manual labor is saved! In addition, and crucially, it makes page modifications more feasible, because instead of having to modify each page to adjust the layout, you only need to modify the layout of one parent form.
One thing to note is that the Nestscape browser does not support the Iframe tag, but in today's world of IE, this does not seem to be a big deal. Iframe tags are widely used, not only for their own sake (the website), but also for netizens to save Internet fees. Why not?