Atom Electron - 使用 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?

Answer 1

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.

Answer 2

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

Answer 3

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>