electron阻止应用关闭

下载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();
      }
    })
  })
})

效果如下