嵌入式iframe子页面与父页面js通信的方法
本文实例讲述了嵌入式iframe子页面与父页面js通信的方法。分享给大家供大家参考。具体分析如下：
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。
一、同域下父子页面的通信
父页面parent.html：
<html>
<head>
<scripttype="text/javascript">
functionsay(){
alert("parent.html------>I'matparent.html");
}
functioncallChild()
{
//document.frames["myFrame"].window.say();//只适用于ie浏览器
myFrame.window.say();
myFrame.window.document.getElementById("button").value="我变了";
}
</script>
</head>
<body>
<inputtype=buttonvalue="调用child.html中的函数say()"onclick="callChild()">
<iframename="myFrame"src="child.html"></iframe>
</body>
</html>
子页面child.html：
<html>
<head>
<scripttype="text/javascript">
functionsay()
{
alert("child.html--->I'matchild.html");
}
functioncallParent(){
parent.say();
parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
}
</script>
</head>
<body>
<inputid="button"type=buttonvalue="调用parent.html中的say()函数"onclick="callParent()">
</body>
</html>方法调用
如上面示例所示父页面调用子页面的方法可通过：FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法：parent.window.parentMethod();
DOM元素访问
根据FrameName.window得到了子窗口对象之后，再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过
document.getElementById(),document.getElementsByName()[index]如：
parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button")其中的window都是可以省略的。
注意事项
要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：
1.在Iframe上用onload事件;
2.用document.readyState=="complete"来判断
二、跨域父子页面通信方法
如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。
父页面向子页面传递数据
实现的技巧就是利用location对象的hash值，通过它传递通信数据，我们只需要在父页面设置iframe的src后面多加个#data字符串（data就是你要传递的数据），然后在子页面中通过某种方式能即时的获取到这儿data就可以了，其实常用的一种方式就是：
1.在子页面中通过setInterval方法设置定时器，监听location.href的变化即可获得上面的data信息
2.然后子页面就能根据这个data信息进行相应的逻辑处理。
子页面向父页面传递数据
实现的技巧就是利用一个代理IframeC，它嵌入到子页面中，并且和父页面必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把子页面的数据传递给iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A，因为，iframeC和主页面是同域的，所以它们之间传递数据就变得简单多了，属于同域名下的通信问题了，如前面所讨论的，在这里的可以使用一个经常使用的属性window.top(也可以使用window.parent.parent)，它返回对载入浏览器得最顶层window对象的引用，这样我们就能直接条用父页面中方法啦。
希望本文所述对大家的javascript程序设计有所帮助。