iframe 子页面与父页面通信根据 iframe 中 src 属性是同域链接还是跨域链接，通信方式也不同

一、同域下父子页面的通信

父页面 parent.html

<html>
<head>
    <script type="text/javascript">
        function sayParent(){
            console.log("parent.html");
        }
        function callChild(){
            // myFrame 是 iframe 标签的 name 属性值
            window.myFrame.window.sayChild(); // 调用子页面的 sayChild() 方法
            window.myFrame.window.document.getElementById("button").value = "调用结束"; // 获取子页面 button 的属性
            window.myFrame.window.document.body.offsetHeight; // 获取子页面 body 高度
        }
        callChild() // 调用子页面的方法
    </script>
</head>
<body>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
    <iframe name="myFrame" src="child.html"></iframe> <!-- 一定要有 name 属性 -->
</body>
</html>

子页面 child.html

<html>
<head>
    <script type="text/javascript">
        function sayChild(){
            console.log("child.html");
        }
        function callParent(){
            window.parent.window.sayParent(); // 调用父页面的 sayParent() 方法
            window.parent.window.document.getElementById("button").value = "调用结束"; // 获取父页面 button 的属性
            window.parent.window.document.body.offsetHeight; // 获取父页面 body 高度
        }
        callParent() // 调用父页面的方法
    </script>
</head>
<body>
    <input id="button" type="button" value="调用 parent.html 中的 say() 函数" onclick="callParent()"/>
</body>
</html>

方法调用

父页面调用子页面方法：window.FrameName.window.childMethod();
子页面调用父页面方法：window.parent.window.parentMethod();

另一种获取子页面方法

// 原生 JS 获取方式：
var frameWin = document.getElementById("ifr").contentWindow;
// jQuery 获取方式：
var frameWin = $('#ifr')[0].contentWindow;

DOM元素访问

获取到页面的 window.document 对象后，即可访问 DOM 元素

注意事项

要确保在 iframe 加载完成后再进行操作，如果 iframe 还未加载完成就开始调用里面的方法或变量，会产生错误。判断 iframe 是否加载完成有两种方法：

iframe 上用 onload 事件
用 document.readyState=="complete" 来判断

二、跨域父子页面通信方法

如果 iframe 所链接的是外部页面，因为安全机制就不能使用同域名下的通信方式了

父页面向子页面传递数据

实现的技巧是利用 location 对象的 hash 值，通过它传递通信数据。在父页面设置 iframe 的src 后面多加个 data 字符串，然后在子页面中通过某种方式能即时的获取到这儿的 data 就可以了，例如：

在子页面中通过 setInterval 方法设置定时器，监听 location.href 的变化即可获得上面的 data 信息
然后子页面根据这个 data 信息进行相应的逻辑处理

子页面向父页面传递数据

实现技巧就是利用一个代理 iframe，它嵌入到子页面中，并且和父页面必须保持是同域，然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理 iframe，然后由于代理的 iframe 和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。使用 window.top 或者 window.parent.parent 获取浏览器最顶层 window 对象的引用。

iframe 是否加载完成的完美方法

IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册

var iframe = document_createElement_x_x("iframe");
iframe.src = "http://www.020cityshop.com";
if (iframe.attachEvent) { // IE浏览器识别
    iframe.attachEvent("onload",function() {
        alert("Local iframe is now loaded.");
    });
}
iframe.onload = function() { // 其他浏览器识别。但是不能将此代码写入 else 里面，因为火狐浏览器进不去 else
    alert("Local iframe is now loaded.");
};

JS之iframe子页面与父页面通信