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 iframe, ifr is the ID and NAME value of an existing iframe: Here is a quote: If you only want to change the src or border, scrolling and other attributes of the iframe (which is not the same concept as property, property cannot be written in the tag, 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 gets 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 you call the iframe's DOM model when the iframe page is not fully loaded, a serious error will occur, so you need to 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 quoted snippet: bb.htm
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.
<!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>
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>