通过postMessage进行跨域通信

最近工作中遇到一个需求,场景是:将一个pc端a页面作为主要展示内容内嵌在另一个pc端b页面中,用户在a页面中点击关闭的时候,然后b页面也实现关闭的效果。

这里首先想到就是通过iframe将a页面内嵌到b页面中,然后a页面通过postMessage方法,把变化的数据发送给b页面,b页面通过addEventListener接收数据,进行关闭操作。

postMessage()语法以及相关api说明

targetWindow.postMessage(message,targetOrigin,[ transfer ]);复制代码

targetWindow

对将接收消息的窗口的引用。获得此类引用的方法包括:
  • window.open (生成一个新窗口然后引用它),
  • window.opener (引用产生这个的窗口),
  • HTMLIFrameElement.contentWindow