postMessage

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);
});

你可能感兴趣的:(postMessage)