Exit full screen when "esc" is pressed (using javascript with electron)

Question

I'm working on an app (with electron) and I would like users to be able to exit fullscreen mode when pressing "esc". I tried different methods, in vain. Here is the code who launch the app in a new browser window in fullscreen mode and display and HTML/CSS content :

    'use strict';

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({fullscreen:true});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

And here is what I'm trying to add to this code to be able to exit full screen but it doesn't work :

app.on('keydown', function(e){
    if(e.keyCode === 27){
      app.exitFullscreen();
    }
});

I also tried with "cancelFullscreen". And "fullscreen:false". Not working.

Thanks a lot for your attention!

Zen · Accepted Answer · 2016-06-22 12:16:13Z

10

It's quite easy. Add a keyboard listener in render process, and then manipulate the window through the remote module.

    const remote = require("electron").remote;

    document.addEventListener("keydown", event => {

        switch (event.key) {
            case "Escape":
                if (remote.getCurrentWindow().isFullScreen()) {
                    remote.getCurrentWindow().setFullScreen(false);
                }
                break;
             }
    });

answered Jun 22, 2016 at 12:16

Zen

5,5908 gold badges35 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

G. Delvigne Over a year ago

Thanks for your reply Zen. I try to insert this code in my main.js but I've got an error message and the app turn to black screen till i quit.

Zen Over a year ago

@G.Delvigne you should insert it to the html file instead of main.js

G. Delvigne Over a year ago

Thank you again. Now I've put the code between "script" html tags in my index.html file and nothing happens. :/ No result when I press to espace after launching the app.

Zen Over a year ago

Does the console output any error? How do you make the window [email protected]

G. Delvigne Over a year ago

No error. To make the fullscreen, I changed the default settings in the main.js. Like so : function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({fullscreen:true}); Default settings are : mainWindow = new BrowserWindow({width: 900, height: 600});

|

Andrew Sumsion · Accepted Answer · 2019-02-06 18:54:39Z

4

Here is the solution that worked for me:

function minimizeWindow () {
    mainWindow.setFullScreen(false);
    console.log(mainWindow);
}

app.on('ready', function() {

  const ret = electron.globalShortcut.register('Escape', function(){
    console.log('Escape is pressed');

        minimizeWindow();
  });

console.log(electron.globalShortcut.isRegistered('Escape'));
});

app.on('will-quit', function(){

  electron.globalShortcut.unregister('Escape');

  electron.globalShortcut.unregisterAll();
});

Doc for the properties and methods of the window: http://electron.atom.io/docs/api/browser-window/#winsetmaximizablemaximizable-macos-windows
Doc for the keyboard event: http://electron.atom.io/docs/api/global-shortcut/

edited Feb 6, 2019 at 18:54

Andrew Sumsion

461 silver badge9 bronze badges

answered Jul 18, 2016 at 12:03

G. Delvigne

1731 gold badge1 silver badge10 bronze badges

1 Comment

Philip Müller Over a year ago

Global shortcuts will register globally, so regardless whether or not the application has focus or is maximized the shortcuthandler will fire. This also overrides registered shortcuts of other applications (Escape wont work anymore for them). To only react to the shortcuts when the application is focused one should look into localshortcuts

Matt Ke · Accepted Answer · 2020-06-09 08:40:33Z

2

Global shortcuts catch all events, it's better to use hidden menu button. For example you can add a menu with this menu item:

{
    label: "Exit full screen",
    visible: false,
    accelerator: "Esc",
    click(item, focusedWindow) {
        if (focusedWindow.isFullScreen()) {
            focusedWindow.setFullScreen(false);
        }
    },
},

You can apply the new menu item with electron's setApplicationMenu command: https://www.electronjs.org/docs/api/menu#menusetapplicationmenumenu

edited Jun 9, 2020 at 8:40

Matt Ke

3,78912 gold badges35 silver badges53 bronze badges

answered Jun 9, 2020 at 7:56

satlosb

426 bronze badges

Comments

Luan Araldi · Accepted Answer · 2016-06-23 23:27:33Z

1

Had some problems with this aswell, just create a listener for the escape key and place this inside, i recommend not putting it into the main or renderer files of electron.

 
const { remote } = require('electron');
const { BrowserWindow } = remote;

document.addEventListener("keydown", event => {

        switch (event.key) {
            case "Escape":
                var window = BrowserWindow.getFocusedWindow();
            if(window.isMaximized()){
             window.unmaximize();
           }else{
             window.maximize();
           };
                break;
             }
    });

answered Jun 23, 2016 at 23:27

Luan Araldi

311 silver badge9 bronze badges

2 Comments

G. Delvigne Over a year ago

Thanks! I created a script.js file within I put the snippet. Then I linked this file to my index.html. <script type="text/javascript" src="script/script.js"></script>. But it doesn't work.

G. Delvigne Over a year ago

How do I create a listener for the escape key ?

Collectives™ on Stack Overflow

Exit full screen when "esc" is pressed (using javascript with electron)

4 Answers 4

6 Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related