Atom Electron - 用 javascript 关闭 window

Question

我正在使用 Electron（以前的 atom-shell）并且想要一个极简主义的框架 window 这样三个 OSX window 按钮（关闭、最大化、最小化）在 HTML 页面中可见。

我在定义 BrowserWindow 时将 Electron 选项 frame 设置为 false 以获得无铬、无框架 window。

我想我可以用这样的东西来处理关闭按钮：

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

假设您的最小、最大、关闭按钮的 ID 分别为 min-btn、max-btn 和 close-btn。

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

看看我写的关于构建看起来像 Visual Studio 的 chromeless window 的教程也可能会有所帮助：http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell。您的问题包含一些 css 以正确定位按钮。

Answer 2

我已声明我的 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()

})

并关闭此：

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 内容会自动设置，除非您隐藏 window 框架。在这种情况下，这是一个简单的演示回购：

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

Atom Electron - 用 javascript 关闭 window

Atom Electron - Close the window with javascript

javascript

electron