Geek Answers Handbook

Exit full screen mode by pressing "esc" (using javascript with electron)

I am working on an application (with an electron), and I would like for users to be able to exit full-screen mode by pressing "esc". I tried different methods, in vain. Here is the code that launches the application in a new browser window in full screen mode and displays the 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 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 exit full screen mode, but it does not work:

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

I also tried "cancelFullscreen". And "fullscreen: false". Does not work.

Thank you very much for your attention!

+6
source share
3 answers

This is pretty easy. Add a keyboard listener to the visualization process, and then process 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; } });
+6
source

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(); });
+2
source

If you had problems with this, just create a listener for the evacuation key and place it inside, I recommend not to put it in the main files or electron rendering files.

 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; } });
0
source

More articles:


All Articles