解决iframe跨域跟父级进行通讯问题【postMessage】 重点是跨域进行通讯！

 

解决iframe跨域跟父级进行通讯问题【使用postMessage】 重点是跨域进行通讯！

---

前言

iframe跟父级如果同源，iframe中可以通过window.parent对父级进行任意操作，例如：操作Dom、触发父级事件等，但父级跟iframe地址不同源(简单说明下，不同源是两个url地址所处域名不同或端口号不同，都会导致不同源)，此时如果我们通过window.parent去操作父级方法或者dom，游览器会因跨源导致报错  // Uncaught DOMException: Blocked a frame from accessing a cross-origin frame，进而无法操作父级有关方法、dom等，无法完成子与父之间通讯。

---

一、什么是postMessage？

postMessage()方法允许来自不同源的脚本采用异步方式进行有限通信。可以实现跨窗口、跨域消息传递。

二、postMessage游览器兼容

兼容性也是比较好的，可以放心大胆使用 图片来源 (caniuse.com)

三、如何使用

1. 子界面(iframe)调用window.parent.postMessage()通知父
2. 父监听子界面发送的信息，并对信息进行处理

具体实现方式如下：模拟子界面token失效后，通知父界面退出登录

---

子界面代码：

<script>
   //子界面发送通知 第一个参数是通知内容,当然也可以传递对象格式，建议传递对象格式时候转成JSON字符  串进行传输，以防止低版本IE不支持
  window.parent.postMessage("exit", "*");
</script>

父界面代码：

<script> 
 //全局监听一下传递消息的事件，兼容性写法，低版本IE上使用attachEvent进行监听。
 if (typeof window.addEventListener != 'undefined') {
      window.addEventListener('message', callbackMessage, false);
 } else if (typeof window.attachEvent != 'undefined') {
      window.attachEvent('onmessage', callbackMessage);
 }
 //监听到子传递消息之后传递的方法
 var callbackMessage = function(event) {
    //可以看下传递的参数，通常可以获取传递界面的域名端口用来安全性限制。
    console.log("event=>", event)
    //获取传递的数据
    var data = event.data
    //如果传递的数据是exit，执行退出操作
    if (data == 'exit') layui.view.exit()
}
</script>

---

总结

通过此方式可以解决父子直接传递消息，需要注意的是，父接受子传递消息时，应校验一下来源。