Electron中打开和关闭⼦窗⼝以及⼦窗⼝向⽗窗⼝传值场景
⽤HTML和CSS和JS构建跨平台桌⾯应⽤程序的开源库Electron的介绍以及搭建HelloWorld：
Electron怎样进⾏渲染进程调试和使⽤浏览器和VSCode进⾏调试：
在上⾯搭建好项⽬以及知道怎样进⾏调试后。学习怎样打开和关闭⼦窗⼝以及⼦窗⼝向⽗窗⼝传值。
注：
实现
打开⼦窗⼝
在index.html中添加⼀个Button
<div>
<button id="popChildWindows">弹出⼦窗⼝</button>
</div>
然后在js中获取这个button，并设置其点击事件
var ElementById('popChildWindows');
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中设置其点击事件并关闭⼦窗⼝
sendmessage 关闭窗口var ElementById('closeChildWindows'); lick = 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);
})
接受消息
这⾥传送的消息是⼀个对象，效果如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。