解决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失效后，通知父界面退出登录

---

子界面代码：

父界面代码：

---

总结

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