Question

91

Atom Electron - Close the window with javascript

rated 0 times [ 97] [ 6] / answers: 1 / hits: 99935 / 9 Years ago, wed, july 1, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lamontm

Add To Favorites

Follow

Total Points: 482

Total Questions: 99

Total Answers: 91

Location: Burkina Faso

Member since Thu, Dec 15, 2022

1 Year ago

answered 9 Years ago calicinthias · Accepted 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;



  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.