I. Use of Iframe tags
When you mention Iframe, you may have already threw it into the "forgotten corner", but it is no stranger to the brother Frame. Frame tag is the Frame tag. The multi-Frame structure is to display multiple HTML files in a browser window. Now, we have encountered a very practical situation: for example, there is a tutorial on a section, make a link at the end of each page "previous section" and "next section". Except for the content of each tutorial, the content of other sections of the page is the same, if a page-by-page stupid page is created, it seems annoying. In this case, there is a strange idea. If there is a way to keep the rest of the page unchanged, make the tutorial a one-page content page without any other content. When you click the up or down page Link, only the content of the tutorial is changed, and the rest remains unchanged. In this way, the first step is to save time, in the future, if there is a change in length, length, and length, it will be very convenient; more importantly, we will not download all the things on almost every page, such as Banner, column list, and navigation.
Iframe tag, also known as floating frame tag, can be used to embed an HTML document into an HTML file for display. It is different from the largest feature of Frame tag, that is, the HTML file referenced by this tag is not displayed independently of other HTML files, but can be directly embedded in an HTML file, it is integrated with the content of this HTML file and becomes a whole. In addition, the same content can be displayed multiple times in a page without having to write the content repeatedly, A metaphor for an image is "picture-in-picture" TV.
Now let's talk about the use of the Iframe tag.
The format of the Iframe tag is:
<Iframe src = "URL" width = "x" height = "x" scrolling = "[OPTION]" frameborder = "x"> </iframe>
Src: file path, which can be either an HTML file or a text file or an ASP file;
Width and 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 scroll option is displayed. If it is set to NO, NO scroll bar is displayed. If it is set to Auto:, the scroll bar is automatically displayed; if Yes, it is displayed;
FrameBorder: The Border width of the area. It is usually set to 0 to make the "picture in the picture" and the adjacent content combine.
For example:
<Iframe src = http://www.bkjia.com/news/ width = "250" height = "200" scrolling = "no" frameborder = "0"> </iframe>
Ii. mutual control between the parent form and floating Frame
In the scripting language and object layers, the window containing Iframe is called the parent form, while the floating frame is called the child form. It is very important to understand the relationship between the two, to access a child form in the parent form, or to the contrary, you must be clear about the object hierarchy to access and control the form through a program.
1. Access and control objects in the child form in the parent form
In the parent form, Iframe is a child object of the document Object. You can directly access the objects in the child form in the script.
Now there is a problem, that is, how to control this Iframe. here we need to talk about the Iframe object. After setting the ID attribute for this tag, you can use the Document Object Model DOM to control the HTML contained in Iframe.
For example, you can embed the test.htm file in example.htmand control some marked objects in test.htm:
<Iframe src = "test.htm" id = "test" width = "250" height = "200" scrolling = "no" frameborder = "0"> </iframe>
The code of the test.htm file is:
<Html>
<Body>
<H1 id = "myH1"> hello, my boy </Body>
</Html>
If we want to change the text in the H1 mark with the ID number myH1 to hello, my dear, it is available:
Document. myH1.innerText = "hello, my dear" (where, document can be saved)
In the example.htm file, the sub-forms indicated by the Iframe mark object are consistent with the common DHTML Object Model. The access control method for the object is the same, so we will not repeat them here.
2. Access and control objects in the parent form in the child form
In the child form, we can use its parent (parent) object to access the objects in the parent window.
For example, 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, bkjia.com </Body>
</Html>
If you want to access the title text in myH2 with the ID number in frame1.htm and change it to "hello, my friend", you can write as follows:
Parent. myH2.innerText = "hello, my friend"
In this case, the parentobject represents the form in which the front window (example.htm) is located. To access the objects in the parent form in the child form, all objects in the parent form are carried out through the parent object without exception.
Although Iframe is embedded in another HTML file, it remains relatively independent. It is an "independent kingdom". The features in a single HTML file are also applicable to floating frames.
Imagine using the Iframe flag, we can express the unchanged content in Iframe, so that we do not have to write the same content repeatedly, which is a bit like a process or function in programming, how much tedious manual work has been saved! In addition, it is vital that the modification of the page is more feasible, because you only need to modify the layout of a parent form instead of modifying each page because of the layout adjustment.
One thing to note is that the Nestscape browser does not support Iframe tags, but it does not seem to be a major problem in the world of IE nowadays. Iframe tags are widely used, and they both think about themselves (websites, he also saved network fees for netizens. Why not?
Floating FRAME is a definition in the HTML4.0 specification and is currently supported by browsers.
Unlike the split area represented by FRAMESET, a floating FRAME exists on the web page as a built-in object, and its style is like a graph or applet on a page. Floating FRAME uses the <IFRAME> flag. It has most of the same attribute settings as <FRAME>, including: name, src, marginwidth, marginheight, FRAMEborder, and scrolling. It also has the same height, width, and align attributes as the graph or applet.
In addition, a floating FRAME follows the same target principle as a normal FRAME: we can point to it through its name. This principle applies to floating frames in any FRAME type, and vice versa. In a floating FRAME, no traget link points to itself, while the _ 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>
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: For browsers that support <IFRAME> tags, any content between <IFRAME> and </IFRAME> is ignored. Otherwise, the content is displayed, which can be used to explain that the current browser does not support <IFRAME>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
