Electron window.open 子窗口和父窗口间的通信
window.opener.postMessage 子窗口向父窗口传递消息
window.opener.postMessage(message,targetOrigin)，是将消息发送给指定来源的父窗口，如果未指定来源则发送给 *，即所有窗口。
- message : 传递的消息，是 String 类型的值
- targetOrigin : 指定发送的窗口
在传递消息时，你需要在子窗口的页面中设置一些内容，所以我们不能使用远程的页面，而需要自己建立一个。在项目根目录，建立一个 popup_page.html 文件。 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是弹出子窗口</h2>
<button id="popBtn">向窗口传递信息</button>
</body>
<script>
var popBtn = this.document.querySelector('#popBtn')
popBtn.onclick = function(e){
window.opener.postMessage('我是子窗口的消息')
}
</script>
</html>
这样就可以从子窗口向父窗口发送信息了。
window.addEventListener 父窗口接收信息
先打开 demo3.html，在代码最下面，加一个标签，记得要给一个 ID，这样就用 JS 控制这个层了
<div id="mytext"></div>
父窗口接收信息需要通过 window.addEventListener，例如现在我们打开 demo3.js，也就是父窗口的 JS 代码部分，写入下面代码：
window.addEventListener('message',(msg)=>{
let mytext = document.querySelector('#mytext')
mytext.innerHTML = JSON.stringify(msg)
})
这样父窗口就可以顺利接收到子串口发送过来的信息了，也可以轻松的显示在子窗口中。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论