問(wèn)題描述

我正在使用 Electron(以前的 atom-shell)并希望有一個(gè)簡(jiǎn)約的框架窗口，以便從 可以看到三個(gè) OSX 窗口按鈕(關(guān)閉、最大化、最小化)在 HTML 頁(yè)面內(nèi).

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 設(shè)置為 false/api/browser-window.md#new-browserwindowoptions" rel="noreferrer">BrowserWindow 擁有一個(gè)無(wú)邊框、無(wú)邊框的窗口.

I set the Electron option frame to false when defining the BrowserWindow to have a chromeless, frameless window.

我認(rèn)為我可以用這樣的方式處理關(guān)閉按鈕:

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>

不幸的是，沒(méi)有運(yùn)氣.知道如何實(shí)現(xiàn)這一目標(biāo)嗎?

With no luck, sadly. Any idea how to achieve this?

推薦答案

您必須訪問(wèn)您的主進(jìn)程創(chuàng)建的 BrowserWindow 對(duì)象并調(diào)用 minimize、maximize 和close 方法.您可以使用 remote 模塊訪問(wèn)它.以下是綁定所有三個(gè)按鈕的示例:

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

假設(shè)您的最小、最大、關(guān)閉按鈕的 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/.

它也可以幫助你看看我寫(xiě)的關(guān)于構(gòu)建一個(gè)看起來(lái)像 Visual Studio 的無(wú)鉻窗口的教程:http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-工作室外殼.您的問(wèn)題與一些 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.

這篇關(guān)于Atom Electron - 使用 javascript 關(guān)閉窗口的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！