The tag format 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.IFrame.com/xyz" width = "250" Height = "200" scrolling = "no" frameborder = "0"> </iframe>
:::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::
Mutual Control between windows and floating Frames
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, my wife </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.
Note that the IFRAME tag is not supported in nestscape6.0 or earlier versions.
Example:
1 <IFRAME src = "page" width = "width" Height = "height" align = "can be left or right, center "scrolling =" whether a scroll bar exists. You can enter NO or yes "> </iframe>
<IFRAME frameborder = 0 framespacing = 0 Height = 25 marginheight = 0 marginwidth = 0 scrolling = no name = Main src = "BGM/bgm.html" width = 300> </iframe>
2. I used IFRAME and found that the scroll bar is not beautiful. I want to use two images instead of the scroll bar.
How should we implement it?
Answer:
Use the following code to replace <title> .. </title>
<Script language = "JavaScript">
Function scroll (N)
{Temp = N;
Out1.scrolltop = out1.scrolltop + temp;
If (temp = 0) return;
SetTimeout ("scroll (temp)", 80 );
}
</SCRIPT>
& Lt; table width = "330" & gt;
<Tr>
<TD width = "304" valign = "TOP" rowspan = "2">
<Div id = out1 style = "width: 100%; Height: 100; overflow: hidden; border-style: dashed; border-width: 1px, 1px, 1px, 1px;">
Text <br> text <br>
Text <br>
Text <br>
Text
<Br>
<Br>
</Div>
</TD>
<TD width = "14" valign = "TOP"> </TD>
</Tr>
<Tr>
<TD width = "14" valign = "bottom"> </TD>
</Tr>
</Table>
:::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::
The following code implements the IFRAME adaptive height, that is, automatically adapts to the length of the page so that the scroll bar appears simultaneously in addition to the page and IFRAME.
The source code is as follows:
<SCRIPT type = "text/JavaScript">
// ** IFRAME automatically adapts to the page **//
// Enter the list of IFRAME names that you want to automatically adjust the height based on the page height
// Use commas (,) to separate the IDs of each IFRAME. For example, ["myframe1", "myframe2"] can have only one form.
// Define the IFRAME ID
VaR iframeids = ["test"]
// If your browser does not support IFRAME, whether to hide IFRAME: Yes, no
VaR iframehide = "yes"
Function dyniframesize ()
{
VaR dyniframe = new array ()
For (I = 0; I <iframeids. length; I ++)
{
If (document. getelementbyid)
{
// Automatically adjust the IFRAME height
Dyniframe [dyniframe. Length] = Document. getelementbyid (iframeids );
If (dyniframe &&! Window. Opera)
{
Dyniframe. style. Display = "Block"
If (dyniframe. contentdocument & dyniframe. contentdocument. Body. offsetheight) // If your browser is Netscape
Dyniframe. Height = dyniframe. contentdocument. Body. offsetheight;
Else if (dyniframe. Document & dyniframe. Document. Body. scrollheight) // If your browser is IE
Dyniframe. Height = dyniframe. Document. Body. scrollheight;
}
}
// Display the browser that does not support IFRAME Based on the set parameters
If (document. All | document. getelementbyid) & iframehide = "no ")
{
VaR tempobj = Document. All? Document. All [iframeids]: Document. getelementbyid (iframeids)
Tempobj. style. Display = "Block"
}
}
}
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
