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

Posted Neutionwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Electron | Electron中打开和关闭子窗口以及子窗口向父窗口传值相关的知识,希望对你有一定的参考价值。

场景

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

用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试_BADAO_LIUMANG_QIZHI的博客-CSDN博客_electron 浏览器调试

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

注:

获取编程相关电子书、教程推送与免费下载。

实现

打开子窗口

在index.html中添加一个Button

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

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

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

function PopChiildWin()


然后在项目下新建一个子窗口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>
  
</body>

</html>

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

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

效果


关闭子窗口

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

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();

效果


子窗口向父窗口传值

在子窗口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 οnclick="sendMessageToParent()">向父窗口传递信息</button>
</body>
<script>
    function sendMessageToParent() 
        window.opener.postMessage(
            type: 1,
            message: "这是来自于子窗口的问候"
        );
    
</script>
</html>

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

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

接受消息

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

以上是关于Electron | Electron中打开和关闭子窗口以及子窗口向父窗口传值的主要内容,如果未能解决你的问题,请参考以下文章

electron

electron 中的 cookies 持久化保存到硬盘及恢复现场

electron+vue制作桌面应用--自定义标题栏最大/小化和关闭

Electron伪协议参数获取

-处理多窗口 | Electron实战

点击事件关闭 Electron 应用