问题描述

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

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.

我在定义 frame 设置为 false/api/browser-window.md#new-browserwindowoptions" rel="noreferrer">BrowserWindow 拥有一个无边框、无边框的窗口.

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?

推荐答案

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

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

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

assuming your min, max, close buttons have ids of min-btn, max-btn, and close-btn, respectively.

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

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/.

它也可以帮助你看看我写的关于构建一个看起来像 Visual Studio 的无铬窗口的教程:http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-工作室外壳.您的问题与一些 css 一起涵盖了正确定位按钮.

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.

这篇关于Atom Electron - 使用 javascript 关闭窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！