The function of the iframe element is to embed a document within a document and create a floating frame. Many people don't quite understand how iframe is controlled, and they are basically still in a vague state of understanding.
Two notes on iframes, ifr is the ID and NAME value of an existing iframe:
The following is a quoted fragment:
document.getElementById(“ifr”);
window.frames[“ifr”];
If you want to use the function in the iframe, the variable must go through the second method. Because it takes a complete DOM model (I don’t know if this is correct). The first method just takes out an OBJECT.
If you only want To change the iframe's src or border, scrolling and other attributes (which are not the same concept as property, property cannot be written in tags, such as: scrollHeight, innerHTML, etc.), you need to use the first method.
If you want to get the page of the iframe ( Not the iframe itself), you need to use the second method, because it obtains a complete DOM model. For example, if you want to get the content of the document.body of the iframe, you can only use the second method.
Also note that if When the iframe page is not fully loaded, a serious error will occur when calling the iframe's DOM model. Therefore, you must prepare a fault-tolerant mode.
The following are examples, one is aa.htm, and the other is bb.htm!
aa .htm
code: The following is a quote fragment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head>
<title>Untitled Page</title>
<style type="text/css">
<!--
body{
margin:0px;
}
-->
</style>
</head>
<body>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</body>
</html>
<script language="javascript" type="text/javascript">
var aa_value="I'm a variant in Top window!";
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
alert("Alert from Top window : Can't get iframe's variant by ifr_id, it will return :" + ifr_id.bb_var);
alert("Alert from Top window : Can't get iframe's DOM model by ifr_id ,it will return :" + ifr_id.window);
alert("Alert from Top window : Get src from id :" + ifr_id.src);
alert("Alert from Top window : Get href from window:" + ifr_window.document.location.href);
//Since bb.htm may not be loaded yet, downloading may cause an error.
//Call the function ifr_window.bb() in the iframe;
//Call variables within iframe
alert("Alert from Top window : " + ifr_window.bb_var);
//
alert("Alert from Top Window :" + ifr_window.document.body.innerHTML);
function aa(msg){
alert("I'm alerting from Top window ,and I received a msg:n" + msg);
}
</script>
bb.htm
Code: The following is a quoted snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head>
<title>sub frame</title>
<style type="text/css">
<!--
html,body{
margin:0px;
width:90%;
}
-->
</style>
</head>
<body>
I'm a sub frame!
<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...
</body>
</html>
<script language="javascript" type="text/javascript">
var bb_var="I'm a variable in ifr";
functionbb(){
alert("Alert from iframe :I'm frame ifr's function")
}
//Get the variables of the parent page
alert("Alert from iframe parent.ifr_id::" + parent.ifr_id);
alert("Alert from iframe parent.aa_value : " + parent.aa_value);
//Change the height of the iframe through the ifr_id of the parent page
alert("Alert from iframe : ifr's clientHeight :" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;
alert("Alert from iframe : ifr's scrollHeight : " + document.body.scrollHeight);
//Call the function of the parent form:
parent.aa("I will calling a function which is Top window's ");
//Change the title of the parent form:
alert("Alert from iframe : I will changing Top window's title");
top.document.title="The title value changed";
//The border and scrolling changed through the ifr_id of the parent form
alert("Alert from iframe : I will change my border and scrolling :");
top.ifr_id.border=0;
top.ifr_id.scrolling="no";
</script>