postMessage
2021-01-26 本文已影响0人
_咻咻咻咻咻
postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。
otherWindow.postMessage(message, targetOrigin, [transfer]);
使用方法:
A页面:
const popup = window.open(url)
popup.postMessage('发送数据', url);
window.addEventListener('message', (e) => {
if(e.origin !== 'A') return
console.log(e.data) //收到数据
});
B页面:
window.addEventListener('message', (e) => {
//e.origin: 调用 `postMessage` 时消息发送方窗口的origin
if(e.origin !== 'B') return
console.log(e.data) //发送数据
//e.source:对发送消息的窗口对象的引用
e.source.postMessage('收到数据', e.origin);
//window.opener.postMessage('收到数据', e.origin);
});