无框窗口 | Frameless Window (Frameless Window) – Electron 中文开发手册
无框窗口 | Frameless Window (Frameless Window) - Electron 中文开发手册
打开一个没有工具栏、边框或其他图形“铬”的窗口。无框窗口是没有镶边的窗口，窗口的部分（如工具栏）不属于网页的一部分。这些是BrowserWindow类的选择。
创建无框架窗口
要创建一个无框窗，你需要设置frame到false在BrowserWindow的options：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
win.show()
MacOS上的备选方案
在MacOS 10.9 Mavericks和更新的版本中，有一种指定无铬窗口的替代方法。您可能希望隐藏标题栏，并将内容扩展为完整的窗口大小，但仍保留标准窗口操作的窗口控件（“交通信号灯”），而不是将其设置frame为false禁用标题栏和窗口控件。您可以通过指定titleBarStyle选项来执行此操作：
hidden
结果在一个隐藏的标题栏和一个全尺寸的内容窗口中，但标题栏仍然在左上角具有标准窗口控件（“交通信号灯”）。
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({titleBarStyle: 'hidden'})
win.show()
hiddenInset
结果在一个隐藏的标题栏中，另一种方式是交通灯按钮从窗口边缘稍微嵌入。
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({titleBarStyle: 'hiddenInset'})
win.show()
customButtonsOnHover
使用自定义绘制关闭、小型化和全屏按钮，这些按钮在窗口左上角悬停时显示。这些自定义按钮可防止标准窗口工具栏按钮发生鼠标事件的问题。此选项仅适用于无框架窗口。
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({titleBarStyle: 'customButtonsOnHover', frame: false})
win.show()
透明窗
通过设置transparent选择true，您还可以使无框窗口透明：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({transparent: true, frame: false})
win.show()
局限性
您无法点击透明区域。我们将介绍一个API来设置窗口形状来解决这个问题，请参阅我们的问题以获取详细信息。透明窗口不可调整大小。设置resizable为true可以使某个平台上的透明窗口停止工作。该blur过滤器仅适用于网页，因此无法对窗口下方的内容（即在用户系统上打开的其他应用程序）应用模糊效果。在Windows操作系统上，禁用DWM时透明窗口将无法工作。在Linux上，用户必须--enable-transparent-visuals --disable-gpu在命令行中禁用GPU，并允许ARGB创建透明窗口，这是由于Alpha通道在Linux 上的某些NVidia驱动程序上无法运行的上游缺陷造成的。在Mac上，本机窗口阴影将不会显示在透明窗口上。
点击窗口
要创建一个点击窗口，即让窗口忽略所有鼠标事件，可以调用win.setIgnoreMouseEvents（ignore）API：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setIgnoreMouseEvents(true)
拖曳区
默认情况下，无框窗口是不可拖动的。 应用程序需要指定-webkit-app-region：在CSS中拖动以告诉Electron哪些区域是可拖动的（如操作系统的标准标题栏），应用程序也可以使用-webkit-app-region：no-drag来排除不可拖动 来自可拖动区域的区域。 请注意，目前只支持矩形形状。注意：-webkit-app-region: drag在开发人员工具打开时，已知存在问题。有关更多信息（包括解决方法），请参阅此GitHub问题。要使整个窗口可拖动，可以添加-webkit-app-region: drag如body的样式：
<body style="-webkit-app-region: drag"> </body>
请注意，如果已使整个窗口可拖动，则还必须将按钮标记为不可拖动，否则用户将不可能单击这些按钮：
button {
-webkit-app-region: no-drag;
}
如果您只是设置一个自定义标题栏为可拖动，您还需要使所有按钮在标题栏不可拖。
文本选择
在无框架窗口中，拖动行为可能与选择文本冲突。例如，当拖动标题栏时，可能会意外地选择标题栏上的文本。要防止出现这种情况，需要在以下可拖动区域内禁用文本选择：
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
上下文菜单
在某些平台上，可拖动区域将被视为非客户端框架，因此当您右键单击它时，系统菜单将弹出。要使上下文菜单在所有平台上正确运行，您不应该在可拖放的区域上使用自定义上下文菜单。
