Javascript 如何捕捉在 Electron 应用程序中单击应用程序窗口的关闭按钮的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32885657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to catch the event of clicking the app window's close button in Electron app
提问by yukib
I wish to catch the event of clicking the app window's close button in Electron app.
我希望捕捉在 Electron 应用程序中单击应用程序窗口的关闭按钮的事件。
I'm trying to develope Electron app for Mac OSX. I want to hide the app window, not to terminate the app when a user clicks the window's close button like other Mac apps.
我正在尝试为 Mac OSX 开发 Electron 应用程序。我想隐藏应用程序窗口，而不是像其他 Mac 应用程序一样在用户单击窗口的关闭按钮时终止应用程序。
However, I can not detect wether the system should be terminated or it should be hidden, because in any case, a closeevent of browser-windowis called when a close button is clicked, the OS is shut down or the app is terminated with quit command, Cmd+Q.
但是，我无法检测系统是应该终止还是应该隐藏，因为在任何情况下，单击关闭按钮、操作系统关闭或应用程序使用退出命令终止时都会调用close事件。browser-windowCmd+Q
Is there any way to catch the event of clicking the app window's close button in Electron app?
有什么方法可以捕获在 Electron 应用程序中单击应用程序窗口的关闭按钮的事件？
Thank you for your help.
感谢您的帮助。
Postscript
后记
To detect the event of clicking a close button, I tried this code
为了检测点击关闭按钮的事件，我尝试了这段代码
var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');
var force_quit = false;
var menu = Menu.buildFromTemplate([
{
label: 'Sample',
submenu: [
{label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
{label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {force_quit=true; app.quit();}}
]
}]);
app.on('window-all-closed', function(){
if(process.platform != 'darwin')
app.quit();
});
app.on('ready', function(){
Menu.setApplicationMenu(menu);
mainWindow = new BrowserWindow({width:800, height:600});
mainWindow.on('close', function(e){
if(!force_quit){
e.preventDefault();
mainWindow.hide();
}
});
mainWindow.on('closed', function(){
console.log("closed");
mainWindow = null;
app.quit();
});
app.on('activate-with-no-open-windows', function(){
mainWindow.show();
});
});
With this code, the app is hidden when a close button of the app window is clicked, and the app is terminated when Cmd+Qis typed. However, when I try to shut down the OS, the shutdown event is prevented.
使用此代码，当点击应用程序窗口的关闭按钮时应用程序被隐藏，而应用程序在Cmd+Q键入时终止。但是，当我尝试关闭操作系统时，会阻止关闭事件。
回答by Josh
You can catch it by using the closeevent of the browser-windowapi. You can try the following to verify this...
您可以使用浏览器窗口api的close事件来捕获它。您可以尝试以下方法来验证这一点...
var app = require('app');
var force_quit = false;
app.on('ready', function () {
mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.on('close', function() { // <---- Catch close event
// The dialog box below will open, instead of your app closing.
require('dialog').showMessageBox({
message: "Close button has been pressed!",
buttons: ["OK"]
});
});
});
Update:
更新：
To separate functionality you can do the following...
要分离功能，您可以执行以下操作...
var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');
var force_quit = false;
var menu = Menu.buildFromTemplate([
{
label: 'Sample',
submenu: [
{label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
{
label: 'Quit',
accelerator: 'CmdOrCtrl+Q',
click: function() {
force_quit=true; app.quit();
}
}
]
}]);
app.on('window-all-closed', function(){
if(process.platform != 'darwin')
app.quit();
});
app.on('ready', function(){
Menu.setApplicationMenu(menu);
mainWindow = new BrowserWindow({width:800, height:600});
// Continue to handle mainWindow "close" event here
mainWindow.on('close', function(e){
if(!force_quit){
e.preventDefault();
mainWindow.hide();
}
});
// You can use 'before-quit' instead of (or with) the close event
app.on('before-quit', function (e) {
// Handle menu-item or keyboard shortcut quit here
if(!force_quit){
e.preventDefault();
mainWindow.hide();
}
});
// Remove mainWindow.on('closed'), as it is redundant
app.on('activate-with-no-open-windows', function(){
mainWindow.show();
});
});
// This is another place to handle events after all windows are closed
app.on('will-quit', function () {
// This is a good place to add tests insuring the app is still
// responsive and all windows are closed.
console.log("will-quit");
mainWindow = null;
});
The above code uses the before-quitevent handlerto handle app "close" events on the app api. Browser-window "close" events are still handled on the browser-window api by mainWindow.on('close').
上面的代码使用before-quit事件处理程序来处理应用程序 api 上的应用程序“关闭”事件。浏览器窗口“关闭”事件仍由浏览器窗口 api 处理mainWindow.on('close')。
Additionally, the will-quitevent is a better place to test for problems before the app closes completely.
此外，该will-quit事件是在应用程序完全关闭之前测试问题的更好场所。
回答by Rohit Goyal
app.on('ready', ()=> {
let win = new BrowserWindow({width:800, height:600})
win.loadURL('file://'+__dirname+'/index.html')
win.on('closed', () => {
console.log(' ---- Bye Bye Electron ---- ')
});
})
Thus You Can catch the Close Event
因此您可以捕获关闭事件
