父页面
<html>
<head>
<script type="text/javascript">
// 父页面变量
var parentCount = '0';
// 页面（含子页面）加载完成后执行方法
function onload() {
// 父页面获取iframe
var iframe = window.document.getElementsByTagName('iframe')[0];
alert(iframe.width);
// 获取子页面中的js变量
alert(iframe.contentWindow.childCount);
// 获取子页面中的DOM对象
alert(iframe.contentWindow.document.getElementById('child').value);
}
</script>
</head>
<body onload='onload();'>
<iframe src='http://localhost:8080/test/iframeTest.html' width='800px' height='600px'></iframe>
<input type="text" id="parent" value="parent" />
</body>
</html>
<!--
跨页面操作涉及域的概念，放在服务器上面才能够正常使用。
如果在本地直接用浏览器打开（地址栏是file:///...）将会报错。
错误信息如下：
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
执行顺序：
首先加载父页面，然后加载子页面，故在子页面中能够获取到父页面的变量parentCount=0和父页面的parent元素。
在父页面中获取子页面变量及对象时需要等子页面加载完成。
-->
子页面
<html> <head> <script type="text/javascript"> // 子页面变量 var childCount = '1'; // 子页面获取iframe var iframe = window.parent.document.getElementsByTagName("iframe")[0]; alert(iframe.height); // 获取父页面中的js变量 alert(window.parent.parentCount); // 获取父页面中的DOM对象 alert(window.parent.document.getElementById("parent").value); </script> </head> <body> <input type="text" id="child" value="child" /> </body> </html>