25.3.无框架窗口 · Electron中文文档

# 无框架窗口 > 打开一个没有工具栏、边框或者其它"chrome"外观的窗口。无框架窗口是指一个没有 [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)、没有窗口的一些部分，比如并不属于 web 页面中一部分的工具栏。这些是 [`BrowserWindow`](browser-window.md) 类中的选项。 ## 创建一个无框架窗口要创建无框架窗口，必须在 [BrowserWindow](browser-window.md) 的 `options` 中设置 `frame` 为 `false` ： ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow({width: 800, height: 600, frame: false}) win.show() ``` ### macOS 中的实现在 macOS 10.9 Mavericks 和更新的版本中，有一个替代方案用来指定一个 “chromeless”的窗口。你可能希望隐藏标题栏，应用的内容显示到整个窗口，但仍然保留窗口控制器（"traffic lights"）进行标准的窗口操作，而不是通过设置 `frame` 为 `false` 完全禁用它们。可以通过指定新的 `titleBarStyle` 选项实现这个目的： #### `hidden` 产生一个隐藏了标题栏的全屏尺寸内容窗口，但是标题栏的左上方仍保留标准的窗口控制器（“traffic lights”）。 ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow({titleBarStyle: 'hidden'}) win.show() ``` #### `hidden-inset` 产生一个隐藏的标题栏，有另外一个外观， traffic light 按钮被从窗口变元稍微插入。 ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow({titleBarStyle: 'hidden-inset'}) win.show() ``` ## 透明窗口通过设置 `transparent` 选项为 `true`，还可以无框架窗口透明： ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow({transparent: true, frame: false}) win.show() ``` ### 局限 * 不能点击穿透透明区域。我们将介绍一个 API 设置窗口形状来解决这个问题，查看 [our issue](https://github.com/electron/electron/issues/1335) 了解详情。 * 透明窗口不能重设大小。设置 `resizable` 为 `true` 可能在某些平台会使一个透明窗口停止工作。 * `blur` 滤镜只能应用到页面，所以没有办法应用 blur 效果到这个窗口（即，在用户系统上打开的其它应用）下的内容。 * 在 Windows 操作系统，透明窗口在 DWM 被禁用时无法工作。 * 在 Linux 上用户必须应用 `--enable-transparent-visuals --disable-gpu` 到命令行来禁用 GPU 并应用 ARGB 来使窗口透明，这是由一个上游的 bug ，即Linux 上 [alpha 通道在一些 NVidia 驱动上不能工作](https://code.google.com/p/chromium/issues/detail?id=369209) 。 * 在 Mac 上，在一个透明窗口上原生的窗口阴影不能显示。 ## 点击穿透窗口要创建一个点击穿透的窗口，即，使窗口忽略所有的鼠标事件，可以调用 [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events] API： ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow() win.setIgnoreMouseEvents(true) ``` ## 可拖动区域默认的，无框架窗口是不能拖动的。应用需要在 CSS 中指定 `-webkit-app-region: drag` 来告诉 Electron 哪些区域是可拖动的（就像操作系统的标准标题栏），而且应用也可以使用 `-webkit-app-region: no-drag` 来从可拖动区域中执行部可拖动区域设置。注意，当前只支持矩形区域。要使整个窗口可以拖动，可以添加 `-webkit-app-region: drag` 作为 `body` 的样式： ```html <body style="-webkit-app-region: drag"> </body> ``` 注意，如果你已经设置窗口可拖动，就必须使按钮不可拖动，否则不能接受用户的点击事件： ```css button { -webkit-app-region: no-drag; } ``` 如果你只设置了一个自定义的标题栏可拖动，需要使标题栏中的所有按钮不能拖动。 ## 文本选择在一个无框架窗口中，拖动行为可能会和选择文本行为冲突。例如，当你拖动一个标题栏，可能意外选中标题栏上的文本。要阻止这个问题，需要在一个可拖动区域禁用文本选择，如下： ```css .titlebar { -webkit-user-select: none; -webkit-app-region: drag; } ``` ## 上下文菜单在一些平台上，可拖动区域会被当作一个非客户端 client，所以当你右击它，一个系统弹出框弹出。要使上下文菜单行为在所有平台正常工作，千万不要在拖动区域使用自定义上下文菜单。 * [ignore-mouse-events]: browser-window.md#winsetignoremouseeventsignore