场景
用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");
效果
关闭子窗口
在前面打开子窗口时获取窗口对象
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 onclick="sendMessageToParent()">向父窗口传递信息</button> </body> <script> function sendMessageToParent() { window.opener.postMessage({ type: 1, message: "这是来自于子窗口的问候" }); } </script> </html>
然后在父窗口所引用的js中通过
window.addEventListener("message", (msg) => { console.log("接收到的消息：", msg); })
接受消息
这里传送的消息是一个对象，效果如下
博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
分类:
Electron
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了