Atom Electron - 使用 javascript 关闭窗口答案

【问题标题】：Atom Electron - Close the window with javascriptAtom Electron - 使用 javascript 关闭窗口
【发布时间】：2015-09-19 05:12:33
【问题描述】：

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

在将 BrowserWindow 定义为具有无镶边、无框窗口时，我将 Electron 选项 frame 设置为 false。

我认为我可以用这样的方式处理关闭按钮：

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

不幸的是，没有运气。知道如何实现这一目标吗？

【问题讨论】：

一个脚本只有在它自己打开一个窗口时才允许关闭它。
那么 Electron 事件系统是否允许一些窗口级事件侦听，以便我可以触发将在 main.js 电子窗口级捕获的自定义“关闭”事件？
我对电子一无所知。这是关于 Javascript 的一般规则。
“这是关于 Javascript 的一般规则”，通常在浏览器中实现；一般来说，“窗口”可以定义为脚本宿主想要的。

标签： javascript electron

【解决方案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();
  });

假设您的最小、最大、关闭按钮的 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 一起涵盖了正确定位按钮。

【讨论】：

我没有关闭按钮的拖动效果，因此当我点击它们时它们没有反应。感谢您的精彩教程！
请注意；如果您的窗口具有“可调整大小：false”选项，则单击 max-btn 后将无法将窗口恢复为原始大小。 github.com/electron/electron/issues/11451
对于其他努力让按钮工作的人，check this thread。

【解决方案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();
})

【讨论】：

【解决方案3】：

用另一种技术来回答这个问题。

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

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

最小/最大/恢复的东西是自动设置的，除非你隐藏了窗口框架。在这种情况下，这是一个简单的演示 repo：

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

【讨论】：