Home > Web Front-end > HTML Tutorial > Analysis of the difference between Iframe and FRAME_HTML/Xhtml_Web page production

Analysis of the difference between Iframe and FRAME_HTML/Xhtml_Web page production

WBOY
Release: 2016-05-16 16:41:46
Original
1381 people have browsed it
1. The use of Iframe tags
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 format of
Iframe tag is:

src: the path of the file, which can be an HTML file, text, ASP, etc.;
width, height: "draw The width and height of the "medium 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: then The scroll bar will automatically appear; if Yes, it will be displayed;
FrameBorder: The width of the area border. In order to integrate the "picture-in-picture" with adjacent content, it is often set to 0.
For example:

2. Mutual control between parent form and floating frame
In the scripting language and object level, including Iframe We call the window the parent form, and the floating frame is called the child form. It is important to understand the relationship between the two, because in order to access the child form in the parent form or vice versa, you must know the object hierarchy before you can pass program to access and control the form.
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:

The test.htm file code is:


hello, my boy




If we want to change the text in the H1 tag with ID number myH1 to hello , my dear, you can use:
document.myH1.innerText="hello, my dear" (where document can be omitted)
In the example.htm file, the subform pointed to by the Iframe mark object is the same as the general The DHTML object model is consistent, and the object access control method is the same, so I won’t go into details.
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:



hello, my wife




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"
The parent object here 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, the parent object is used.
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 money. Internet fees, why not?
Floating FRAME is a definition in the HTML4.0 specification, and current browsers support it.
Unlike the partition represented by FRAMESET, a floating FRAME exists on the Web page as a built-in object, and its style is like a graphic or an applet on a page. Floating FRAME uses the

Show one.htm


Show two.htm


Bring back start .htm
Note that for browsers that support the will be ignored. Otherwise, the content will be displayed, which can be used as an explanation that the current browser does not support

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template