Instead of quit the application, I'd like to hide the main window when the system close button is clicked and show the main window when the application is clicked or activate. I'm using the following code to do this on 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()
})
But, hiding and showing the window from the activate
and closed
event shows the following error and never show 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.
The only workaround is to use Menu. setApplicationMenu(null) , however, this will disable all the menu shortcuts like F11 for toggling fullscreen etc. In new versions of Electron, you can set autoHideMenuBar: true while creating browserWindow, pressing Alt will show the menu bar again.
addEventListener("click", function (e) { var window = remote. getCurrentWindow(); window. close(); });
Kiosk mode is a common way to lock down a Windows device when that device is used for a specific task or used in a public setting. So in electron kiosk mode, we'd have the ability to lock down our application to a point that users are restricted to the actions that we want them to perform.
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)
In this way on OSX if you close the window, the window simply hide, if you close the app with cmd+Q the app terminate.
You can do this, and it will prevent the window from closing, and will just hide it.
You are listening to the closed
event. But you need to listen to the close
event. In that event, you can prevent the default action, and just do your 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 won't be able to close your window. So you will want to add a Menu to your app, with an accelerator of CmdOrCtrl+Q
. Then in there, you can tell the app to quit.
const {app, Menu} = require('electron');
Menu.setApplicationMenu(Menu.buildFromTemplate([
{
label: "Quit",
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
}
]));
And this will allow you to Cmd+Q to quit your app.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With