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