iframe+postMessage实现跨域通讯

前言

需求背景：

最近开发管理系统，须要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片连接，而后返回管理系统，显示图片

实现思路：

1. 上传图片时，须要在本窗口跳转到图片管理系统，而且两个系统之间要通讯
2. 考虑到两个系统是不一样的端口号，存在跨域问题，这时发现HTML5新增了一个API-window.postMessage()，因而就决定用iframe结合window.postMessage()实现
3. 在页面中嵌入一个iframe，将图片管理系统嵌入到当前的管理系统中，结合window.postMessage()实现跨域通讯

项目背景

• 该管理系统基于React.js搭建，在此简称为A页面，地址为http://www.blogoog.com:8000
• 图片管理系统基于Vue.js搭建，在此简称为B页面，地址为http://www.blogoog.com:8088

具体实现

参考资料

• iframe-MDN
• window.postMessage()-MDN

一、A页面使用到的语法

window.postMessage()

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

• otherWindow：其余窗口的一个引用（在这里我使用了iframe的contentWindow属性）
• message：将要发送到其余window的数据（能够不受限制的将数据对象安全的传送给目标窗口而无需本身序列化，缘由是由于采用了结构化克隆算法）
• targetOrigin：接收信息的URL（在这里我固然填的B页面的URL）
• transfer：可选参数（在这里我没使用）

具体参考：window.postMessage()-MDN

window.addEventListener('message', receiveMessage, false);

target.addEventListener(type, listener, options);

• type：表示监听事件类型的字符串
• listener：当所监听的事件类型触发时，会通知的一个对象或者一个函数
• potions：可选参数（在此我用false，表示在listener被调用以后不会自动移除）

具体参考：addEventListener-MDN

receiveMessage = (event) => {}

• event.data：从另外一个window传递过来的对象（包含传递过来的全部信息）
• event.origin||event.originalEvent.origin：window.postMessage()发送消息的目标URL
• event.source：对发送消息的窗口对象的引用

---

注意点！！！

• 在页面内嵌入iframe页面的状况下，须要等到页面内的iframe页面，也就是B页面加载完成以后，才能进行postMessage跨域通讯
• event.origin中的origin不能保证是该窗口的当前origin或者将来origin，由于postMessage被调用后，可能会被导航到不一样的位置，因此须要作个异常状况判断处理origin !== 'http://www.blogoog.com:8088'

---

二、B页面使用到的语法

top.postMessage('data', 'http://www.blogoog.com:8000')

• 参考上面A页面的语法
• 为何用top而不用window下面再讲

window.addEventListener('message', receiveMessage, false);

• 参考上面A页面的语法

receiveMessage = (event) => {}

• 参考上面A页面的语法

---

window.postMessage()中的window究竟是啥？

始终是你须要通讯的目标窗口

• A页面中：A页面向B页面发送跨域信息，window就是在A页面中嵌入的iframe指向的B页面的window，即：iframe.contentWindow
• B页面中：B页面想A页面发送跨域信息，window就是A页面的window，在这里由于B页面时嵌入到A页面中的，对于B页面来说，window就是top或者parent

须要特别注意的坑

1. 必定要等A页面嵌入的B页面加载完成以后，再进行postMessage跨域通讯
2. 必定要对origin作判断，去掉不是来自咱们目标窗口的origin，防止来自其余origin的攻击
3. 着重注意window.postMessage()中window的用法，明确目标窗口的window

献上代码

A页面

B页面

个人博客即将搬运同步至腾讯云+社区，邀请你们一同入驻：https://cloud.tencent.com/dev...