Electron桌面开发时监听close和closed的区别

本文详细解析了Electron应用中的窗口事件'closed'与'close'。'closed'事件在窗口关闭并销毁后触发,此时应释放窗口引用;'close'事件在窗口即将关闭时触发,可使用event.preventDefault()阻止关闭。文章还提供了通过beforeunload事件处理窗口关闭的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Event: 'closed'

当窗口已经关闭的时候触发.当你接收到这个事件的时候,你应当删除对已经关闭的窗口的引用对象和避免再次使用它.

Event: 'close'

返回:

  • event Event

在窗口要关闭的时候触发. 它在DOM的 beforeunload and unload 事件之前触发.使用 event.preventDefault() 可以取消这个操作

通常你想通过 beforeunload 处理器来决定是否关闭窗口,但是它也会在窗口重载的时候被触发。在 Electron 中,返回一个空的字符串或 false 可以取消关闭.例如:

window.onbeforeunload = function(e) {
  console.log('I do not want to be closed');

  // Unlike usual browsers, in which a string should be returned and the user is
  // prompted to confirm the page unload, Electron gives developers more options.
  // Returning empty string or false would prevent the unloading now.
  // You can also use the dialog API to let the user confirm closing the application.
  e.returnValue = false;
};

即closed事件的触发意味着该窗口对象已被销毁。

参考来源:https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html

Electron 支持多窗口开发,可以通过 `BrowserWindow` 类创建多个窗口。以下是一个简单的示例: ```javascript // 主进程代码 const { app, BrowserWindow } = require('electron') let mainWindow, secondWindow function createMainWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) mainWindow.loadFile('index.html') mainWindow.on('closed', () => { mainWindow = null }) } function createSecondWindow() { secondWindow = new BrowserWindow({ width: 400, height: 300, webPreferences: { nodeIntegration: true } }) secondWindow.loadFile('second.html') secondWindow.on('closed', () => { secondWindow = null }) } app.on('ready', () => { createMainWindow() createSecondWindow() }) ``` 在此示例中,我们创建了两个窗口,一个是主窗口,另一个是第二个窗口。`createMainWindow()` `createSecondWindow()` 函数分别用于创建这两个窗口。在 `app` 实例的 `ready` 事件中,我们调用这两个函数来创建这两个窗口。 你可以在 `BrowserWindow` 的构造函数中指定窗口的大小其他选项,比如窗口的 `webPreferences` 选项可以用于启用 Node.js 集成。 在渲染进程中,你可以使用 `remote` 模块来访问主进程中的窗口对象,从而实现多窗口之间的通信。 ```javascript // 渲染进程代码 const { remote } = require('electron') const mainWindow = remote.BrowserWindow.getFocusedWindow() const secondWindow = new remote.BrowserWindow({ width: 400, height: 300, webPreferences: { nodeIntegration: true } }) secondWindow.loadFile('second.html') document.getElementById('open-second-window').addEventListener('click', () => { secondWindow.show() }) document.getElementById('send-message-to-main-window').addEventListener('click', () => { mainWindow.webContents.send('message', 'Hello from second window!') }) remote.getCurrentWindow().on('closed', () => { secondWindow.close() }) ``` 在此示例中,我们通过 `remote` 模块获取了主窗口对象,并创建了一个新的窗口对象。我们可以通过 `show()` 方法显示第二个窗口,并通过 `webContents.send()` 方法向主窗口发送一条消息。同,我们还监听了当前窗口的 `closed` 事件,以确保在主窗口关闭关闭第二个窗口。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值