Arnaud Leymet Arnaud Leymet - 6 months ago 62
Javascript Question

Atom Electron - Close the window with javascript

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 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?

Answer

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;
  // const remote = require('remote'); // if using versions of Electron older than 1.0

  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();
       window.maximize(); 
  });

  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.

Comments