iframe父子页面通信

最近因为公司的后台系统业务过于庞大，故将前端按业务模块拆分成几个项目通过iframe标签来集成，由此引发一系列的通信问题，特此总结一下处理方案。注意跨文档操作只支持同源的同域名下的文档，如果不同域名下的页面会产生跨域的问题。

1、父页面获取子页面中的元素
window.frames[0].document.querySelector('.element')
document.getElementById('iframeId').contentDocument.querySelector('.element')
window.frames['iframeId'].contentDocument.querySelector('.element')

2、父页面调用子页面的方法
document.getElementById('iframeId').contentWindow.location.reload()

3、子页面获取父页面中的元素
parent.document.getElmentById(
4、子页面调用父页面的方法
parent.window.helloWorld()

---

我们都知道浏览器有同源策略的限制，故实际使用过程中如果父页面与子页面不在同一个服务器下，上面的方案就会出现跨域错误，因此上面的方案还是存在诸多限制。比如我的两个项目本地运行时就使用两个不同的端口，所幸H5新增的postMessage对象让我们可以实现跨域通信。

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow 其他窗口的一个引用
• message 要发送的数据，可以是一个对象，在某些浏览器中存在兼容性，一般建议转成字符串后发送。
• targetOrigin 指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI，如果协议、主机地址或端口有一项不匹配，那么消息就不会被发送。
• transfer 可选， 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

下面举个小栗子，我用的技术栈为vue全家桶。首先由父页面发送一个token给子页面，子页面接收到token后做校验，校验成功后向源窗口发送数据（校验代码略）。

1、父页面向子页面发送消息

this.$refs.iframe.onload = () => {
    this.$refs.iframe.contentWindow.postMessage({token: token}, '*');
}

2、子页面接收到父页面的数据，并返回数据

window.onmessage = function(e) {
      if(e.data) {
            window.parent.postMessage({msg: 'hello world'}, e.origin);
      }
}

3、父页面接收子页面返回的数据

window.onmessage = function(e) {
      console.log(e.data)
}

其中onmessage事件中的event对象中有三个重要的属性：

• data：顾名思义即为接收到的数据。
• source： 发送消息的窗口对象。
• origin : 发送消息窗口的源（协议+主机+端口号）

通过对返回数据的监听我们就可以实现跨域通信实现我们想要的效果了。