简单使用postMessage 解决 iframe跨域通信

postMessage的定义

postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

发送数据:

// 父级页面发送数据
window.postMessage(message, targetOrigin, [transfer]);
window.postMessage(‘要发送的消息对象’, 可指定目标窗口域名也可 '*'发送到所有窗口);
// 子级页面发送数据
window.parent.postMessage(data,'*');
// 或
top.postMessage(data,'*');

message

要发送到其他窗口的数据,它将会被!结构化克隆算法序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.

targetOrigin

通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*“表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为”/"

transfer | 可选属性

是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.

接收数据

window.addEventListener('message',e=> {
        console.log(e)
});

下面是打印出的结果 data属性为传输过来的数据

若用到的地方很多 建议加上 targetOrigin 属性 并且给数据加好type确保数据正确的被接收

欢迎对这个有研究、有兴趣或者发现文章有错误的地方的伙伴们和我交流,共同进步~~~