Detailed explanation of the role and usage techniques of iframe tag in html

Looking at the current website, the Internet speed is a bit slow, but almost every page has to put a lot of similar things such as banners, column pictures, copyrights, etc. Of course, out of the need for a unified website style and advertising effect, There is nothing wrong with it, but after all, users' wallets are increasingly depleted by these "embellished" things." Is there any way to make these similar things no longer need to be downloaded after one download, but only download those areas where the content has changed? What about the web content?

The answer is definitely: apply Iframe tag!

　1. The use of Iframe tags

When mentioning Iframe, you may have already thrown it into the "forgotten" Corner", however, it is no stranger to talk about its brother Frame. 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". In addition to each tutorial section Except for the different content, the content of other parts of the page is the same. It seems too boring to make stupid pages page after page. At this time, I suddenly thought, if there is a way to make other parts of the page unchanged, just Make the tutorial into 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 if there is a tutorial in the future, The changes of three long and two short are 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 the 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 HTML file specified by SRC is in When the specified area is not displayed, 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, the scroll bar 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://www.webjx.com" 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, while the floating frame is called the child form. Find out the difference between the two. Relationships are important because accessing a child form within a parent form or vice versa requires an understanding of the object hierarchy in order to access and control the form programmatically.

　1. Access and control objects in the subform in the parent form

　In the parent form In Iframe, the subform is a sub-object of the document object, and the objects in the subform 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. 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>

test.htm The 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 the ID number myH1 to hello, my Dear, you can use:

document.myH1.innerText="hello,my dear" (document can be omitted)

In example In the .htm file, the subform pointed to by the Iframe tag 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 subform

　In the subform 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>

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：parent.myH2.innerText="hello,my friend"

　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

The above is the detailed content of Detailed explanation of the role and usage techniques of iframe tag in html. For more information, please follow other related articles on the PHP Chinese website!