Atom Electron - Close the window with javascript

Question

I'm using Electron (formerly atom-shell) and would like to have a minimalist frame window so that the three OSX window buttons (close, maximize, minimize) are visible from within the HTML page.

I set the Electron option frame to false when defining the BrowserWindow to have a chromeless, frameless window.

And I thought I could handle the close button with something like this:

<a btn href="#" id="close" onclick="window.top.close(); return false"></a>

With no luck, sadly. Any idea how to achieve this?

A script is only allowed to close a window if it opened it itself. — Barmar, Jul 01 '15 at 21:04
Then does the Electron event system allows for some window-level event listening so that I can fire my custom "close" event that would be catched at the `main.js` electron window level? — Arnaud Leymet, Jul 01 '15 at 21:06
I don't know anything about Electron. This is a general rule about Javascript. — Barmar, Jul 01 '15 at 21:08
"This is a general rule about Javascript" as typically implemented in a browser; in general 'window' can be defined as the script host wants. — timdewolf, Oct 04 '16 at 20:25

score 147 · Accepted Answer · edited Jan 14 '18 at 22:19

You must access the BrowserWindow object created by your main process and call the minimize, maximize, and close methods on that. You can access this using the remote module. Here is an example of binding all three buttons:

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

  document.getElementById("min-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.minimize(); 
  });

  document.getElementById("max-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       if (!window.isMaximized()) {
           window.maximize();          
       } else {
           window.unmaximize();
       }
  });

  document.getElementById("close-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.close();
  });

assuming your min, max, close buttons have ids of min-btn, max-btn, and close-btn, respectively.

You can view the full documentation for the BrowserWindow along with other functionality you might need here: http://electron.atom.io/docs/v0.28.0/api/browser-window/.

It might also help you to take a look at a tutorial I wrote about building a chromeless window that looks like Visual Studio here: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell. Your question is covered along with some css to properly position the buttons.

I didn't turn off the dragging effect on the buttons, hence their lack of reaction when I clicked them. Thanks for the excellent tutorial! — Arnaud Leymet, Jul 02 '15 at 07:44
Note that; if your window has 'resizable: false' option, you can't return window to its original size after click max-btn. https://github.com/electron/electron/issues/11451 — Ozan, Nov 28 '18 at 07:00
For anyone else struggling to get buttons to work, [check this thread](https://stackoverflow.com/questions/44391448/electron-require-is-not-defined). — Miro, Jul 04 '19 at 00:40

score 3 · Answer 2 · answered Dec 19 '19 at 16:17

I have declarate my Window:

const electron = require('electron')
const path = require('path')
const BrowserWindow = electron.remote.BrowserWindow

const notifyBtn = document.getElementById('notifyBtn')

notifyBtn.addEventListener('click',function(event){

    const modalPath = path.join('file://', __dirname,'add.html')
    let win = new BrowserWindow({ webPreferences: {nodeIntegration: true}, frame: false, transparent: true, alwaysOnTop:true, width: 400, height: 200 })
    win.on('close',function(){win = null})
    win.loadURL(modalPath)
    win.show()

})

and for close this:

const electron = require('electron')
const path = require('path')
const remote = electron.remote

const closeBtn = document.getElementById('closeBtn')

closeBtn.addEventListener('click', function (event) {
    var window = remote.getCurrentWindow();
    window.close();
})

Jaredcheeda · Answer 3 · 2021-12-06T13:41:02.053

-1

To answer this question with an alternative technology.

What you want to do is trivially easy in NW.js, compared to Electron (as is always the case).

<a href="#" onclick="nw.Window.get().close()"></a>

The min/max/restore stuff is set up automatically, unless you are hiding the window frame. In which case, here is a simple demo repo:

https://github.com/nwutils/frameless-example

edited Dec 06 '21 at 13:41

answered Jul 11 '21 at 20:23

Jaredcheeda

1,657
17
15

Atom Electron - Close the window with javascript

3 Answers3

Linked