場景
用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); })
接受消息
這里傳送的消息是一個對象，效果如下
