ZZzzz~ may wind
<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 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: the scroll bar will automatically appear; if it is Yes, it 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.xyz.com/xyz "; width="250" height="200" scrolling="no" frameborder="0"></iframe>
Between window and floating frame In the scripting language and object hierarchy, the window containing the Iframe is called the parent form, and the floating frame is called the child form. It is important to clarify the relationship between the two, because it is necessary to control the Iframe in the parent form. When accessing a subform or vice versa, you must know the object hierarchy before you can access and control the form through a program.
1. Access and control the 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. You can directly access the objects in the subform 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>
The test.htm 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 ID number myH1 to hello, my dear, we can use:
document.myH1.innerText="hello,my dear"(document can be omitted)
In the example.htm file, the subform pointed to by the Iframe mark 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 the objects in the parent form in the child form. In the child form, 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>
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"
Here the parent object 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, it is done through the parent object.
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 don’t 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.
It should be noted that versions prior to Nestscape 6.0 do not support the Iframe tag.
Example:
<iframe src="Page" width="Width" height="Height" align="The arrangement can be left or right, center" scrolling="If there is a scroll bar, fill in 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>
After using iframe, I found that the scroll bar is not beautiful and I want to use 2 pictures instead↑↓
How should this be achieved?
answer:
Replace <title>..</title> of the web page with the following code
<SCRIPT LANGUAGE="javascript">
functionscroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<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>
Word
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="Pressing the mouse will make it faster! "></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="Press the mouse down to make it faster!"></TD>
</TR>
</TABLE>
The following code can implement IFrame adaptive height, that is, it automatically adapts to the length of the page to avoid scroll bars appearing on the page and IFrame at the same time.
The source code is as follows
<script type="text/javascript">
//** iframe automatically adapts to the page**//
//Enter a list of names of iframes that you want to automatically adjust the height according to the height of the page
//Separate the ID of each iframe with a comma. For example: ["myframe1", "myframe2"], there can be only one form, so no comma is needed.
//Define the ID of the iframe
var iframeids=["test"]
//If the user's browser does not support iframe, whether to hide the iframe, yes means hidden, no means not hidden
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//Automatically adjust iframe height
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //If the user's browser is NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //If the user's browser is IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//According to the set parameters, handle the display problems of browsers that do not support iframe
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
Other URLs with reference value:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //Usage of iframe embedded in web pages
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //IFRAME object
http://www.hoyo.idv.tw/web-program/html/iframe.htm //Inline frame iframe