如何在Electron Framework中使用最小化，最大化和关闭控件创建自定义无框架窗口(无标题栏)

要创建没有铬的窗口或任意形状的透明窗口, 你需要使用无框架窗口API。此” api” 允许你创建无边框的无边框窗口, 该窗口的一部分(例如工具栏)不属于网页。
在浏览器中, Chrome是浏览器中除网页本身(例如工具栏, 菜单栏, 标签)之外的任何可见外观。要创建无框架窗口, 需要在所需的BrowserWindow实例中将frame属性设置为false：

const {BrowserWindow} = require('electron')let win = new BrowserWindow({width: 800, height: 600, frame: false})win.show()

提示：你可能希望在主窗口(main.js)中启用此功能, 该功能应类似于：

function createWindow () {// Create the browser window.mainWindow = new BrowserWindow({width: 800, height: 600, frame: false})// and load the index.html of the app.mainWindow.loadURL(`file://${__dirname}/index.html`)// Open the DevTools.mainWindow.webContents.openDevTools()// Emitted when the window is closed.mainWindow.on('closed', function () {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.mainWindow = null})}

谁的执行应该创建类似于以下内容的窗口：

如何在Electron Framework中使用最小化，最大化和关闭控件创建自定义无框架窗口(无标题栏)

文章图片
但是, 你可能不想删除用户关闭, 最小化或最大化你的应用程序的可能性, 因此你需要学习如何做。这些方法在BrowserWindow中可用, 因此在渲染过程中, 你只需要使用BrowserWindow常量即可检索聚焦的窗口：

const {BrowserWindow} = require('electron').remote; // Retrieve focused windowvar theWindow = BrowserWindow.getFocusedWindow(); // Execute common tasks// MinimizetheWindow.minimize(); // Maximize apptheWindow.maximize(); // Close apptheWindow.close();

典型的按钮, 但带有一些CSS和HTML 【如何在Electron Framework中使用最小化，最大化和关闭控件创建自定义无框架窗口(无标题栏)】你可以创建桌面应用程序与自定义HTML和CSS一起使用的工具栏。
在此示例中, 我们将使用以下标记：

< div id="title-bar"> < div id="title"> < span style="vertical-align: middle; "> < img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px; height:20px; "/> < /span> Our Code World Frameless (But draggable, resizable and closable Window)< /div> < div id="title-bar-btns"> < button id="min-btn"> -< /button> < button id="max-btn"> +< /button> < button id="close-btn"> x< /button> < /div> < /div>

还有一些使其看起来” 不错” 的样式：

body {padding: 0px; margin: 0px; }#title-bar {-webkit-app-region: drag; height: 40px; text-align: center; line-height: 40px; vertical-align: middle; background-color: #03a9f4; padding: none; margin: 0px; }#title {position: fixed; top: 0px; left: 6px; color:white; }#title-bar-btns {-webkit-app-region: no-drag; position: fixed; top: 0px; right: 6px; }

请注意, 标题栏类具有使你可以在屏幕上拖动窗口的类, 否则你的用户将被迫在屏幕上的静态位置(你可能不需要的东西)上使用你的应用程序。 -webkit-app-region：拖动；将使选定元素成为一个点, 以与原始标题栏相同的方式在屏幕上拖动整个窗口。
index.html文件中的最终实现应如下所示：

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title> My Electron Frameless Window< /title> < style> body {padding: 0px; margin: 0px; }#title-bar {-webkit-app-region: drag; height: 40px; text-align: center; line-height: 40px; vertical-align: middle; background-color: #03a9f4; padding: none; margin: 0px; }#title {position: fixed; top: 0px; left: 6px; color:white; }#title-bar-btns {-webkit-app-region: no-drag; position: fixed; top: 0px; right: 6px; }< /style> < /head> < body> < div id="title-bar"> < div id="title"> < span style="vertical-align: middle; "> < img src="https://raw.githubusercontent.com/zeke/atom-icon/master/old-icon/2.png" style="width:20px; height:20px; "/> < /span> Our Code World Frameless (But draggable, resizable and closable Window)< /div> < div id="title-bar-btns"> < button id="min-btn"> -< /button> < button id="max-btn"> +< /button> < button id="close-btn"> x< /button> < /div> < /div> < div style="text-align:center; "> < h4> Electron rocks!< /h4> < img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/> < /div> < script> (function () {// Retrieve remote BrowserWindowconst {BrowserWindow} = require('electron').remotefunction init() {// Minimize taskdocument.getElementById("min-btn").addEventListener("click", (e) => {var window = BrowserWindow.getFocusedWindow(); window.minimize(); }); // Maximize windowdocument.getElementById("max-btn").addEventListener("click", (e) => {var window = BrowserWindow.getFocusedWindow(); if(window.isMaximized()){window.unmaximize(); }else{window.maximize(); }}); // Close appdocument.getElementById("close-btn").addEventListener("click", (e) => {var window = BrowserWindow.getFocusedWindow(); window.close(); }); }; document.onreadystatechange =() => {if (document.readyState == "complete") {init(); }}; })(); < /script> < /body> < /html>

结果应用程序将如下所示：