# 无框窗口 > 没有工具栏或任何边框仅纯内容的窗口. ## 创建无框窗口在 [BrowserWindow](/electron/api/api-jie-kou-zhi-zhu-jin-cheng-jie-kou/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和更新版本中，有一种不同于设置 `frame`为 `false`的替代方法来生成无边框窗口。无边框通常会隐藏标题栏以及失去对窗口的控制，如果你希望无边框的同时又保持对窗口的控制( `traffic lights`)。你可以通过设置下文的 `titleBarStyle`两个属性来实现: #### `hidden` 仅左上角有正常窗口控制( `traffic lights`)的无边框. ```javascript const {BrowserWindow} = require('electron') let win = new BrowserWindow({titleBarStyle: 'hidden'}) win.show() ``` #### `hidden-inset` 在边缘嵌入窗口控制( `traffic lights`) ```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() ``` ### 限制 * 无法点击穿透区域(透明窗口实质是个矩形窗口,假设内容是圆形,那么圆形与矩形的交集处透明区域无法点击穿透)。详见[讨论帖](https://github.com/electron/electron/issues/1335) * 透明窗口是不可调整大小的。在某些平台上，设置 `resizable`为 `true`也许会造成透明窗口停止工作。 * `blur`滤光器只适用于网页，所以没法将模糊效果用于窗口之下 * 在Windows系统中，当DWM被禁用时透明窗口不会工作。 * Linux用户需要命令行 `--enable-transparent-visuals --disable-gpu` 来禁用GPU以及允许ARGB去渲染透明窗口，这是由于一个Linux上的上游bug造成的 [详见此文](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`设定可拖动区域,或设置 `-webkit-app-region: no-drag` 禁止拖动的区域。需要注意的是，目前只支持矩形区域。 ```markup ``` 另外需要注意的是，如果你设置了整个窗口可拖动，你必须标记按钮为不可拖动,否则用户无法点击它们： ```css button { -webkit-app-region: no-drag; } ``` 如果你设置一个自定义的标题栏可拖动，你同样需要将标题栏中所有按钮设置为不可拖动. ## 文本选择在一个无框窗口中，拖动动作可能与文本选择发生冲突。比如，当你拖动标题栏，可能会变成选中标题栏上的文本。为了防止这种情况发生，你需要向下面这样在一个可拖动区域中禁用文本选择: ```css .titlebar { -webkit-user-select: none; -webkit-app-region: drag; } ``` ## 上下文菜单在一些平台上，可拖动区域会被认为是非客户端框架(non-client frame)，当你点击右键时，会弹出系统菜单。为了保证上下文菜单在所有平台下正确的显示，你不应该在可拖动区域使用自定义上下文菜单。 \[ignore-mouse-events]: browser-window\.md#winsetignoremouseeventsignore --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://yuzhigang5460.gitbook.io/electron/api/api-jie-kou-zhi-gong-yong-jie-kou/frameless-window.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.