Atom Electron - 使用 javascript 关闭窗口
Posted
技术标签:
【中文标题】Atom Electron - 使用 javascript 关闭窗口【英文标题】:Atom Electron - Close the window with 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 的一般规则”,通常在浏览器中实现;一般来说,“窗口”可以定义为脚本宿主想要的。
【参考方案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【讨论】:
以上是关于Atom Electron - 使用 javascript 关闭窗口的主要内容,如果未能解决你的问题,请参考以下文章
如何为Electron / Atom Shell App设置应用程序图标
如何为 Electron / Atom Shell App 设置应用程序图标