下载 Quick start 项目
这里为了便于演示,我们直接从 GitHub 上下载 Quick start 项目
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
安装成功后,执行 npm start 运行项目。就可以看到 hello world 界面了。
阻止关闭方法一
这里直接监听 onbeforeunload 事件,每当页面刷新或关闭时,都会触发这个事件。在 index.html 中我们添加下面一段代码
//index.html
window.onbeforeunload = (e) => {
console.log(‘I do not want to be closed’)
e.returnValue = false
}
这样,我们无论点击关闭,还是使用 alt+f4 都无法将页面关闭。效果如图。
chrome 在如果没有任何键盘输入操作的情况下,执行该监听方法时会在 console 界面里抛出一个 error,不必在意。
这么做虽然能够实现我们的需求,但同时存在一些问题:
应用真的无法关闭,除非终止进程
页面既无法关闭,也无法刷新
方法二
我们在 main.js 中监听 close 事件。定义一个 flag 标识是否可以关闭。如果不可以关闭,则阻止该事件。
//main.js
let canQuit = false;
mainWindow.on(‘close’, (event) => {
if (!canQuit) {
event.preventDefault();}
});
我个人更推荐使用第二种方法,因为该方法可以自由的决定页面是否真的需要关闭,而且不会妨碍页面刷新。
那么如何关闭呢?
这里我们注册一个全局的快捷键,这个快捷键可以修改 canQuit 这个变量的值,从而可以让程序顺利退出。具体实现可参考下面代码。
const {app, BrowserWindow,globalShortcut,dialog} = require(‘electron’) // 这里需要引入 globalShortcut 和 dialog
app.on(‘ready’, () => {
globalShortcut.register(‘CommandOrControl+Alt+K’, () => {
dialog.showMessageBox({
type: ‘info’,
title: ‘Information’,
message: ‘Do you really want to close the application?’,
buttons: [‘Yes’,’No’]
},(index)=>{
console.log(‘you chose’,index)
if(index===0){
canQuit=true;
app.quit();
}
})
})
})
效果如下