Skip to content

1.postMessage传递数据

窗口之间的交互:最简单的数据传递方式
主窗口发送 子窗口接收,安全跨域通信的方法,你可以向其他窗口发送消息,并在接收窗口中监听和处理这些消息。

js
const onClick_SendMessage = () => {
    if(win != undefined) {
        win.postMessage("some message","*");
    }
}

定义: otherWindow.postMessage(message, targetOrigin);

targetOrigin:是一个字符串,指定接收消息的窗口的源。只有当接收窗口的 origin(协议、主机和端口)与指定的 targetOrigin 相匹配时,消息才会被发送。

js
window.addEventListener('message', function(event) {
  // 处理接收到的消息
});

event参数是一个MessageEvent 对象,包含了有关接收到的消息的详细信息如下:

data:包含传递的消息数据。这可以是一个字符串、对象或其他类型的数据,取决于发送方发送的内容。
origin:消息的来源。这是一个字符串,表示发送消息的文档的源。它包括协议、主机和端口,如 “http://example.com”。
lastEventId :表示消息的 ID,对于服务器发送的事件 (Server-Sent Events) 来说特别有用。
source :发送消息的窗口、iframe 或 Worker 对象的引用。这允许你在回复消息时知道消息的来源。
ports:如果消息是通过 MessageChannel 对象发送的,这是一个包含所有与通道相关的 MessagePort 对象的数组。

使用场景:
  场景:有两个独立部署在不同服务器上的系统A和B的vue项目,想把B嵌入A中,B相当于A里面的一个模块,并且两个系统共用一套人员信息, 登录了A系统后打开B系统来,不单独打开新浏览器窗口,只是单纯的路由跳转,并且B系统不需要手动登录,直接用A系统的token或者信息调用接口自动登录。
具体实现:iframe及window.postMessage相结合。
https://blog.csdn.net/m0_46613429/article/details/139351299

2.子窗口回传数据

从子窗口返回数据

1. ipcRender.send()  发布  
2. ipcMain.on()    订阅