Question

Atom Electron - 使用 javascript 关闭窗口

2015-07-01

103409

javascript electron

我正在使用 Electron （以前称为 atom-shell），并希望有一个极简框架窗口，以便三个 OSX 窗口按钮（关闭、最大化、最小化）在 HTML 页面内可见。

在定义 BrowserWindow 时，我将 Electron 选项 frame 设置为 false ，以获得无边框的无饰窗口。

我以为我可以用类似这样的方法处理关闭按钮：

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

很遗憾，没有运气。有什么想法可以实现吗？

Answer 1

您必须访问主进程创建的 BrowserWindow 对象，并对其调用 minimize 、 maximize 和 close 方法。您可以使用 remote 模块访问它。以下是绑定所有三个按钮的示例：

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

假设您的 min、max、close 按钮的 ID 分别为 min-btn 、 max-btn 和 close-btn 。

您可以在此处查看 BrowserWindow 的完整文档以及您可能需要的其他功能： http://electron.atom.io/docs/v0.28.0/api/browser-window/ 。

查看我编写的有关构建类似于 Visual Studio 的无边框窗口的教程也可能会有所帮助： http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell 。您的问题已包含在一些 CSS 中，以便正确定位按钮。

Answer 2

我已经声明了我的窗口：

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

})

并关闭它：

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

用替代技术来回答这个问题。

与 Electron 相比（总是如此），在 NW.js 中，您想要做的事情非常简单。

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

除非您隐藏了窗口框架，否则 min/max/restore 内容会自动设置。在这种情况下，这里有一个简单的演示存储库：

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