无框窗口 | Frameless Window
无框窗口
打开一个没有工具栏、边框或其他图形“铬”的窗口。
无框窗口是没有镶边的窗口，窗口的部分（如工具栏）不属于网页的一部分。这些是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()
局限性
- 透明窗口不可调整大小。设置
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;
}
上下文菜单
在某些平台上，可拖动区域将被视为非客户端框架，因此当您右键单击它时，系统菜单将弹出。要使上下文菜单在所有平台上正确运行，您不应该在可拖放的区域上使用自定义上下文菜单。
