web-dev-qa-db-ja.com

Electronアプリでアプリウィンドウの閉じるボタンをクリックするイベントをキャッチする方法

Electronアプリでアプリウィンドウの閉じるボタンをクリックするイベントをキャッチしたいと思います。

Mac OSX用のElectronアプリを開発しようとしています。ユーザーが他のMacアプリのようにウィンドウの閉じるボタンをクリックしたときにアプリを終了しないように、アプリウィンドウを非表示にします。

ただし、いずれにしても、閉じるボタンがクリックされたときに_browser-window_のcloseイベントが呼び出され、OSがシャットダウンされるため、システムを終了する必要があるかどうかを検出できませんまたは、終了コマンド_Cmd+Q_でアプリを終了します。

Electronアプリでアプリウィンドウの閉じるボタンをクリックするイベントをキャッチする方法はありますか？

ご協力ありがとうございました。

追記

閉じるボタンをクリックするイベントを検出するために、このコードを試しました

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

このコードでは、アプリウィンドウの閉じるボタンをクリックするとアプリが非表示になり、_Cmd+Q_を入力するとアプリが終了します。ただし、OSをシャットダウンしようとすると、シャットダウンイベントが防止されます。

javascriptelectron
17
yukib

browser-window 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"]
        });
    });
});
_

更新：

機能を分離するには、以下を実行できます...

_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;
});
_

上記のコードは_before-quit_ イベントハンドラー を使用して、アプリAPIでアプリの「閉じる」イベントを処理します。ブラウザウィンドウの「閉じる」イベントは、ブラウザウィンドウAPIでmainWindow.on('close')によって処理されます。

さらに、_will-quit_イベントは、アプリが完全に閉じる前に問題をテストするのに適した場所です。

21
Josh
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 ---- ')
  });
})

したがって、Closeイベントをキャッチできます

0
Rohit Goyal