1.postMessage传递数据
窗口之间的交互:最简单的数据传递方式
主窗口发送 子窗口接收,安全跨域通信的方法,你可以向其他窗口发送消息,并在接收窗口中监听和处理这些消息。
const onClick_SendMessage = () => {
if(win != undefined) {
win.postMessage("some message","*");
}
}
定义: otherWindow.postMessage(message, targetOrigin);
targetOrigin:是一个字符串,指定接收消息的窗口的源。只有当接收窗口的 origin(协议、主机和端口)与指定的 targetOrigin 相匹配时,消息才会被发送。
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() 订阅