【再学前端】 postMessage

[Samgao0312]

postMessage 是 H5 新的跨域传值方法，多用于窗口间数据通信。常见使用场景包括：

• 父子页面 iframe 跨域通信；
• 通过iframe授权登录;
• 不同标签页间通信；

以下是 目标窗口 监听 message 事件所接收到的事件对象：

一、父子页面 iframe

• 父 -> 子： 父传子，即父页面传递信息，子页面接受信息；
• 子 -> 父：即子页面是信息发送方，父页面时信息接受方；

1.1 父 -> 子

// 父页面向子页面发送消息
let data = {type: 'answerResult', data: jsonData.data};
this.$refs.iframe.contentWindow.postMessage(data, '*');

// 子页面接收信息
window.addEventListener('message', function (e) {
    console.log(e);
})

1.2 子 -> 父

window.parent: 返回当前窗口的父窗口；

// 子页面向父页面发送消息
let parentData = {type: 'passDataBack', data: passData};
window.parent.postMessage(parentData, '*');

// 接收消息方法
window.addEventListener('message', function (e) {})

二、跨标签页通信

• window.open() : 该方法打开新的tab窗口或者切换到已打开的tab窗口，同时会返回目标窗口window对象。

当你使用多页应用时，需要两个页面之间进行实时的通信，而又不想通过服务端进行 websocket 之类借助服务端实现的通信，那 postMessage 将是一个很好的方式。子页面可以通过 window.open 方法打开，var win = window.open(pageurl, '_blank'); 那么这个 win 就是新打开的 tab 窗口的引用，可以同win.postMessage 方法来对新打开的tab页发送消息。

• 当你在新打开的页面监听 message 事件，便可以从 message 事件对象中得到原页面发送的消息。
• 同时可以得到原页面的 window对象的引用 source，这时候就可以在新的页面上利用这个 source 调用 postMessage 方法来对原页面发消息。这样就实现了两个页面的实时通信。

三、使用场景

1. 页面之间的通信
2. 通过iframe授权登录

---

参考阅读

• https://www.cnblogs.com/goloving/p/15381013.html
• https://tiantang-tt.github.io/2017/07/03/postMessage-in-html5/