Electron中打开和关闭子窗口以及子窗口向父窗口传值

红太狼 2023-10-06 10:07 10阅读 0赞

## 场景 ##

用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/106413828][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106413828]

Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/106414541][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106414541]

在上面搭建好项目以及知道怎样进行调试后。学习怎样打开和关闭子窗口以及子窗口向父窗口传值。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

### 打开子窗口 ###

在index.html中添加一个Button

<div>
      <button id="popChildWindows">弹出子窗口</button>
    </div>

然后在js中获取这个button，并设置其点击事件

var btnPopChiildWin=document.getElementById('popChildWindows');
    btnPopChiildWin.onclick = PopChiildWin;
    
    function PopChiildWin()
    {
    
    }

然后在项目下新建一个子窗口popup\_page.html

然后在上面js的点击事件中打开此窗口

//打开子窗口  第一个参数是子窗口的路径  第二个参数是起的别名
        window.open('popup_page.html', "popup");

### 效果 ###

![20200531220048714.gif][]

### 关闭子窗口 ###

在前面打开子窗口时获取窗口对象

let subWin;
    function PopChiildWin()
    {
        //打开子窗口  第一个参数是子窗口的路径  第二个参数是起的别名
        subWin = window.open('popup_page.html', "popup");
    }

然后在html中新增一个button

<button id="closeChildWindows">关闭子窗口</button>

然后在js中设置其点击事件并关闭子窗口

var btnCloseChiildWin=document.getElementById('closeChildWindows');
    btnCloseChiildWin.onclick = CloseChiildWin;
    
    function CloseChiildWin()
    {
        //关闭子窗口 
        subWin.close();
    }

### 效果 ###

![20200531220108241.gif][]

### 子窗口向父窗口传值 ###

在子窗口popup\_page.html 中新建一个按钮并设置其点击事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h2>这是弹出的子窗口</h2>
        <h2>公众号：霸道的程序猿</h2>
        <button onclick="sendMessageToParent()">向父窗口传递信息</button>
    </body>
    <script>
        function sendMessageToParent() {
            window.opener.postMessage({
                type: 1,
                message: "这是来自于子窗口的问候"
            });
        }
    </script>
    </html>

然后在父窗口所引用的js中通过

window.addEventListener("message", (msg) => {
        console.log("接收到的消息：", msg);
    })

接受消息

这里传送的消息是一个对象，效果如下

![20200531220127286.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106413828]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106414541]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[20200531220048714.gif]: https://img-blog.csdnimg.cn/20200531220048714.gif
[20200531220108241.gif]: https://img-blog.csdnimg.cn/20200531220108241.gif
[20200531220127286.gif]: https://img-blog.csdnimg.cn/20200531220127286.gif