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);
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容