BrowserWindow渲染主窗口 · nodejs

[browser-window](https://www.electronjs.org/docs/api/browser-window) 它只能在主進程中使用 ~~~ // 這樣寫在主進程會有用，但是在渲染進程中會提示'未定義' const { BrowserWindow } = require('electron') const win = new BrowserWindow() ~~~ 渲染進程中使用請使用以下方式： ~~~javascript //這樣寫在渲染進程中時行得通的，但是在主進程中是'未定義' const { remote } = require('electron') const { BrowserWindow } = remote const win = new BrowserWindow() ~~~ ### [`new BrowserWindow([options])`](https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions)[](https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions "Permalink") * `選項`Object (可選) * `width`Integer (可選) - 窗口的寬度，單位為像素。默認為`800`. * `height`Integer(可選) - 窗口的高度，單位為像素。默認為`600`. * `x`Integer (optional) - (**required**if y is used) Window's left offset from screen. Default is to center the window. * `y`Integer (optional) - (**required**if x is used) Window's top offset from screen. Default is to center the window. * `useContentSize`Boolean (可選) -`width`和`height`將設置為 web 頁面的尺寸(譯注: 不包含邊框), 這意味著窗口的實際尺寸將包括窗口邊框的大小，稍微會大一點。默認值為`false`. * `center`Boolean (可選) - 窗口在屏幕居中. * `minWidth`Integer (可選) - 窗口的最小寬度, 默認值為`0`. * `minHeight`Integer (可選) - 窗口的最小高度. 默認值為`0`. * `maxWidth`Integer (可選) - 窗口的最大寬度, 默認無限制. * `maxHeight`Integer (可選) - 窗口的最大高度, 默認無限制. * `resizable`Boolean (可選) - 窗口是否可以改變尺寸. 默認值為`true`. * `movable`Boolean (可選) - 窗口是否可以移動. 在 Linux 中無效. 默認值為`true`. * `minimizable`Boolean (可選) - 窗口是否可以最小化. 在 Linux 中無效. 默認值為`true`. * `maximizable`Boolean (可選) - 窗口是否可以最大化動. 在 Linux 中無效. 默認值為`true`. * `closable`Boolean (可選) - 窗口是否可以關閉. 在 Linux 中無效. 默認值為`true`. * `focusable`Boolean (可選) - 窗口是否可以聚焦. 默認值為`true`。在 Windows 中設置`focusable: false`也意味著設置了`skipTaskbar: true`. 在 Linux 中設置`focusable: false`時窗口停止與 wm 交互, 并且窗口將始終置頂。 * `alwaysOnTop`Boolean (可選) -窗口是否永遠在別的窗口的上面. 默認值為`false`. * `fullscreen`Boolean (可選) - 窗口是否全屏. 當明確設置為`false`時，在 macOS 上全屏的按鈕將被隱藏或禁用. 默認值為`false`. * `fullscreenable`Boolean (可選) - 窗口是否可以進入全屏狀態. 在 macOS上, 最大化/縮放按鈕是否可用默認值為`true`。 * `simpleFullscreen`Boolean (可選) - 在 macOS 上使用 pre-Lion 全屏. 默認為`false`. * `skipTaskbar`Boolean (可選) - 是否在任務欄中顯示窗口. 默認值為`false`. * `kiosk`Boolean (可選) - kiosk 模式. 默認值為`false`. * `title`String(可選) - 默認窗口標題默認為`"Electron"`。如果由`loadURL()`加載的HTML文件中含有標簽`<title>`，此屬性將被忽略。 * `icon`([NativeImage](https://www.electronjs.org/docs/api/native-image)| String) (可選) - 窗口的圖標. 在 Windows 上推薦使用`ICO`圖標來獲得最佳的視覺效果, 默認使用可執行文件的圖標. * `show`Boolean (可選) - 窗口創建的時候是否顯示. 默認值為`true`. * `paintWhenInitiallyHidden`Boolean (optional) - Whether the renderer should be active when`show`is`false`and it has just been created. In order for`document.visibilityState`to work correctly on first load with`show: false`you should set this to`false`. Setting this to`false`will cause the`ready-to-show`event to not fire. 默認值為`true`。 * `frame`Boolean (可選) - 設置為`false`時可以創建一個[Frameless Window](https://www.electronjs.org/docs/api/frameless-window). 默認值為`true`. * `parent`BrowserWindow (可選) - 指定父窗口. 默認值為`null`. * `modal`Boolean (可選) -是否為模態窗. 僅供子窗口使用. 默認值為`false`. * `acceptFirstMouse`Boolean (可選) - 是否允許單擊頁面來激活窗口. 默認值為`false`. * `disableAutoHideCursor`Boolean (可選) - 是否在輸入時隱藏鼠標. 默認值為`false`. * `autoHideMenuBar`Boolean (可選) - 自動隱藏菜單欄, 除非按了`Alt`鍵. 默認值為`false`. * `enableLargerThanScreen`Boolean (optional) - Enable the window to be resized larger than screen. Only relevant for macOS, as other OSes allow larger-than-screen windows by default. 默認值為`false`. * `backgroundColor`String(可選) - 窗口的背景顏色為十六進制值，例如`#66CD00`,`#FFF`,`#80FFFFFF`(設置`transparent`為`true`方可支持alpha屬性，格式為#AARRGGBB)。默認值為`#FFF`（白色）。 * `hasShadow`Boolean (可選) - 窗口是否有陰影. 僅在 macOS 上支持. 默認值為`true`. * `opacity`Number (可選)-設置窗口初始的不透明度, 介于 0.0 (完全透明) 和 1.0 (完全不透明) 之間。僅支持 Windows 和 macOS 。 * `darkTheme`Boolean (可選) - 強制窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環境上有效. 默認值為`false`. * `transparent`Boolean (optional) - Makes the window[transparent](https://www.electronjs.org/docs/api/frameless-window#transparent-window). 默認值為`false`. On Windows, does not work unless the window is frameless. * `type`String (可選) - 窗口的類型, 默認為普通窗口. 下面可以查看更多. * `titleBarStyle`String (可選) - 窗口標題欄的樣式. 默認值為`default`. 可能的值有： * `default`\- 標準灰色不透明的Mac標題欄 * `hidden`\- 隱藏標題欄, 內容充滿整個窗口, 但它依然在左上角, 仍然受標準窗口控制. * `hiddenInset`\- 隱藏標題欄, 顯示小的控制按鈕在窗口邊緣 * `customButtonsOnHover`Boolean (可選) - 在macOS的無框窗口上繪制自定義的關閉與最小化按鈕. 除非鼠標懸停到窗口的左上角, 否則這些按鈕不會顯示出來. 這些自定義的按鈕能防止, 與發生于標準的窗口工具欄按鈕處的鼠標事件相關的問題.**注意:**此選項目前是實驗性的。 * `fullscreenWindowTitle`Boolean (可選) - 在 macOS 全屏模式時，為所有帶`titleBarStyle`選項的標題欄顯示標題。默認值為`false`。 * `thickFrame`Boolean(可選)-對 Windows 上的無框窗口使用`WS_THICKFRAME`樣式，會增加標準窗口框架。設置為`false`時將移除窗口的陰影和動畫. 默認值為`true`。 * `vibrancy`String (可選) - 窗口是否使用 vibrancy 動態效果, 僅 macOS 中有效. Can be`appearance-based`,`light`,`dark`,`titlebar`,`selection`,`menu`,`popover`,`sidebar`,`medium-light`,`ultra-dark`,`header`,`sheet`,`window`,`hud`,`fullscreen-ui`,`tooltip`,`content`,`under-window`, or`under-page`. Please note that using`frame: false`in combination with a vibrancy value requires that you use a non-default`titleBarStyle`as well. Also note that`appearance-based`,`light`,`dark`,`medium-light`, and`ultra-dark`have been deprecated and will be removed in an upcoming version of macOS. * `zoomToPageWidth`Boolean (可選) - 單擊工具欄上的綠色信號燈按鈕或單擊窗口>縮放菜單項時的行為, 僅macOS中有效. 如果為`true`, 窗口將放大到網頁的本身寬度,`false`將使其縮放到屏幕的寬度。這也會影響直接調用`maximize()`時的行為。默認值為`false`. * `tabbingIdentifier`String (可選) - 選項組卡的名稱，在macOS 10.12+上可使窗口在原生選項卡中打開. 具有相同標識符的窗口將被組合在一起。這還會在窗口的標簽欄中添加一個原生的新選項卡按鈕, 并允許`app`和窗口接收`new-window-for-tab`事件。 * `webPreferences`Object (可選) - 網頁功能的設置 * `devTools`Boolean (可選) - 是否開啟 DevTools. 如果設置為`false`, 則無法使用`BrowserWindow.webContents.openDevTools ()`打開 DevTools。默認值為`true`。 * `nodeIntegration`Boolean (可選) - 是否集成Node，默認為`false`。 * `nodeIntegrationInWorker`Boolean (可選) - 是否在Web工作器中啟用了Node集成. 默認值為`false`. 更多內容參見[多線程](https://www.electronjs.org/docs/tutorial/multithreading). * `nodeIntegrationInSubFrames`Boolean (可選項)(實驗性)，是否允許在子頁面(iframe)或子窗口(child window)中集成Node.js；預先加載的腳本會被注入到每一個iframe，你可以用`process.isMainFrame`來判斷當前是否處于主框架（main frame）中。 * `preload`String (可選) -在頁面運行其他腳本之前預先加載指定的腳本無論頁面是否集成Node, 此腳本都可以訪問所有Node API 腳本路徑為文件的絕對路徑。當 node integration 關閉時, 預加載的腳本將從全局范圍重新引入node的全局引用標志[參考示例](https://www.electronjs.org/docs/api/process#event-loaded). * `sandbox`Boolean (可選)-如果設置該參數, 沙箱的渲染器將與窗口關聯, 使它與Chromium OS-level 的沙箱兼容, 并禁用 Node. js 引擎。它與`nodeIntegration`的選項不同，且預加載腳本的 API 也有限制.[更多詳情](https://www.electronjs.org/docs/api/sandbox-option).**注意:**改選項目前是為實驗性質，可能會在 Electron 未來的版本中移除。 * `enableRemoteModule`Boolean（可選）- 是否啟用[`Remote`](https://www.electronjs.org/docs/api/remote)模塊。默認值為`true`。 * `session`[Session](https://www.electronjs.org/docs/api/session#class-session)(可選) - 設置頁面的 session 而不是直接忽略 Session 對象, 也可用`partition`選項來代替，它接受一個 partition 字符串. 同時設置了`session`和`partition`時,`session`的優先級更高. 默認使用默認的 session. * `partition`String (optional) - 通過 session 的 partition 字符串來設置界面session. 如果`partition`以`persist:`開頭, 該頁面將使用持續的 session，并在所有頁面生效，且使用同一個`partition`. 如果沒有`persist:`前綴, 頁面將使用 in-memory session. 通過分配相同的`partition`, 多個頁可以共享同一會話。默認使用默認的 session. * `affinity`String (可選) - 當指定，具有相同`affinity`的 web頁面將在相同的渲染進程運行。需要注意的是，由于渲染過程中會有代碼重用，如`webPreferences`的`preload`,`sandbox`和`nodeIntegration`等選項會在不同頁面之間共用，即使你已經在不同頁面中為同一選項設置過不同的值，它們仍會被共用。因此，建議為`affinity`相同的頁面，使用相同的`webPreferences`*這一選項當前是實驗性的* * `zoomFactor`Number (可選) - 頁面的默認縮放系數,`3.0`表示`300%`. 默認值為`1.0`. * `javascript`Boolean (可選) - 是否啟用 JavaScript 支持. 默認值為`true`. * `webSecurity`Boolean (可選) - 當設置為`false`, 它將禁用同源策略 (通常用來測試網站), 如果此選項不是由開發者設置的，還會把`allowRunningInsecureContent`設置為`true`. 默認值為`true`。 * `allowRunningInsecureContent`Boolean (可選) -允許一個 https 頁面運行 http url 里的資源，包括 JavaScript, CSS 或 plugins. 默認值為`false`. * `images`Boolean (可選) - 啟動圖像支持. 默認值為`true`. * `textAreasAreResizable`Boolean (可選) - 讓 TextArea 元素可以調整大小. 默認值為`true`. * `webgl`Boolean (可選) - 啟用 WebGL 支持. 默認值為`true`. * `plugins`Boolean (可選) - 是否支持插件. 默認值為`false`. * `experimentalFeatures`Boolean (optional) - 啟用 Chromium 的實驗功能. 默認值為`false`. * `scrollBounce`Boolean (可選) - 在 macOS 啟用彈力動畫 (橡皮筋) 效果. 默認值為`false`. * `enableBlinkFeatures`String(可選) - 以`逗號`分隔的需要啟用的特性列表，譬如`CSSVariables,KeyboardEventKey`在[RuntimeEnabledFeatures.json5](https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/runtime_enabled_features.json5?l=70)文件中查看被支持的所有特性. * `disableBlinkFeatures`String (可選) - 以`,`分隔的禁用特性列表, 如`CSSVariables,KeyboardEventKey`. 在[RuntimeEnabledFeatures.json5](https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/runtime_enabled_features.json5?l=70)文件中查看被支持的所有特性. * `defaultFontFamily`Object (可選) - 設置 font-family 的默認字體. * `standard`String (可選) - 默認值為`Times New Roman`. * `serif`String (可選) - 默認值為`Times New Roman`. * `sansSerif`String (可選) - 默認值為`Arial`. * `monospace`String (可選) - 默認值為`Courier New`. * `cursive`String (可選) - 默認值為`Script`. * `fantasy`String (可選) - 默認值為`Impact`. * `defaultFontSize`Integer (可選) - 默認值為`16`. * `defaultMonospaceFontSize`Integer (可選) - 默認值為`13`. * `minimumFontSize`Integer (可選) - 默認值為`0`. * `defaultEncoding`String (可選) - 默認值為`ISO-8859-1`. * `backgroundThrottling`Boolean (可選)-是否在頁面成為背景時限制動畫和計時器。這也會影響到[Page Visibility API](https://www.electronjs.org/docs/api/browser-window#page-visibility). 默認值為`true`。 * `offscreen`Boolean (optional) - 是否繪制和渲染可視區域外的窗口. 默認值為`false`. 更多詳情, 請參見[offscreen rendering tutorial](https://www.electronjs.org/docs/tutorial/offscreen-rendering)。 * `contextIsolation`Boolean (可選) - 是否在獨立 JavaScript 環境中運行 Electron API和指定的`preload`腳本. 默認值為`false`.`preload`腳本的運行環境仍然可以訪問`document`和`window`全局變量，但它將使用自己內置的函數 (如`Array`,`Object`,`JSON`等)，并且將被加載的頁面與對全局環境所做的任何更改隔離開來. Electron API 僅在`preload`腳本中有效，而不是加載的頁面。在加載可能不受信任的遠程內容時, 應使用此選項, 以確保加載的內容不能篡改`preload`腳本和使用的 Electron APIs。此選項使用[Chrome Content Scripts](https://developer.chrome.com/extensions/content_scripts#execution-environment)使用的相同技術。通過在控制臺選項卡頂部的組合框中選擇 "Electron Isolated Context" 條目, 可以在開發工具中訪問此上下文。 * `nativeWindowOpen`Boolean (可選) - 是否使用原生的`window.open()`. 默認值為`false`. Child windows will always have node integration disabled unless`nodeIntegrationInSubFrames`is true.**注意:**此選項目前是實驗性的。 * `webviewTag`Boolean (可選) - 是否啟用[`<webview>`tag](https://www.electronjs.org/docs/api/webview-tag)標簽. 默認值為`false`.**注意:**為`< webview>`配置的`preload`腳本在執行時將啟用節點集成, 因此應確保遠程或不受信任的內容無法創建惡意的`preload`腳本。可以使用[webContents](https://www.electronjs.org/docs/api/web-contents)上的`will-attach-webview`事件對`preload`腳本進行剝離, 并驗證或更改`<webview>`的初始設置。 * `additionalArguments`String\[\] (可選) - 一系列將會被附加至此app的渲染進程的`process.argv`的字符串. 對于將少量數據向下傳至渲染進程的預加載腳本而言是十分實用的. * `safeDialogs`Boolean (可選) - 是否啟用瀏覽器樣式的持續對話框保護。缺省為`false`。 * `safeDialogsMessage`String (可選) - 當持續對話框保護被觸發時顯示的消息。如果沒有定義，那么將使用缺省的消息。注意：當前缺省消息是英文，并沒有本地化。 * `navigateOnDragDrop`Boolean (可選) - 將文件或鏈接拖放到頁面上時是否觸發頁面跳轉. 默認為`false`. * `autoplayPolicy`String (optional) - Autoplay policy to apply to content in the window, can be`no-user-gesture-required`,`user-gesture-required`,`document-user-activation-required`. Defaults to`no-user-gesture-required`. * `disableHtmlFullscreenWindowResize`Boolean (optional) - Whether to prevent the window from resizing when entering HTML Fullscreen. Default is`false`. 當使用`minWidth`/`maxWidth`/`minHeight`/`maxHeight`設置最小或最大窗口大小時, 它只限制用戶。它不會阻止您將不符合大小限制的值傳遞給`setBounds`/`setSize`或`BrowserWindow`的構造函數。 `type`選項的可能值和行為與平臺相關。可能的值為: * 在 Linux 上, 可能的類型有`desktop`、`dock`、`toolbar`、`splash`、`notification`。 * 在 macOS, 可能的類型是`desktop`,`textured`. * `textured`類型增加金屬色澤的外觀 (`NSTexturedBackgroundWindowMask`). * `desktop`類型將窗口置于桌面背景級別 (`kCGDesktopWindowLevel - 1`). 注意，桌面窗口不會接收焦點、鍵盤或鼠標事件，但您可以使用 globalShortcut 接收快捷鍵的消息 * 在 Windows 上, 可能的類型為`toolbar`.