Zzzzz~ May Wind
<iframe src= "/url" width= "x" height= "x" scrolling= "[OPTION]" frameborder= "x" ></iframe>
SRC: The path of the file, both HTML files, but also can be text, ASP, etc.
width, height: "Painting in the picture" area of the width and height;
Scrolling: When the specified HTML file in SRC does not show up in the specified area, the scrolling option, if set to No, the scroll bar does not appear, for auto: The scroll bar appears automatically;
Frameborder: The width of the area border, which is often set to 0 in order for the picture to be merged with the adjacent content.
Like what:
<iframe src= "HTTP://WWW.XYZ.COM/XYZ"; Width= "height=" scrolling= "no" frameborder= "0" ></iframe>
Mutual control between windows and floating frames
In the scripting language and object hierarchy, the window that contains the IFRAME we call the parent form, and the floating frame is called a subform, it is important to understand the relationship between the two, because in order to access the subform in the parent form or the opposite, you must know the object hierarchy to access and control the form programmatically.
1. Accessing and controlling objects in a subform in a parent form
In the parent form, the IFRAME, the subform, is a child of the Document object, and you can access the objects in the subform 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 on this tag, we can control the HTML contained in the IFRAME through the Document Object model DOM.
such as embedding test.htm files in example.htm and controlling some of the tagged objects in test.htm:
<iframe src= "test.htm" id= "Test" width= "200" height= " Scrolling= "No" frameborder= "0" ></iframe>
test.htm file code is:
<body>
</body>
If we want to change the text in the myH1 tag with ID number H1 hello,my , available:
document.myh1.innertext= "Hello,my Dear" (where document can be saved)
In the example.htm file, the child form that the IFRAME tag object refers to is consistent with the general DHTML object Model, and is no longer described as an object access control method.
2. Accessing and controlling objects in the parent form in a subform
In the subform, we can access the object in the parent window through its parent, or parental, object.
such as example.htm:
<body > <iframe name= "tt" src= "frame1.htm" Width= "No." Height= "scrolling=" "No" frameborder= "0" ></ Iframe>
<H1 id= "myH2" >hello,my wife</body>
If you want to access the header text in myH2 in frame1.htm and change it to "hello,my friend," We can write this:
parent.myh2.innertext= "Hello,my Friend"
Here the parent object represents the current form (the form on which Example.htm is located), and the object in the parent form is accessed in the subform, without exception through the parent object.
iframe, although embedded in another HTML file, but it remains relatively independent, is an "independent kingdom" Yo, in the single HTML features also apply to floating frames.
Imagine, through the IFRAME tag, we can change those unchanged content in an IFRAME, so that you do not have to repeat the same content, which is a bit like the process or function in the program design, reducing the number of tedious manual labor! In addition, it is important that it makes the modification of the page more feasible because, instead of modifying each page because of the layout adjustment, you simply need to modify the layout of a parent form.
Note that the Nestscape6.0 version does not support the IFRAME tag.
Example:
<iframe src= "page" width= "width height=" height "align=" arrangement can be left or right,center "scrolling=" whether there is a scroll bar to fill no or yes "></ Iframe>
<iframe frameborder=0 framespacing=0 height=25 marginheight=0 marginwidth=0
Name=main src= "/bgm/bgm.html" width=300></iframe>
After using the IFRAME found that the scroll bar is not beautiful want to use 2 pictures to replace ↑↓
How should it be achieved?
Reply:
Replace the <title> of the Web page with the following code; </title>
<script language= "JavaScript" >
function scroll (n)
{temp=n;
Out1.scrolltop=out1.scrolltop+temp;
if (temp==0) return;
SetTimeout ("Scroll (temp)", 80);
}
</SCRIPT>
<table width= ">"
<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= "valign=" Top "></TD>
</TR>
<TR>
< TD width= "valign=" "BOTTOM" ></TD>
</TR>
</TABLE>
The following code can be used to achieve the adaptive height of the IFRAME, that is, with the length of the page, automatically adapt to avoid the page and the IFRAME at the same time scroll bar.
The source code is as follows
<script type= "Text/javascript" >
* * IFRAME automatically adapt to the page **//
Enter a list of the names of the IFRAME that you want to automatically adjust height based on the height of the page
Separate the IDs of each iframe with commas. For example: ["myframe1", "myframe2"], you can have only one form, no commas.
Define the ID of the IFRAME
var iframeids=["Test"]
If the user's browser does not support IFrame to hide the iframe and yes to hide, no means no hidden
var iframehide= "Yes"
Function dyniframesize ()
{
var dyniframe=new Array ()
for (i=0; i<iframeids.length; i++)
{
if ( document.getElementById)
{
///Auto 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;
}
//To handle display problems with browsers that do not support IFRAME based on set parameters
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 sites of reference value:
Http://www.webshu.com/tutorial/tor/7,id=0408.htm//iframe the use of embedded 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
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
