非常教程

Electron参考手册

无框窗口 | Frameless Window

无框窗口 | Frameless Window

打开一个没有工具栏、边框或其他图形“铬”的窗口。

无框窗口是没有镶边的窗口,窗口的部分(如工具栏)不属于网页的一部分。这些是BrowserWindow类的选择。

创建无框架窗口

要创建一个无框窗,你需要设置framefalse在BrowserWindow的options

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

MacOS上的备选方案

在MacOS 10.9 Mavericks和更新的版本中,有一种指定无铬窗口的替代方法。您可能希望隐藏标题栏,并将内容扩展为完整的窗口大小,但仍保留标准窗口操作的窗口控件(“交通信号灯”),而不是将其设置framefalse禁用标题栏和窗口控件。您可以通过指定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来设置窗口形状来解决这个问题,请参阅我们的问题以获取详细信息。
  • 透明窗口不可调整大小。设置resizabletrue可以使某个平台上的透明窗口停止工作。
  • 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: dragbody的样式:

<body style="-webkit-app-region: drag">
</body>

请注意,如果已使整个窗口可拖动,则还必须将按钮标记为不可拖动,否则用户将不可能单击这些按钮:

button {
  -webkit-app-region: no-drag;
}

如果您只是设置一个自定义标题栏为可拖动,您还需要使所有按钮在标题栏不可拖。

文本选择

在无框架窗口中,拖动行为可能与选择文本冲突。例如,当拖动标题栏时,可能会意外地选择标题栏上的文本。要防止出现这种情况,需要在以下可拖动区域内禁用文本选择:

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

上下文菜单

在某些平台上,可拖动区域将被视为非客户端框架,因此当您右键单击它时,系统菜单将弹出。要使上下文菜单在所有平台上正确运行,您不应该在可拖放的区域上使用自定义上下文菜单。

无框窗口 | Frameless Window
无框窗口 | Frameless Window 详细
Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

主页 https://electron.atom.io/
源码 https://github.com/electron/electron
发布版本 1.7.9