无框窗口
没有工具栏或任何边框仅纯内容的窗口.
创建无框窗口
在 BrowserWindow的 options中设置 frame 为 false 即可创建无框窗口.
1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow({width: 800, height: 600, frame: false})
3
win.show()
Copied!
macOS上的替代方案
在macOS 10.9 Mavericks和更新版本中，有一种不同于设置 frame为 false的替代方法来生成无边框窗口。
无边框通常会隐藏标题栏以及失去对窗口的控制，如果你希望无边框的同时又保持对窗口的控制( traffic lights)。你可以通过设置下文的 titleBarStyle两个属性来实现:
hidden
仅左上角有正常窗口控制( traffic lights)的无边框.
1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow({titleBarStyle: 'hidden'})
3
win.show()
Copied!
hidden-inset
在边缘嵌入窗口控制( traffic lights)
1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow({titleBarStyle: 'hidden-inset'})
3
win.show()
Copied!
透明窗口
设置 transparent为 true可使无框窗口透明:
1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow({transparent: true, frame: false})
3
win.show()
Copied!
限制
- 无法点击穿透区域(透明窗口实质是个矩形窗口,假设内容是圆形,那么圆形与矩形的交集处透明区域无法点击穿透)。详见讨论帖
- 透明窗口是不可调整大小的。在某些平台上，设置
resizable为true也许会造成透明窗口停止工作。 blur滤光器只适用于网页，所以没法将模糊效果用于窗口之下- 在Windows系统中，当DWM被禁用时透明窗口不会工作。
- Linux用户需要命令行
--enable-transparent-visuals --disable-gpu
来禁用GPU以及允许ARGB去渲染透明窗口，这是由于一个Linux上的上游bug造成的 详见此文 - 在Mac上，透明窗口的阴影不会显示出来.
临时的穿透方案
使用[win.setIgnoreMouseEvents(ignore)][ignore-mouse-events] API创建可穿透窗口(即不响应所有的鼠标事件):
1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow()
3
win.setIgnoreMouseEvents(true)
Copied!
可拖动区域
默认情况下，无框窗口是不可拖动的。
您需要在CSS中设置 -webkit-app-region: drag设定可拖动区域,或设置 -webkit-app-region: no-drag 禁止拖动的区域。
需要注意的是，目前只支持矩形区域。
1
<body style=`-webkit-app-region: drag`>
2
</body>
Copied!
另外需要注意的是，如果你设置了整个窗口可拖动，你必须标记按钮为不可拖动,否则用户无法点击它们：
1
button {
2
-webkit-app-region: no-drag;
3
}
Copied!
如果你设置一个自定义的标题栏可拖动，你同样需要将标题栏中所有按钮设置为不可拖动.
文本选择
在一个无框窗口中，拖动动作可能与文本选择发生冲突。比如，当你拖动标题栏，可能会变成选中标题栏上的文本。
为了防止这种情况发生，你需要向下面这样在一个可拖动区域中禁用文本选择:
1
.titlebar {
2
-webkit-user-select: none;
3
-webkit-app-region: drag;
4
}
Copied!
上下文菜单
在一些平台上，可拖动区域会被认为是非客户端框架(non-client frame)，当你点击右键时，会弹出系统菜单。
为了保证上下文菜单在所有平台下正确的显示，你不应该在可拖动区域使用自定义上下文菜单。
[ignore-mouse-events]: browser-window.md#winsetignoremouseeventsignore