使用iframe嵌套实现父子窗口通信

1. 父窗口：

<!--我是父窗口-->  
<div class="parent" >
   <iframe src="子窗口链接" id="iframe"></iframe>
</div>
<script>
//监听子窗口信息
 window.addEventListener('message',function(event){
  // event即为子窗口传来的值
   ...
 })
// 此处也可以写成
window.addEventListener('message', receiveMessage， false)
function receiveMessage(event) {
  // 在这个里面接收子窗口给父窗口传来的值
}
//父窗口给子窗口发消息，
document.getElementByID('iframe').contentWindow.postMessage(msg,'子窗口源');
</script>

2. 子窗口

<!--我是子窗口-->  
<div class="child"></div>
<script>
//子窗口给父窗口发消息
try {//放到trycatch里面，解决有些手机卡住报错问题
  window.top.postMessage(msg,'父窗口源');
      //嵌套一层使用window.top(parent),多层window.frameElement
      //使用top而不是window，top指向iframe最顶层窗口
  } catch (error) {

}

//监听父窗口信息
window.addEventListener('message',function(event){
// event即为父窗口传来的值
   ...
})
// 此处也可以写成
window.addEventListener('message', receiveMessage， false)
function receiveMessage(event) {
  // 在这个里面接收父窗口给父窗口传来的值
}
</script>

注意：
父窗口给子窗口发信息，需要用iframe的contentWindow属性作为调用主体。
子窗口给父窗口发的信息需要使用window.top，多层iframe使用window.frameElement。
子视窗必须要在父窗口的onload事件执行之前添加message事件监听。