Show and hide the main window on Electron
Instead of exiting the application, I would like to hide the main window when the system close button is pressed, and display the main window when the application is clicked or activated. I am using the following code to do this in my Electron app:
'use strict'
import { app, BrowserWindow } from 'electron'
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:${require('../../../config').port}`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 620,
width: 350,
resizable: true,
fullscreenable: true
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow.hide()
})
// eslint-disable-next-line no-console
console.log('mainWindow opened')
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
mainWindow.show()
})
However, hiding and showing the window of the events activate
and closed
displays the following error and never displays the main window when the application is active.
Uncaught Exception:
Error: Object has been destroyed
at BrowserWindow.<anonymous> (/app/src/main/index.js:24:16): mainWindow.on('closed')
Not sure what else to do.
source to share
My solution is this:
import { app, BrowserWindow } from 'electron'
let win = null
function createWindow () {
win = new BrowserWindow({width: 1024, height: 768})
win.loadURL('...')
win.webContents.openDevTools()
win.on('close', (event) => {
if (app.quitting) {
win = null
} else {
event.preventDefault()
win.hide()
}
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => { win.show() })
app.on('before-quit', () => app.quitting = true)
So on OSX, if you close the window, the window will just hide, if you close the application with cmd + Q, the application will quit.
source to share
You can do this and it will prevent the window from closing and just hide it.
You are listening to an event closed
. But you need to listen to the event close
. In this case, you can prevent the default action and just hide.
mainWindow.on('close', event=>{
event.preventDefault(); //this prevents it from closing. The `closed` event will not fire now
mainWindow.hide();
})
Once you do this, you cannot close the window. Therefore, you need to add a menu to your accelerator app CmdOrCtrl+Q
. Then you can tell the app to go away.
const {app, Menu} = require('electron');
Menu.setApplicationMenu(Menu.buildFromTemplate([
{
label: "Quit",
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
}
]));
And this will allow you Cmd + Q to exit the application.
source to share