使用Web前端技术开发桌面应用---Electron中Window.open的子窗口和父窗口间的通信

news/2024/7/19 15:07:25 标签: js, 前端, electron

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

上期博客在最后，学习了用window.open打开了子窗口，这期学习一下父子窗口如何通信，通信在任何框架中都是重要的环节。

window.opener.postMessage 子窗口向父窗口传递消息

window.opener.postMessage(message,targetOrigin),是将消息发送给指定来源的父窗口，如果未指定来源则发送给*，即所有窗口。

message : 传递的消息，是String类型的值
targetOrigin : 指定发送的窗口

在传递消息时，你需要在子窗口的页面中设置一些内容，所以我们不能使用远程的页面，而需要自己建立一个。在项目根目录，建立一个index4.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父窗口接收信息

先打开index3.html,在代码最下面，加一个<div>标签，记得要给一个ID，这样就用JS控制了。

<div id="mytext"></div>

父窗口接收信息需要通过window.addEventListener,例如现在我们打开index3.js，也就是父窗口的JS代码部分，写入下面代码：

window.addEventListener('message',(msg)=>{
    let mytext = document.querySelector('#mytext')
    mytext.innerHTML = JSON.stringify(msg)
})

这样父窗口就可以顺利接收到子串口发送过来的信息了，也可以轻松的显示在子窗口中。

记得上期博客，我们在index3.js中写过这段代码：

myBtn.onclick = function(){
    window.open('https://blog.csdn.net/m0_46171043?spm=1001.2101.3001.5343');
}

我们把window.open中的url链接，换成我们上面新建的那个index4.html

myBtn.onclick = function(){
    window.open('./index4.html');
}

这样index3.html调取index4.html就会产生一个父子关系，并且完成我们上面写好的通信内容。

下面我们运行一下代码：
在这里插入图片描述
首先出现的是index3.html的窗口，我们点击打开子窗口的按钮后，会弹出index4.html的窗口，然后我们点击向父窗口传递信息的按钮，再看index3.html传递的信息就被渲染到页面内了。

这样我们就完成了在Electron中Window.open的子窗口和父窗口间的通信。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢
在这里插入图片描述