electron 点击关闭_点击按钮关闭模态窗口《 Electron 桌面应用：窗口 》

最新推荐文章于 2024-07-19 15:44:09 发布
最新推荐文章于 2024-07-19 15:44:09 发布
阅读量2.3k 收藏
点赞数
文章标签： electron 点击关闭
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39965102/article/details/112819212
版权
这篇博客介绍了如何在Electron应用中复制并粘贴按钮元素到新的HTML页面，修改按钮文字和ID，然后利用`remote`模块获取当前窗口，并监听按钮点击事件来关闭窗口。通过`childWindow.close()`方法实现模态窗口的动态创建和关闭功能。
摘要由CSDN通过智能技术生成

复制一下这个窗口上的按钮元素 .. 打开 child_window.html ... 把按钮粘贴到这个页面上 .. 修改一下按钮上的文字 .. Close .. 按钮上的 id 换成 close ..

在页面的 script 里面， 先把 remote 从 electron 模块里面拿出来用一下 .. 因为我们需要用到它得到当前窗口 ..

下面再添加一个 childWindow .. 它的值用一下 remote.getCurrentWindow() 这个方法 .. 获取到当前的窗口 ..

然后找到页面上的关闭按钮 .. closeBtn . 它的值用一下 document.getElementById .. close .. 再去监听一下 closeBtn 这个按钮上的 click 事件 .. 发生这个事件的时候我们要关掉当前窗口 .. 执行一下 childWindow 上的 close 方法 ..

重新运行一下应用 ..

按一下 Open ，会打开一个模态窗口 .. 再按一下这个窗口上的 Close 按钮 .. 可以关掉当前打开的这个模态窗口 ..

weixin_39965102
关注
第八讲Electron中使用dialog模块
星火燎猿
08-11 1941
第八讲Electron中使用dialog模块介绍示例包括的方法dialog.showOpenDialogSync([browserWindow, ]options)dialog.showOpenDialog([browserWindow, ]options)dialog.showSaveDialogSync([browserWindow, ]options)dialog.showSaveDialog([browserWindow, ]options)dialog.showMessageBoxSync([br
electron 点击关闭_electron阻止应用关闭
weixin_33536190的博客
12-31 4637
下载Quick start项目这里为了便于演示，我们直接从GitHub上下载Quick start项目git clone https://github.com/electron/electron-quick-startcd electron-quick-startnpm install安装成功后，执行npm start运行项目。就可以看到hello world界面了。阻止关闭方法一这里直接监听on...
Electron使用指南 - [15] 删除信息
sdasadasds的博客
12-03 326
在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮 修改 /src/components/button.js，编写创建的按钮 JS 代码，同时修改注入语句，将被点击条目的index 值传递到窗口的按钮上。 1.1 button.js export default ` let readitClose = document.createElement('div') readitClose.innerText = '关闭窗口' readitClose.styl
Electron去掉窗口边框并添加关闭按钮的实现步骤
最新发布
云加速
07-19 147
如果你需要更详细的设置或遇到问题，你可能需要查看Electron的官方文档或寻求社区的帮助。: 在Electron中，你可以使用HTML和CSS来创建自定义的关闭按钮，并使用JavaScript来添加点击事件，以便关闭窗口。中，我们使用HTML和CSS创建了一个自定义的关闭按钮，并使用JavaScript添加了一个点击事件来关闭窗口。: 如果你还没有创建一个Electron应用，你需要先初始化一个新的Node.js项目，并安装Electron。进程的代码中设置窗口的样式。: 在Electron中，
electron +vue自定义点击最大化、最小化和关闭窗口事件功能
任磊
04-18 4521
首先简单的理解一下Electron的进程类型——渲染进程和主进程 主进程： Electron 运行 package.json 的 main 脚本的进程。 渲染进程: 在 web 页面运行的进程。 一个 Electron 应用有且只有一个主进程。 主进程中运行的脚本通过创建web页面来展示用户界面。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。 主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。 主进程和渲染进程可以相互通信。
electron 子视图BrowserView
weixin_43294560的博客
05-02 7787
类似webview标签,可以用来替代webview标签 1、引入electron中的BrowserView const {app, BrowserWindow,BrowserView} = require('electron') 2、创建BrowserView实例 let view=new BrowserView(); 3、设置视图大小和位置 view.setBound...
【Electron-playground系统】窗口篇
gcwstring的博客
10-28 1077
窗口篇 作者：Kurosaki 本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题。 官方文档 虽然比较全面，但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解，才能应对各种需求。 1. 创建窗口 通过BrowserWindow，来 创建 或者 管理 新的浏览器窗口，每个浏览器窗口都有一个进程来管理。 1.1. 简单创建窗口 const { BrowserWindow } = require('electron'); const win = ne
Electron创建Modal的方法(固定在主窗口上方随着主窗口缩放而缩放)
weixin_43582313的博客
06-07 2131
最近开始用Electron开发桌面应用，有一个需求是点击按钮弹出一个Modal，随着窗口的缩放而缩放，现在来总结记录一下electron如何在渲染进程创建一个模态窗口。 创建窗口就要用到browserwindow这个API，但是这个API只有在主进程才能使用。要想在渲染进程中使用这个API就需要用到remote这个中间件。 要想创建modal需要确定"父子关系"，即需要在主窗口设置modal为true，在需要创建modal的地方（子窗口）设置父窗口parent路径 // 主窗口（也可以说是主进程） cons
大前端 - 泛客户端 - Electron
weixin_38245947的博客
06-27 1220
Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 来绘制界面和控制布局，使用 JavaScript 来控制用户行为和业务逻辑，使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用到桌面 GUI 开发中。至此，JavaScript 这门神奇的语言除了能开发 Web 前端、Web
VtWindow:用Vanilla JS编写的用于浏览器的虚拟窗口系统
04-30
这种功能利用了浏览器的Web API，如WebExtension或Electron技术，使得Web应用能够更好地融入用户的桌面环境，提供类似桌面应用的沉浸式体验。 在UI组件方面，VtWindow包含了模态窗口和模态对话框的功能。模态窗口是...
electron关闭窗口
热门推荐
weixin_40679578的博客
05-19 1万+
关闭子窗口的方法大体流程如下： 1、在渲染进程（子窗口）中通过点击“关闭”按钮事件，通知主进程 ipcRenderer.send("close"); 2、主进程收到通知后执行close方法 ipcMain.on('close', () => { win && win.close(); }); 3、在创建窗口的时候，可以给他添加close的回调监听；调用close的方法后就会进入这里的回调 const win = new BrowserWindow() win.on('clos
electron学习二：BrowserView
weixin_43360634的博客
05-22 5067
类：BrowserView 创建和控制视图 一、创建视图 const { BrowserView, BrowserWindow,app } = require('electron') app.on("ready",()=>{ let win = new BrowserWindow({ width: 800, height: 600 }) win.on('closed'...
Electron 自定义最小化、最大化、关闭、可拖拽
weixin_47996469的博客
05-27 3000
background.js 中 引入 ipcMain 在createWindow中 BrowserWindow下方新增 最小化 ,最大化,关闭事件 //引入ipcMain import { app, protocol, BrowserWindow, ipcMain } from 'electron' ipcMain.on('min', e => win.minimize()); ipcMain.on('max', e => win.maximize()); ipc...
Electron实现自定义最大化最小化关闭窗口功能
weixin_56295520的博客
07-17 2625
创建窗口时设置frame属性为false，即创建一个无边框的窗口，不使用Electron自带的框架，那么如何在渲染进程中通知主进程进行窗口的操作？详见代码如下。
electron - vue 自定义关闭按钮
w_ziShan的博客
06-28 1003
关闭前记得先关闭控制台，不然会点击无效，诡异的bug....在主进程中（main.js或background.js）在渲染进程中（vue文件。
electron 使用模态窗口（即子窗口关闭前父窗口不能获取焦点）
豪先生的博客
08-23 1440
1、在这里之前遇见了一个坑,关闭子窗口会报错。可能是子窗口用const来定义。在主进程里面添加下面代码。
python自动化安装软件_python模块 - pywinauto(windows自动化安装软件)
weixin_39860636的博客
11-30 895
GUI 窗口查询工具spy++litepywinauto 模块 原理:https://www.cnblogs.com/testlife007/p/4710599.htmlpywhinayto 常用功能http://hao.imrrp.com/blog.php?id=4538点击事件:https://blog.csdn.net/weixin_40161673/article/details/8324...
JavaScript与Electron：打造跨平台桌面应用
"本文主要探讨了如何在移动端和云端日益流行的背景下，利用JavaScript和Node.js的强大组合——Electron来开发专属的桌面应用程序。尽管桌面应用在某些方面可能不如Web应用灵活，但它们的优势依然明显，如方便快捷地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值