iframe子页和在相同或不同的域之间通信的父页面js

iframe子与父页面根据是否src属性在同一个域或iframe跨域的链接，和沟通方式是不同的。

1。Pater和同一个域中的子页面之间的对应关系

父页面parent.html
复制代码代码如下所示：
函数表示（）{
警报（父）；
}
功能callchild（）{
MyFrame.window.say ();
MyFrame.window.document.getElementById（按钮）。值=通话结束；
}
将child.html
复制代码代码如下所示：
函数表示（）{
警报（子）；
}
功能callparent（）{
Parent.say（）；
parent.window.document.getelementbyid（按钮）。值=通话结束；
}

方法调用

父页面调用子页面的方法：FrameName.window.childMethod（）；

子页面调用父页面的方法：parent.window.parentmethod（）；
DOM元素的访问

让window.document对象到页面后，您可以访问DOM元素
注意事项

确保操作iframe加载完成后，如果iframe尚未加载，它会调用方法或变量里面，和将发生错误。有两种方法来确定iframe加载或不。

1。在iframe onload事件

2。使用文档。发生=完整的判断

二、跨域父子页通信方法

如果iframe链接外部网页，因为安全机制不能用同一个域名通信。
父页传递子页的数据。

诀窍是使用定位对象的哈希值传递通信数据通过。在父页面设置iframe的src，添加数据的字符串，然后把数据在某种方式在子页面，例如，

1。在子页面，通过setInterval方法设置定时器，听location.href变化获取数据信息

2。然后，将在此基础上进行相应的逻辑处理数据信息

子页面将数据传递给父页面。

该技术是使用一个代理iframe，它嵌入到子页面，和父页面必须保持相同的域名，然后它可以充分利用子页面数据通信代理iframe以上第一种模式的原理，因为iframe剂和主页是一样的域，所以首页可以使用相同的方式得到的数据域。使用window.top或window.parent.parent获得参考顶部的浏览器窗口对象。