场景

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

接受消息

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

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

win7 64位系统中“打开或关闭Windows功能”列表空白
参考Jayzai的博文: "win7 64 系统中打开或关闭windows功能空白" 下载微软补丁KB947812,这个补丁是一个系统更新准备工具. 32位补丁名称:Windows ...
ubuntu 如何关闭离线模式_如何在macOS中打开或关闭Mac暗黑模式
苹果在macOS Mojave中为Mac引入了暗模式.暗模式是系统级别的设置,可与Mac随附的所有应用一起使用.第三方应用也可以选择使用暗黑模式.暗黑模式使您更轻松地专注于工作,并且对眼睛也很容易.装 ...
打开计算机无法关闭窗口,电脑中“打开或关闭Windows功能”窗口出错无法显示怎么解决...
‍ 当我们想要开启或删除电脑系统中的某些应用时,需要打开控制面板中的"打开或关闭Windows功能"窗口来进行设置.但是,有的用户可能由于某些原因导致打开该窗口出错,无法显示里面 ...
EditPlus 设置关闭后不打开未关闭的文件，以及设置在同一个窗口打开多个文件
打开多个文件是分别在多个窗口中打开的,,请问如何改成EditPls2中那样? 答:这是因为你在设置中设置成允许打开多个进程实例,只要取消该设置即可. 中文选项设置:单击菜单 "工具→首选项& ...
eclipse下如何打开被关闭的项目_如何在Windows 10中打开和关闭平板电脑模式
默认情况下,将可转换计算机重新配置为平板电脑时,Windows 10会自动切换到平板电脑模式.如果你希望手动打开或关闭平板电脑模式,可以通过多种方法进行. 自动平板电脑模式在Windows 10中的工 ...
chrome硬件加速_如何在Chrome中打开和关闭硬件加速
chrome硬件加速 Google Chrome comes equipped with hardware acceleration, a feature which takes advantage ...
子组件是表格时向父组件传值
子组件是表格,点击父组件中的某一行,弹出子组件另一个表格,当子组件中选择,触发onChange事件时,获取触发该事件对象e,通过e.target.value获取value值,将value值更新到从父组 ...
win7 64 系统中打开或关闭windows功能空白
我用的是解决方案3搞定的解决方案1. 1)点击WIN7电脑左下角菜单--运行--输入"services.msc"回车,进入服务管理器. 2)启动Windows Module ...
chrome同步_如何在Chrome中打开或关闭同步
chrome同步 Google Chrome lets you sync up your Google account to your browser across any device. When ...

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

场景

实现

打开子窗口

效果

关闭子窗口

效果

子窗口向父窗口传值

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

最新文章

热门文章