Atom Electron - 使用 javascript 关闭窗口

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31171597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:20:26  来源:igfitidea点击:

Atom Electron - Close the window with javascript

javascriptelectron

提问by Arnaud Leymet

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 withinthe HTML page.

我使用Electron(原原子壳层),并希望能有一个最低限度的框架窗口使三个OSX窗口按钮(关闭,最大化,最小化)来自可见范围内的HTML页面。

I set the Electron option frameto falsewhen defining the BrowserWindowto have a chromeless, frameless window.

我设置了电子选项framefalse定义时BrowserWindow有一个边框,无框窗。

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?

没有运气,可悲。知道如何实现这一目标吗?

回答by Shawn Rakowski

You must access the BrowserWindow object created by your main process and call the minimize, maximize, and closemethods on that. You can access this using the remotemodule. Here is an example of binding all three buttons:

你必须访问您的主要过程所创建的BrowserWindow对象,并调用minimizemaximize以及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();
  }); 

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

假设你的最小,最大,关闭按钮有IDS min-btnmax-btnclose-btn分别。

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

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

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.

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

回答by Nio74

I have declarate my 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()

})

and for close this:

并关闭此:

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