html iframe

父页面

<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>