无边框窗口

打开一个无工具栏、边框、和其它图形化外壳的窗口。

无边框窗口是不带外壳（包括窗口边框、工具栏等），只含有网页内容的窗口。这些是 BrowserWindow 类上的选项。

创建无边框窗口

要创建无边框窗口，只需在 BrowserWindow 的 options 中将 frame 设置为 false：

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

可替代方案

要在 macOS 和 Windows 平台实现无边框窗口还有其他的方案。 Instead of setting frame to false which disables both the titlebar and window controls, you may want to have the title bar hidden and your content extend to the full window size, yet still preserve the window controls ("traffic lights" on macOS) for standard window actions. 你可以通过指定 titleBarStyle 选项来完成此操作：

`hidden`

在一个隐藏标题栏和全尺寸大小的内容窗口中取得结果。在 macOS 内, 窗口将一直拥有位于左上的标准窗口控制器 (“traffic lights”)。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()

macOS 上的其他方案

`hiddenInset`

返回一个另一种隐藏了标题栏的窗口，其中控制按钮到窗口边框的距离更大。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
win.show()

`customButtonsOnHover`

使用自定义的关闭、缩小和全屏按钮，这些按钮会在划过窗口的左上角时显示。由于无框窗口与苹果 macOS 窗口界面的限制，全屏按钮不可用。这些自定义的按钮能防止, 与发生于标准的窗口工具栏按钮处的鼠标事件相关的问题. 这个选项只适用于无框窗口。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: false })
win.show()

Windows Control Overlay

When using a frameless window in conjuction with win.setWindowButtonVisibility(true) on macOS, using one of the titleBarStyles as described above so that the traffic lights are visible, or using titleBarStyle: hidden on Windows, you can access the Window Controls Overlay JavaScript APIs and CSS Environment Variables by setting the titleBarOverlay option to true. 指定 true 将导致覆盖默认系统颜色。

On Windows, you can also specify the color of the overlay and its symbols by setting titleBarOverlay to an object with the options color and symbolColor. 如果未指定选项，则窗口控制按钮的颜色将是系统默认颜色：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: true
})
win.show()

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: '#2f3241',
    symbolColor: '#74b1be'
  }
})
win.show()

透明窗口

通过将 transparent 选项设置为 true, 还可以使无框窗口透明:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ transparent: true, frame: false })
win.show()

局限性

你不能点击穿透透明区域。我们将引入一个 API 来设置窗口形状以解决此问题, 请参阅 our issue 以了解详细信息。
透明窗口不可调整大小。在某些平台上，将 resizable 设置为 true 可能会使透明窗口停止工作。
blur 筛选器仅适用于网页, 因此无法对位于透明窗口下方的内容应用模糊效果 (例如在用户系统上打开的其他应用程序) 。
当打开开发者工具时，窗口将不透明。
在 Windows 操作系统中，
- 当DWM禁用时，透明窗口将失效。
- 透明窗口不能通过Windows系统菜单或双击标题栏实现最大化。其背后的原因可以看这个pull request。
在 linux 上, 用户必须在命令行中设置 --enable-transparent-visuals --disable-gpu 来禁用GPU, 启用 ARGB，用以实现窗体透明。这是由一个上游的 bug 导致的, 即在Linux机上，透明度通道（alpha channel ）在一些英伟达的驱动（NVidia drivers）中无法运行。
在 Mac 上, 透明窗口无法显示原生窗口的阴影。

点击穿透窗口

要创建一个点击穿透窗口，也就是使窗口忽略所有鼠标事件，可以调用 win.setIgnoreMouseEvents(ignore) API：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

忽略鼠标消息会使网页无视鼠标移动，这意味着鼠标移动事件不会被发出。在 Windows 操作系统上，可以使用可选参数将鼠标移动消息转发到网页，从而允许发出诸如 mouseleave 之类的事件：

const { ipcRenderer } = require('electron')
const el = document.getElementById('clickThroughElement')
el.addEventListener('mouseenter', () => {
  ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
})
el.addEventListener('mouseleave', () => {
  ipcRenderer.send('set-ignore-mouse-events', false)
})

// Main process
const { ipcMain } = require('electron')
ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
  BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)
})

这将使网页在 el 上点击时穿透，在它外面时恢复正常。

可拖拽区

默认情况下, 无边框窗口是不可拖拽的。应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 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;
}

右键菜单

在某些平台上，可拖拽区域不被视为窗口的实际内容，而是作为窗口边框处理，因此在右键单击时会弹出系统菜单。要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。

创建无边框窗口​

可替代方案​

hidden​

macOS 上的其他方案​

hiddenInset​

customButtonsOnHover​

Windows Control Overlay​

透明窗口​

局限性​

点击穿透窗口​

转发​

可拖拽区​

文本选择​

右键菜单​