HTML iframe usage summary collection_HTML/Xhtml_Web page production

Iframe usage analysis

BORDER

Set the edge width around the frame
FRAMEBODER

Set the width and height of the border
SCROLLING

Whether there is a scroll bar (YES,NO,AUTO )
SRC

Specify the file or image called by IFRAME (HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
"Picture-in-picture" effect--discussing the use of IFRAME tags
Looking at today's websites, the Internet speed is a bit slow, but almost every page has to put some banners, column pictures, copyrights, etc. Of course, there is nothing wrong with a lot of similar things due to the need for a unified website style and advertising effect, but after all, the user's wallet is increasingly drained of money by these "embellishment" things. Is there any way to make this possible? After downloading these similar things once, there is no need to download them again, but only those webpage contents with changed content areas are downloaded?
The answer is definitely: apply Iframe tag!
1. Use of Iframe tag
When it comes to Iframe, you may have 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 It becomes a page-by-page content page, without other content. When clicking the page up and 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 the tutorial will have three long and two short changes in the future. , is also very convenient, and will not affect the whole army; more importantly, those advertising banners, column lists, navigation and other things that are included in almost every page are only downloaded 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:

Copy the code

The code is as follows:

src: file The path 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 in the specified area When the scrolling option is not displayed or completed, if it is 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 make " Picture-in-picture "Blends with adjacent content, usually set to 0."
For example:

Copy code

The code is as follows:

2. The mutual control between the parent form and the floating frame. In the scripting language and object hierarchy, the window containing the Iframe is called the parent form, while the floating frame is called the child form. Clarify these two This relationship is important because to access a child form in a parent form or vice versa, you must know the object hierarchy before you can access and control the form programmatically.
1. Access and control objects in the subform in the parent form
In the parent form, the Iframe, that is, the subform, is a child object of the document object, and you can directly access the subform in the script. objects in .
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:

Copy code

The code is as follows:

test.htm file code is:

hello,my boy

If we want to change the text in the H1 tag with the ID number myH1 to hello, my dear, it can be used :
document.myH1.innerText="hello,my dear" (document can be omitted)
In the example.htm file, the subform pointed to by the Iframe tag object is consistent with the general DHTML object model. The object access control method is the same and will not be described again.
2. Access and control objects in the parent form in the subform
In the subform, we can access the objects in the parent window through its parent (parent) object.
Such as example.htm:

Copy code

The code is as follows:

< ;html>

hello,my wife