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

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

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
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

打开子窗口

在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");

效果

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

 

 

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

关闭子窗口

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

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

效果

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

 

 

 

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

子窗口向父窗口传值

在子窗口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);
})

接受消息

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

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

 

 

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

相关文章：

  • 2021-12-09
  • 2022-12-23
  • 2022-12-23
  • 2022-02-22
  • 2022-01-16
  • 2021-12-11
  • 2021-08-26
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-02-19
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-25
  • 2022-02-19
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode