页面上有iframe标签,<iframe id="content" name="content"></iframe> 可以用两种方法获取
1. document.getElementById("content"); 这种方法可用于只想改变iframe的 src 或者 border , scrolling 等 attributes(与property不是一个概念, property是不能写在标签内的,比如:scrollHeight,innerHTML等)
2. window.frames["content"]; 它取的是一个完整的DOM模型. 如果想取得iframe的页面(不是iframe本身),比如想得到iframe的document.body的内容, 就需要这种方法.但是如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以你要准备一个容错模式.
下面是测试页面
parentpage.html
Code
<!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="content" name="content" width="100%" height="500" src="subpage.html"></iframe>
</body>
</html>
<script language="javascript" type="text/javascript">
var aa_value="I'm a variant in Top window!";
var ifr_id = document.getElementById("content");
var ifr_window = window.frames["content"];
alert("Parent page: Get iframe's variable by document.getElementById('content').bb_var, return value:" + ifr_id.bb_var);
alert("Parent page: Get iframe's DOM model by document.getElementById('content').window, return value:" + ifr_id.window);
alert("Parent page: Get src by document.getElementById('content').src, return value:" + ifr_id.src);
alert("Parent page: Get href by window.frames['content'].document.location.href, return value:" + ifr_window.document.location.href);
alert("Parent window : Get iframe's variable by window.frames['content'].bb_var, return value:" + ifr_window.bb_var);
//调用iframe内的变量
alert("Parent window : Get iframe's innerHTML by window.frames['content'].document.body.innerHTML, return value:" + ifr_window.document.body.innerHTML);
function parentAlert(msg){
alert("I'm alerting from parent window ,and I received a msg:\n" + msg);
}
</script> subpage.html
Code
<!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 subpage.html page which is a iframe of parentPage.";
function bb(){
alert("Iframe : I'm a function in subpage.html page which is a iframe of parentPage.");
}
//获取父页面的变量
alert("Iframe : use parent page's variable: parent.ifr_id=" + parent.ifr_id);
alert("Iframe : use parent page's variable: parent.aa_value=" + parent.aa_value);
//通过父页面的ifr_id来改变 iframe的高度
alert("Iframe : iframe's clientHeight=" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;
alert("Iframe : iframe's scrollHeight : " + document.body.scrollHeight);
//调用父窗体的函数:
parent.parentAlert("Iframe : Calling function:parentAlert() in parent page.");
//改变父窗体的标题:
alert("Iframe : Changing parent page's title");
parent.document.title = "The title value changed!";
//通过父窗体的ifr_id来改变的父窗口里定义的iframe定义的属性:height,width,scrolling等
alert("Iframe : Changing parent page's border and scrolling.");
parent.ifr_id.border=0;
parent.ifr_id.width="150";
</script>
另外如果想根据子页面的内容高度自动设置iframe的高度可以在 parentpage.html 加上.
ifr_id.height = ifr_window.document.body.scrollHeight;
