electron 点击关闭

admin管理员组

文章数量:1026989

electron 点击关闭

下载Quick start项目

这里为了便于演示，我们直接从GitHub上下载Quick start项目

git clone

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();

}

})

})

})

效果如下

electron 点击关闭

下载Quick start项目

这里为了便于演示，我们直接从GitHub上下载Quick start项目

git clone

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();

}

})

})

})

效果如下

本文标签： electron 点击关闭