跳到主要內容

BrowserWindow

建立和控制瀏覽器視窗。

程序:主要

此模組在 app 模組發出 ready 事件之前無法使用。

// In the main process.
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

// Load a remote URL
win.loadURL('https://github.com')

// Or load a local HTML file
win.loadFile('index.html')

視窗自訂

BrowserWindow 類別公開了多種方式來修改應用程式視窗的外觀和行為。如需更多詳細資訊,請參閱視窗自訂教學課程。

優雅地顯示視窗

當直接在視窗中載入頁面時,使用者可能會看到頁面逐步載入,這對於原生應用程式來說不是好的體驗。為了使視窗顯示時不會出現視覺閃爍,針對不同的情況有兩種解決方案。

使用 ready-to-show 事件

在載入頁面時,如果視窗尚未顯示,則當渲染器程序首次渲染頁面時,將發出 ready-to-show 事件。在此事件之後顯示視窗將不會有視覺閃爍

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
win.show()
})

此事件通常在 did-finish-load 事件之後發出,但對於具有許多遠端資源的頁面,它可能會在 did-finish-load 事件之前發出。

請注意,使用此事件意味著即使 show 為 false,渲染器也會被視為「可見」並進行繪製。如果您使用 paintWhenInitiallyHidden: false,則此事件永遠不會觸發

設定 backgroundColor 屬性

對於複雜的應用程式,ready-to-show 事件可能會發出得太晚,使應用程式感覺緩慢。在這種情況下,建議立即顯示視窗,並使用接近應用程式背景的 backgroundColor

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

請注意,即使對於使用 ready-to-show 事件的應用程式,仍然建議設定 backgroundColor 以使應用程式感覺更原生。

一些有效的 backgroundColor 值範例包括

const win = new BrowserWindow()
win.setBackgroundColor('hsl(230, 100%, 50%)')
win.setBackgroundColor('rgb(255, 145, 145)')
win.setBackgroundColor('#ff00a3')
win.setBackgroundColor('blueviolet')

有關這些顏色類型的更多資訊,請參閱win.setBackgroundColor中的有效選項。

父視窗和子視窗

透過使用 parent 選項,您可以建立子視窗

const { BrowserWindow } = require('electron')

const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()

child 視窗將始終顯示在 top 視窗之上。

強制回應視窗是停用父視窗的子視窗。若要建立強制回應視窗,您必須同時設定 parentmodal 選項

const { BrowserWindow } = require('electron')

const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})

頁面可見性

頁面可見性 API 的運作方式如下

  • 在所有平台上,可見性狀態都會追蹤視窗是否已隱藏/最小化。
  • 此外,在 macOS 上,可見性狀態也會追蹤視窗遮蔽狀態。如果視窗被另一個視窗遮蔽(即完全覆蓋),則可見性狀態將為 hidden。在其他平台上,只有當視窗最小化或使用 win.hide() 明確隱藏時,可見性狀態才會為 hidden
  • 如果使用 show: false 建立 BrowserWindow,則儘管視窗實際上已隱藏,但初始可見性狀態仍為 visible
  • 如果停用了 backgroundThrottling,即使視窗最小化、遮蔽或隱藏,可見性狀態仍將保持 visible

建議您在可見性狀態為 hidden 時暫停昂貴的操作,以最大程度地減少功耗。

平台注意事項

  • 在 macOS 上,強制回應視窗將顯示為附加到父視窗的表單。
  • 在 macOS 上,當父視窗移動時,子視窗將保持相對於父視窗的位置,而在 Windows 和 Linux 上,子視窗將不會移動。
  • 在 Linux 上,強制回應視窗的類型將變更為 dialog
  • 在 Linux 上,許多桌面環境不支援隱藏強制回應視窗。

類別:BrowserWindow 繼承自 BaseWindow

建立和控制瀏覽器視窗。

程序:主要

BrowserWindow 是一個 EventEmitter

它會使用 options 設定的原生屬性建立新的 BrowserWindow

new BrowserWindow([options])

  • options BrowserWindowConstructorOptions(選用)
    • webPreferences WebPreferences(選用)- 網頁功能的設定。
      • devTools boolean(選用)- 是否啟用 DevTools。如果設定為 false,則無法使用 BrowserWindow.webContents.openDevTools() 開啟 DevTools。預設值為 true
      • nodeIntegration boolean(選用)- 是否啟用 Node 整合。預設值為 false
      • nodeIntegrationInWorker boolean(選用)- 是否在 Web Worker 中啟用 Node 整合。預設值為 false。有關此內容的更多資訊,請參閱多執行緒
      • nodeIntegrationInSubFrames boolean(選用)- 用於在子框架(例如 iframe 和子視窗)中啟用 Node.js 支援的實驗性選項。您的所有預先載入都將為每個 iframe 載入,您可以使用 process.isMainFrame 來判斷您是否在主框架中。
      • preload string(選用)- 指定在頁面中執行其他腳本之前將載入的腳本。無論是否開啟 Node 整合,此腳本始終可以存取 Node API。該值應為腳本的絕對檔案路徑。當 Node 整合關閉時,預先載入腳本可以將 Node 全域符號重新引入到全域範圍。請參閱此處的範例。
      • sandbox boolean(選用)- 如果設定,這將沙箱化與視窗關聯的渲染器,使其與 Chromium OS 層級沙箱相容,並停用 Node.js 引擎。這與 nodeIntegration 選項不同,並且預先載入腳本可用的 API 受到更多限制。請參閱此處以瞭解有關此選項的更多資訊。
      • session Session(選用)- 設定頁面使用的 session。除了直接傳遞 Session 物件之外,您也可以選擇改用 partition 選項,該選項接受分割區字串。當同時提供 sessionpartition 時,將優先使用 session。預設值為預設 session。
      • partition string(選用)- 根據 session 的分割區字串設定頁面使用的 session。如果 partitionpersist: 開頭,則頁面將使用持久性 session,該 session 可供應用程式中具有相同 partition 的所有頁面使用。如果沒有 persist: 前綴,則頁面將使用記憶體內 session。透過指派相同的 partition,多個頁面可以共用相同的 session。預設值為預設 session。
      • zoomFactor number(選用)- 頁面的預設縮放比例,3.0 表示 300%。預設值為 1.0
      • javascript boolean(選用)- 啟用 JavaScript 支援。預設值為 true
      • webSecurity boolean(選用)- 當 false 時,它將停用同源策略(通常供人們使用測試網站),如果使用者未設定此選項,則將 allowRunningInsecureContent 設定為 true。預設值為 true
      • allowRunningInsecureContent boolean(選用)- 允許 https 頁面從 http URL 執行 JavaScript、CSS 或外掛程式。預設值為 false
      • images boolean(選用)- 啟用影像支援。預設值為 true
      • imageAnimationPolicy string(選用)- 指定如何執行影像動畫(例如 GIF)。可以是 animateanimateOncenoAnimation。預設值為 animate
      • textAreasAreResizable boolean(選用)- 使 TextArea 元素可調整大小。預設值為 true
      • webgl boolean(選用)- 啟用 WebGL 支援。預設值為 true
      • plugins boolean(選用)- 是否應啟用外掛程式。預設值為 false
      • experimentalFeatures boolean(選用)- 啟用 Chromium 的實驗性功能。預設值為 false
      • scrollBounce boolean(選用)macOS - 在 macOS 上啟用捲動彈跳(橡皮筋效應)。預設值為 false
      • enableBlinkFeatures string(選用)- 要啟用的功能字串清單,以 , 分隔,例如 CSSVariables,KeyboardEventKey。支援的功能字串的完整清單可在RuntimeEnabledFeatures.json5檔案中找到。
      • disableBlinkFeatures string(選用)- 要停用的功能字串清單,以 , 分隔,例如 CSSVariables,KeyboardEventKey。支援的功能字串的完整清單可在RuntimeEnabledFeatures.json5檔案中找到。
      • defaultFontFamily Object(選用)- 設定字型系列預設字型。
        • standard string(選用)- 預設為 Times New Roman
        • serif string(選用)- 預設為 Times New Roman
        • sansSerif string(選用)- 預設為 Arial
        • monospace string(選用)- 預設為 Courier New
        • cursive string(選用)- 預設為 Script
        • fantasy string(選用)- 預設為 Impact
        • math string(選用)- 預設為 Latin Modern Math
      • defaultFontSize Integer(選用)- 預設值為 16
      • defaultMonospaceFontSize Integer(選用)- 預設值為 13
      • minimumFontSize Integer(選用)- 預設值為 0
      • defaultEncoding string(選用)- 預設值為 ISO-8859-1
      • backgroundThrottling boolean(選用)- 當頁面變成背景時,是否限制動畫和計時器。這也會影響頁面可見性 API。當單一browserWindow中顯示的至少一個 webContents 已停用 backgroundThrottling 時,將為整個視窗及其顯示的其他 webContents 繪製和交換框架。預設值為 true
      • offscreen Object | boolean(選用)- 是否為瀏覽器視窗啟用離螢幕渲染。預設值為 false。有關更多詳細資訊,請參閱離螢幕渲染教學課程
        • useSharedTexture boolean(選用)實驗性 - 是否使用 GPU 共用紋理來加速繪製事件。預設值為 false。有關更多詳細資訊,請參閱離螢幕渲染教學課程
      • contextIsolation boolean(選用)- 是否在單獨的 JavaScript 環境中執行 Electron API 和指定的 preload 腳本。預設值為 truepreload 腳本在其中執行的環境將僅能存取其自身的專用 documentwindow 全域變數,以及其自身的一組 JavaScript 內建函數(ArrayObjectJSON 等),所有這些對於載入的內容都是不可見的。Electron API 將僅在 preload 腳本中可用,而不在載入的頁面中可用。載入可能不受信任的遠端內容時,應使用此選項,以確保載入的內容不會竄改 preload 腳本和正在使用的任何 Electron API。此選項使用 Chrome Content Scripts 使用的相同技術。您可以透過在「Console」標籤頂部的組合方塊中選取「Electron Isolated Context」項目,在開發人員工具中存取此環境。
      • webviewTag boolean(選用)- 是否啟用 <webview> 標籤。預設值為 false注意:<webview> 配置的 preload 腳本在執行時將啟用 Node 整合,因此您應確保遠端/不受信任的內容無法建立具有可能惡意 preload 腳本的 <webview> 標籤。您可以使用 webContents 上的 will-attach-webview 事件來移除 preload 腳本,並驗證或變更 <webview> 的初始設定。
      • additionalArguments string[](選用)- 將附加到此應用程式渲染器程序中 process.argv 的字串清單。對於將少量資料傳遞到渲染器程序預先載入腳本非常有用。
      • safeDialogs boolean(選用)- 是否啟用瀏覽器樣式的連續對話方塊保護。預設值為 false
      • safeDialogsMessage string(選用)- 觸發連續對話方塊保護時要顯示的訊息。如果未定義,將使用預設訊息,請注意,目前預設訊息為英文,未本地化。
      • disableDialogs boolean(選用)- 是否完全停用對話方塊。覆寫 safeDialogs。預設值為 false
      • navigateOnDragDrop boolean(選用)- 將檔案或連結拖放到頁面上是否會導致導航。預設值為 false
      • autoplayPolicy string(選用)- 套用於視窗中內容的自動播放策略,可以是 no-user-gesture-requireduser-gesture-requireddocument-user-activation-required。預設值為 no-user-gesture-required
      • disableHtmlFullscreenWindowResize boolean(選用)- 進入 HTML 全螢幕時是否防止視窗調整大小。預設值為 false
      • accessibleTitle string(選用)- 僅提供給螢幕閱讀器等輔助工具的替代標題字串。此字串不會直接向使用者顯示。
      • spellcheck boolean(選用)- 是否啟用內建拼字檢查器。預設值為 true
      • enableWebSQL boolean(選用)- 是否啟用 WebSQL api。預設值為 true
      • v8CacheOptions string(選用)- 強制執行 blink 使用的 v8 程式碼快取策略。接受的值為
        • none - 停用程式碼快取
        • code - 基於啟發式的程式碼快取
        • bypassHeatCheck - 繞過程式碼快取啟發式演算法,但使用延遲編譯
        • bypassHeatCheckAndEagerCompile - 與上述相同,只是編譯是急切的。預設策略為 code
      • enablePreferredSizeMode boolean(選用)- 是否啟用慣用大小模式。慣用大小是包含文件版面配置所需的最小大小,而無需捲動。啟用此功能將導致當慣用大小變更時,在 WebContents 上發出 preferred-size-changed 事件。預設值為 false
      • transparent boolean(選用)- 是否為訪客頁面啟用背景透明度。預設值為 true注意:訪客頁面的文字和背景顏色衍生自其根元素的色彩配置。啟用透明度後,文字顏色仍會相應變更,但背景將保持透明。
      • enableDeprecatedPaste boolean(選用)已棄用 - 是否啟用 paste execCommand。預設值為 false
    • paintWhenInitiallyHidden boolean(選用)- 當 showfalse 且剛建立時,渲染器是否應處於活動狀態。為了使 document.visibilityState 在首次載入且 show: false 時正確運作,您應將此設定為 false。將此設定為 false 將導致 ready-to-show 事件不會觸發。預設值為 true

實例事件

使用 new BrowserWindow 建立的物件會發出以下事件

注意:某些事件僅在特定作業系統上可用,並標記為此類。

事件:'page-title-updated'

傳回

  • event 事件
  • title 字串
  • explicitSet boolean

當文件變更其標題時發出,呼叫 event.preventDefault() 將阻止原生視窗的標題變更。當標題從檔案 URL 合成時,explicitSet 為 false。

事件:'close'

傳回

  • event 事件

當視窗即將關閉時發出。它在 DOM 的 beforeunloadunload 事件之前發出。呼叫 event.preventDefault() 將取消關閉。

通常,您會希望使用 beforeunload 處理常式來決定是否應關閉視窗,這也會在重新載入視窗時呼叫。在 Electron 中,傳回 undefined 以外的任何值都會取消關閉。例如

window.onbeforeunload = (e) => {
console.log('I do not want to be closed')

// Unlike usual browsers that a message box will be prompted to users, returning
// a non-void value will silently cancel the close.
// It is recommended to use the dialog API to let the user confirm closing the
// application.
e.returnValue = false
}

注意window.onbeforeunload = handlerwindow.addEventListener('beforeunload', handler) 的行為之間存在細微差異。建議始終明確設定 event.returnValue,而不是僅傳回值,因為前者在 Electron 中更一致地運作。

事件:'closed'

當視窗關閉時發出。收到此事件後,您應移除對視窗的參照,並避免再使用它。

事件:'query-session-end' Windows

傳回

當 session 即將因關機、機器重新啟動或使用者登出而結束時發出。呼叫 event.preventDefault() 可以延遲系統關機,但通常最好尊重使用者結束 session 的選擇。但是,如果結束 session 會使使用者面臨遺失資料的風險,您可以選擇使用它。

事件:'session-end' Windows

傳回

當 session 即將因關機、機器重新啟動或使用者登出而結束時發出。一旦此事件觸發,就無法阻止 session 結束。

事件:'unresponsive'

當網頁變得沒有回應時發出。

事件:'responsive'

當沒有回應的網頁再次變得有回應時發出。

事件:'blur'

當視窗失去焦點時發出。

事件:'focus'

當視窗獲得焦點時發出。

事件:'show'

當視窗顯示時發出。

事件:'hide'

當視窗隱藏時發出。

事件:'ready-to-show'

當網頁已渲染(在未顯示時)且視窗可以顯示而沒有視覺閃爍時發出。

請注意,使用此事件意味著即使 show 為 false,渲染器也會被視為「可見」並進行繪製。如果您使用 paintWhenInitiallyHidden: false,則此事件永遠不會觸發

事件:'maximize'

當視窗最大化時發出。

事件:'unmaximize'

當視窗從最大化狀態退出時發出。

事件:'minimize'

當視窗最小化時發出。

事件:'restore'

當視窗從最小化狀態還原時發出。

事件:'will-resize' macOS Windows

傳回

  • event 事件
  • newBounds Rectangle - 視窗正在調整大小的尺寸。
  • details 物件
    • edge (string) - 視窗被拖曳以調整大小的邊緣。可以是 bottomleftrighttop-lefttop-rightbottom-leftbottom-right

在視窗調整大小之前發出。呼叫 event.preventDefault() 將阻止視窗調整大小。

請注意,這僅在手動調整視窗大小時發出。使用 setBounds/setSize 調整視窗大小不會發出此事件。

edge 選項的可能值和行為取決於平台。可能的值為

  • 在 Windows 上,可能的值為 bottomtopleftrighttop-lefttop-rightbottom-leftbottom-right
  • 在 macOS 上,可能的值為 bottomright
    • bottom 用於表示垂直調整大小。
    • right 用於表示水平調整大小。

事件:'resize'

在視窗調整大小後發出。

事件:'resized' macOS Windows

在視窗完成調整大小後發出一次。

這通常在手動調整視窗大小時發出。在 macOS 上,使用 setBounds/setSize 調整視窗大小並將 animate 參數設定為 true 也會在調整大小完成後發出此事件。

事件:'will-move' macOS Windows

傳回

  • event 事件
  • newBounds Rectangle - 視窗正在移動到的位置。

在視窗移動之前發出。在 Windows 上,呼叫 event.preventDefault() 將阻止視窗移動。

請注意,這僅在手動移動視窗時發出。使用 setPosition/setBounds/center 移動視窗不會發出此事件。

事件:'move'

當視窗正在移動到新位置時發出。

事件:'moved' macOS Windows

當視窗移動到新位置時發出一次。

注意:在 macOS 上,此事件是 move 的別名。

事件:'enter-full-screen'

當視窗進入全螢幕狀態時發出。

事件:'leave-full-screen'

當視窗離開全螢幕狀態時發出。

事件:'enter-html-full-screen'

當視窗進入由 HTML API 觸發的全螢幕狀態時發出。

事件:'leave-html-full-screen'

當視窗離開由 HTML API 觸發的全螢幕狀態時發出。

事件:'always-on-top-changed'

傳回

  • event 事件
  • isAlwaysOnTop 布林值

當視窗被設定或取消設定為永遠顯示在其他視窗之上時發出。

事件:'app-command' Windows Linux

傳回

  • event 事件
  • command 字串

應用程式命令 被調用時發出。這些通常與鍵盤媒體鍵或瀏覽器命令,以及某些 Windows 滑鼠內建的「返回」按鈕有關。

命令會轉換為小寫,底線會替換為連字符號,並且 APPCOMMAND_ 前綴會被移除。例如,APPCOMMAND_BROWSER_BACKWARD 會作為 browser-backward 發出。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.on('app-command', (e, cmd) => {
// Navigate the window back when the user hits their mouse back button
if (cmd === 'browser-backward' && win.webContents.canGoBack()) {
win.webContents.goBack()
}
})

以下應用程式命令在 Linux 上明確支援

  • browser-backward
  • browser-forward

事件:'swipe' macOS

傳回

  • event 事件
  • direction 字串

在三指滑動時發出。可能的方向為 uprightdownleft

此事件的底層方法旨在處理舊式 macOS 風格的觸控板滑動,其中螢幕上的內容不會隨著滑動而移動。大多數 macOS 觸控板不再配置為允許這種滑動,因此為了使其正確發出,系統偏好設定 > 觸控式軌跡板 > 更多手勢 中的「在頁面之間滑動」偏好設定必須設定為「使用兩指或三指滑動」。

事件:'rotate-gesture' macOS

傳回

  • event 事件
  • rotation 浮點數

在觸控板旋轉手勢時發出。持續發出直到旋轉手勢結束。每次發出的 rotation 值是自上次發出以來旋轉的角度(以度為單位)。旋轉手勢結束時最後發出的事件值始終為 0。逆時針旋轉值為正值,而順時針旋轉值為負值。

事件:'sheet-begin' macOS

當視窗開啟工作表時發出。

事件:'sheet-end' macOS

當視窗已關閉工作表時發出。

事件:'new-window-for-tab' macOS

當原生新分頁按鈕被點擊時發出。

事件:'system-context-menu' Windows

傳回

  • event 事件
  • point Point - 上下文選單被觸發時的螢幕座標

當系統上下文選單在視窗上被觸發時發出,這通常僅在使用者在視窗的非客戶區點擊滑鼠右鍵時觸發。這是視窗標題列或您在無邊框視窗中宣告為 -webkit-app-region: drag 的任何區域。

呼叫 event.preventDefault() 將阻止選單顯示。

靜態方法

BrowserWindow 類別具有以下靜態方法

BrowserWindow.getAllWindows()

回傳 BrowserWindow[] - 所有已開啟瀏覽器視窗的陣列。

BrowserWindow.getFocusedWindow()

回傳 BrowserWindow | null - 此應用程式中獲得焦點的視窗,否則回傳 null

BrowserWindow.fromWebContents(webContents)

回傳 BrowserWindow | null - 擁有給定 webContents 的視窗,如果內容不屬於任何視窗,則回傳 null

BrowserWindow.fromBrowserView(browserView) 已棄用

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

回傳 BrowserWindow | null - 擁有給定 browserView 的視窗。如果給定的視圖未附加到任何視窗,則回傳 null

BrowserWindow.fromId(id)

  • id 整數

回傳 BrowserWindow | null - 具有給定 id 的視窗。

實例屬性

使用 new BrowserWindow 建立的物件具有以下屬性

const { BrowserWindow } = require('electron')
// In this example `win` is our instance
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('https://github.com')

win.webContents 唯讀

此視窗擁有的 WebContents 物件。所有網頁相關事件和操作都將透過它完成。

請參閱 webContents 文件 以了解其方法和事件。

win.id 唯讀

一個 整數 屬性,表示視窗的唯一 ID。每個 ID 在整個 Electron 應用程式的所有 BrowserWindow 實例中都是唯一的。

win.tabbingIdentifier macOS 唯讀

一個 字串 (可選) 屬性,等於傳遞給 BrowserWindow 建構子的 tabbingIdentifier,如果未設定則為 undefined

win.autoHideMenuBar

一個 布林值 屬性,決定視窗選單列是否應自動隱藏。設定後,選單列只會在使用者按下單個 Alt 鍵時顯示。

如果選單列已可見,將此屬性設定為 true 不會立即隱藏它。

win.simpleFullScreen

一個 布林值 屬性,決定視窗是否處於簡單 (pre-Lion) 全螢幕模式。

win.fullScreen

一個 布林值 屬性,決定視窗是否處於全螢幕模式。

win.focusable Windows macOS

一個 布林值 屬性,決定視窗是否可獲得焦點。

win.visibleOnAllWorkspaces macOS Linux

一個 布林值 屬性,決定視窗是否在所有工作區上可見。

注意: 在 Windows 上始終回傳 false。

win.shadow

一個 布林值 屬性,決定視窗是否具有陰影。

win.menuBarVisible Windows Linux

一個 布林值 屬性,決定選單列是否應該可見。

注意: 如果選單列是自動隱藏的,使用者仍然可以透過按下單個 Alt 鍵來顯示選單列。

win.kiosk

一個 布林值 屬性,決定視窗是否處於 kiosk 模式。

win.documentEdited macOS

一個 布林值 屬性,指定視窗的文件是否已被編輯。

當設定為 true 時,標題列中的圖示將變為灰色。

win.representedFilename macOS

一個 字串 屬性,決定視窗代表的檔案路徑名稱,檔案的圖示將顯示在視窗的標題列中。

win.title

一個 字串 屬性,決定原生視窗的標題。

注意: 網頁的標題可能與原生視窗的標題不同。

win.minimizable macOS Windows

一個 布林值 屬性,決定視窗是否可以由使用者手動最小化。

在 Linux 上,setter 是空操作,但 getter 回傳 true

win.maximizable macOS Windows

一個 布林值 屬性,決定視窗是否可以由使用者手動最大化。

在 Linux 上,setter 是空操作,但 getter 回傳 true

win.fullScreenable

一個 布林值 屬性,決定最大化/縮放視窗按鈕是切換全螢幕模式還是最大化視窗。

win.resizable

一個 布林值 屬性,決定視窗是否可以由使用者手動調整大小。

win.closable macOS Windows

一個 布林值 屬性,決定視窗是否可以由使用者手動關閉。

在 Linux 上,setter 是空操作,但 getter 回傳 true

win.movable macOS Windows

一個 布林值 屬性,決定視窗是否可以由使用者移動。

在 Linux 上,setter 是空操作,但 getter 回傳 true

win.excludedFromShownWindowsMenu macOS

一個 布林值 屬性,決定視窗是否從應用程式的 Windows 選單中排除。預設為 false

const win = new BrowserWindow({ height: 600, width: 600 })

const template = [
{
role: 'windowmenu'
}
]

win.excludedFromShownWindowsMenu = true

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

win.accessibleTitle

一個 字串 屬性,定義僅提供給輔助工具(如螢幕閱讀器)的替代標題。此字串不會直接向使用者顯示。

實例方法

使用 new BrowserWindow 建立的物件具有以下實例方法

注意: 某些方法僅在特定作業系統上可用,並已如此標示。

win.destroy()

強制關閉視窗,網頁不會發出 unloadbeforeunload 事件,此視窗也不會發出 close 事件,但它保證會發出 closed 事件。

win.close()

嘗試關閉視窗。這與使用者手動點擊視窗的關閉按鈕具有相同的效果。網頁可能會取消關閉。請參閱 close 事件

win.focus()

將焦點放在視窗上。

win.blur()

從視窗中移除焦點。

win.isFocused()

回傳 布林值 - 視窗是否獲得焦點。

win.isDestroyed()

回傳 布林值 - 視窗是否已銷毀。

win.show()

顯示視窗並給予焦點。

win.showInactive()

顯示視窗但不給予焦點。

win.hide()

隱藏視窗。

win.isVisible()

回傳 布林值 - 視窗在應用程式前景中是否對使用者可見。

win.isModal()

回傳 布林值 - 目前視窗是否為模態視窗。

win.maximize()

最大化視窗。如果視窗尚未顯示,這也將顯示(但不給予焦點)視窗。

win.unmaximize()

取消最大化視窗。

win.isMaximized()

回傳 布林值 - 視窗是否已最大化。

win.minimize()

最小化視窗。在某些平台上,最小化的視窗將顯示在 Dock 中。

win.restore()

將視窗從最小化狀態還原到其先前狀態。

win.isMinimized()

回傳 布林值 - 視窗是否已最小化。

win.setFullScreen(flag)

  • flag 布林值

設定視窗是否應處於全螢幕模式。

注意: 在 macOS 上,全螢幕轉換是異步發生的。如果後續操作取決於全螢幕狀態,請使用 'enter-full-screen''leave-full-screen' 事件。

win.isFullScreen()

回傳 布林值 - 視窗是否處於全螢幕模式。

注意: 在 macOS 上,全螢幕轉換是異步發生的。當查詢 BrowserWindow 的全螢幕狀態時,您應確保已發出 'enter-full-screen''leave-full-screen' 事件。

win.setSimpleFullScreen(flag) macOS

  • flag 布林值

進入或離開簡單全螢幕模式。

簡單全螢幕模式模擬 macOS Lion (10.7) 之前版本中發現的原生全螢幕行為。

win.isSimpleFullScreen() macOS

回傳 布林值 - 視窗是否處於簡單 (pre-Lion) 全螢幕模式。

win.isNormal()

回傳 布林值 - 視窗是否處於正常狀態(未最大化、未最小化、未處於全螢幕模式)。

win.setAspectRatio(aspectRatio[, extraSize])

  • aspectRatio 浮點數 - 要為內容視圖的某些部分維護的縱橫比。
  • extraSize Size (可選) macOS - 在維持縱橫比時不包含的額外大小。

這將使視窗維持縱橫比。額外大小允許開發人員擁有以像素為單位指定的空間,而不包含在縱橫比計算中。此 API 已經考慮到視窗大小與其內容大小之間的差異。

考慮一個具有 HD 影片播放器和相關控制項的普通視窗。也許在左邊緣有 15 像素的控制項,在右邊緣有 25 像素的控制項,在播放器下方有 50 像素的控制項。為了在播放器本身內維持 16:9 的縱橫比(HD @1920x1080 的標準縱橫比),我們將使用 16/9 和 { width: 40, height: 50 } 的參數呼叫此函數。第二個參數不關心額外的寬度和高度在內容視圖中的位置,只關心它們存在。總結您在整個內容視圖中擁有的任何額外寬度和高度區域。

當使用 win.setSize 等 API 以程式方式調整視窗大小時,縱橫比將不會被遵守。

若要重設縱橫比,請將 0 作為 aspectRatio 值傳遞:win.setAspectRatio(0)

win.setBackgroundColor(backgroundColor)

  • backgroundColor 字串 - 十六進位、RGB、RGBA、HSL、HSLA 或具名 CSS 色彩格式的顏色。alpha 通道對於十六進位類型是可選的。

有效 backgroundColor 值的範例

  • 十六進位
    • #fff (簡寫 RGB)
    • #ffff (簡寫 ARGB)
    • #ffffff (RGB)
    • #ffffffff (ARGB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • 例如 rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • 例如 rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • 例如 hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • 例如 hsla(200, 20%, 50%, 0.5)
  • 色彩名稱
    • 選項列在 SkParseColor.cpp
    • 類似於 CSS Color Module Level 3 關鍵字,但區分大小寫。
      • 例如 bluevioletred

設定視窗的背景顏色。請參閱 設定 backgroundColor

win.previewFile(path[, displayName]) macOS

  • path 字串 - 使用 QuickLook 預覽檔案的絕對路徑。這很重要,因為 Quick Look 使用路徑上的檔案名稱和副檔名來判斷要開啟的檔案的內容類型。
  • displayName 字串 (可選) - 要在 Quick Look 模態視圖上顯示的檔案名稱。這純粹是視覺效果,不會影響檔案的內容類型。預設為 path

使用 Quick Look 預覽給定路徑的檔案。

win.closeFilePreview() macOS

關閉目前開啟的 Quick Look 面板。

win.setBounds(bounds[, animate])

  • bounds Partial<Rectangle>
  • animate 布林值 (可選) macOS

調整視窗大小並將其移動到提供的邊界。任何未提供的屬性都將預設為其目前值。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

// set all bounds properties
win.setBounds({ x: 440, y: 225, width: 800, height: 600 })

// set a single bounds property
win.setBounds({ width: 100 })

// { x: 440, y: 225, width: 100, height: 600 }
console.log(win.getBounds())

注意: 在 macOS 上,y 座標值不能小於 Tray 高度。Tray 高度隨時間而變化,並且取決於作業系統,但在 20-40 像素之間。傳遞小於 Tray 高度的值將導致視窗與 Tray 平齊。

win.getBounds()

回傳 Rectangle - 視窗的 bounds 作為 Object

注意: 在 macOS 上,回傳的 y 座標值將至少為 Tray 高度。例如,使用 Tray 高度為 38 呼叫 win.setBounds({ x: 25, y: 20, width: 800, height: 600 }) 表示 win.getBounds() 將回傳 { x: 25, y: 38, width: 800, height: 600 }

win.getBackgroundColor()

回傳 字串 - 以十六進位 (#RRGGBB) 格式取得視窗的背景顏色。

請參閱 設定 backgroundColor

注意: alpha 值 *不會* 與紅色、綠色和藍色值一起回傳。

win.setContentBounds(bounds[, animate])

  • bounds Rectangle
  • animate 布林值 (可選) macOS

調整視窗用戶端區域(例如網頁)的大小並將其移動到提供的邊界。

win.getContentBounds()

回傳 Rectangle - 視窗用戶端區域的 bounds 作為 Object

win.getNormalBounds()

回傳 Rectangle - 包含正常狀態的視窗邊界

注意: 無論視窗的目前狀態為何:最大化、最小化或全螢幕,此函數始終回傳正常狀態下視窗的位置和大小。在正常狀態下,getBounds 和 getNormalBounds 回傳相同的 Rectangle

win.setEnabled(enable)

  • enable 布林值

停用或啟用視窗。

win.isEnabled()

回傳 布林值 - 視窗是否已啟用。

win.setSize(width, height[, animate])

  • width 整數
  • height 整數
  • animate 布林值 (可選) macOS

將視窗大小調整為 widthheight。如果 widthheight 低於任何設定的最小尺寸約束,視窗將貼齊其最小尺寸。

win.getSize()

回傳 整數[] - 包含視窗的寬度和高度。

win.setContentSize(width, height[, animate])

  • width 整數
  • height 整數
  • animate 布林值 (可選) macOS

將視窗的用戶端區域(例如網頁)大小調整為 widthheight

win.getContentSize()

回傳 整數[] - 包含視窗用戶端區域的寬度和高度。

win.setMinimumSize(width, height)

  • width 整數
  • height 整數

設定視窗的最小尺寸為 widthheight

win.getMinimumSize()

回傳 整數[] - 包含視窗的最小寬度和高度。

win.setMaximumSize(width, height)

  • width 整數
  • height 整數

設定視窗的最大尺寸為 widthheight

win.getMaximumSize()

回傳 整數[] - 包含視窗的最大寬度和高度。

win.setResizable(resizable)

  • resizable boolean

設定視窗是否可讓使用者手動調整大小。

win.isResizable()

回傳 boolean - 視窗是否可讓使用者手動調整大小。

win.setMovable(movable) macOS Windows

  • movable boolean

設定視窗是否可讓使用者移動。在 Linux 上不會執行任何動作。

win.isMovable() macOS Windows

回傳 boolean - 視窗是否可讓使用者移動。

在 Linux 上永遠回傳 true

win.setMinimizable(minimizable) macOS Windows

  • minimizable boolean

設定視窗是否可讓使用者手動最小化。在 Linux 上不會執行任何動作。

win.isMinimizable() macOS Windows

回傳 boolean - 視窗是否可讓使用者手動最小化。

在 Linux 上永遠回傳 true

win.setMaximizable(maximizable) macOS Windows

  • maximizable boolean

設定視窗是否可讓使用者手動最大化。在 Linux 上不會執行任何動作。

win.isMaximizable() macOS Windows

回傳 boolean - 視窗是否可讓使用者手動最大化。

在 Linux 上永遠回傳 true

win.setFullScreenable(fullscreenable)

  • fullscreenable boolean

設定最大化/縮放視窗按鈕是否切換為全螢幕模式或最大化視窗。

win.isFullScreenable()

回傳 boolean - 最大化/縮放視窗按鈕是否切換為全螢幕模式或最大化視窗。

win.setClosable(closable) macOS Windows

  • closable boolean

設定視窗是否可讓使用者手動關閉。在 Linux 上不會執行任何動作。

win.isClosable() macOS Windows

回傳 boolean - 視窗是否可讓使用者手動關閉。

在 Linux 上永遠回傳 true

win.setHiddenInMissionControl(hidden) macOS

  • hidden boolean

設定當使用者切換到「調度中心」時,視窗是否會被隱藏。

win.isHiddenInMissionControl() macOS

回傳 boolean - 當使用者切換到「調度中心」時,視窗是否會被隱藏。

win.setAlwaysOnTop(flag[, level][, relativeLevel])

  • flag 布林值
  • level string (選用) macOS Windows - 值包含 normalfloatingtorn-off-menumodal-panelmain-menustatuspop-up-menuscreen-saverdock (已棄用)。當 flag 為 true 時,預設值為 floating。當 flag 為 false 時,level 會重設為 normal。請注意,從 floatingstatus (包含),視窗會放置在 macOS 上的 Dock 下方以及 Windows 上的工作列下方。從 pop-up-menu 到更高的層級,它會顯示在 macOS 上的 Dock 上方以及 Windows 上的工作列上方。請參閱 macOS 文件 以取得更多詳細資訊。
  • relativeLevel Integer (選用) macOS - 相對於給定的 level,此視窗要設定高出多少層。預設值為 0。請注意,Apple 不建議將層級設定高於 screen-saver 之上 1 層。

設定視窗是否應始終顯示在其他視窗之上。設定此選項後,視窗仍然是普通視窗,而不是無法聚焦的工具箱視窗。

win.isAlwaysOnTop()

回傳 boolean - 視窗是否始終在其他視窗之上。

win.moveAbove(mediaSourceId)

  • mediaSourceId string - 視窗 ID 格式為 DesktopCapturerSource 的 ID。例如 "window:1869:0"。

在 Z 軸順序上,將視窗移動到來源視窗上方。如果 mediaSourceId 不是視窗類型,或者視窗不存在,則此方法會擲回錯誤。

win.moveTop()

將視窗移動到最頂層 (Z 軸順序),無論焦點為何。

win.center()

將視窗移動到螢幕中心。

win.setPosition(x, y[, animate])

  • x Integer
  • y Integer
  • animate 布林值 (可選) macOS

將視窗移動到 xy

win.getPosition()

回傳 Integer[] - 包含視窗目前的座標。

win.setTitle(title)

  • title 字串

將原生視窗的標題變更為 title

win.getTitle()

回傳 string - 原生視窗的標題。

注意: 網頁的標題可能與原生視窗的標題不同。

win.setSheetOffset(offsetY[, offsetX]) macOS

  • offsetY Float
  • offsetX Float (選用)

變更 macOS 上工作表的附加點。預設情況下,工作表會附加在視窗框架的正下方,但您可能會想要將它們顯示在 HTML 呈現的工具列下方。例如

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

const toolbarRect = document.getElementById('toolbar').getBoundingClientRect()
win.setSheetOffset(toolbarRect.height)

win.flashFrame(flag)

歷史記錄
  • flag 布林值

開始或停止閃爍視窗以吸引使用者注意。

win.setSkipTaskbar(skip) macOS Windows

  • skip boolean

使視窗不顯示在工作列中。

win.setKiosk(flag)

  • flag 布林值

進入或離開 Kiosk 模式。

win.isKiosk()

回傳 boolean - 視窗是否處於 Kiosk 模式。

win.isTabletMode() Windows

回傳 boolean - 視窗是否處於 Windows 10 平板電腦模式。

由於 Windows 10 使用者可以將其 PC 當作平板電腦使用,在此模式下,應用程式可以選擇最佳化其平板電腦的 UI,例如放大標題列和隱藏標題列按鈕。

此 API 會回傳視窗是否處於平板電腦模式,並且 resize 事件可用於監聽平板電腦模式的變更。

win.getMediaSourceId()

回傳 string - 視窗 ID 格式為 DesktopCapturerSource 的 ID。例如 "window:1324:0"。

更精確的格式為 window:id:other_id,其中 id 在 Windows 上是 HWND,在 macOS 上是 CGWindowID (uint64_t),在 Linux 上是 Window (unsigned long)。other_id 用於識別 Web 內容 (分頁),因此在同一個最上層視窗中。

win.getNativeWindowHandle()

回傳 Buffer - 視窗的平台特定控制代碼。

控制代碼的原生類型在 Windows 上是 HWND,在 macOS 上是 NSView*,在 Linux 上是 Window (unsigned long)。

win.hookWindowMessage(message, callback) Windows

  • message Integer
  • callback Function
    • wParam Buffer - 提供給 WndProc 的 wParam
    • lParam Buffer - 提供給 WndProc 的 lParam

掛鉤視窗訊息。當訊息在 WndProc 中收到時,會呼叫 callback

win.isWindowMessageHooked(message) Windows

  • message Integer

回傳 boolean - truefalse,取決於訊息是否被掛鉤。

win.unhookWindowMessage(message) Windows

  • message Integer

取消掛鉤視窗訊息。

win.unhookAllWindowMessages() Windows

取消掛鉤所有視窗訊息。

win.setRepresentedFilename(filename) macOS

  • filename string

設定視窗代表的檔案路徑名稱,檔案的圖示將顯示在視窗的標題列中。

win.getRepresentedFilename() macOS

回傳 string - 視窗代表的檔案路徑名稱。

win.setDocumentEdited(edited) macOS

  • edited boolean

指定視窗的文件是否已被編輯,當設定為 true 時,標題列中的圖示將變為灰色。

win.isDocumentEdited() macOS

回傳 boolean - 視窗的文件是否已被編輯。

win.focusOnWebView()

win.blurWebView()

win.capturePage([rect, opts])

  • rect Rectangle (選用) - 要擷取的邊界
  • opts Object (選用)
    • stayHidden boolean (選用) - 保持頁面隱藏而不是可見。預設值為 false
    • stayAwake boolean (選用) - 保持系統喚醒,而不是允許其進入睡眠狀態。預設值為 false

回傳 Promise<NativeImage> - 使用 NativeImage 解析

擷取 rect 內頁面的快照。省略 rect 將擷取整個可見頁面。如果頁面不可見,則 rect 可能為空。當頁面的瀏覽器視窗隱藏且擷取器計數不為零時,頁面會被視為可見。如果您希望頁面保持隱藏,則應確保將 stayHidden 設定為 true。

win.loadURL(url[, options])

  • url string
  • options Object (選用)
    • httpReferrer (string | Referrer) (選用) - HTTP 參照網址。
    • userAgent string (選用) - 發起請求的使用者代理程式。
    • extraHeaders string (選用) - 以 "\n" 分隔的額外標頭
    • postData (UploadRawData | UploadFile)[] (選用)
    • baseURLForDataURL string (選用) - 要由資料網址載入的檔案的基礎網址 (帶有尾隨路徑分隔符號)。只有當指定的 url 是資料網址且需要載入其他檔案時,才需要此參數。

回傳 Promise<void> - 當頁面完成載入時,promise 將會解析 (請參閱 did-finish-load),如果頁面載入失敗,則會拒絕 (請參閱 did-fail-load)。

webContents.loadURL(url[, options]) 相同。

url 可以是遠端位址 (例如 http://) 或使用 file:// 協定的本機 HTML 檔案路徑。

為了確保檔案網址的格式正確,建議使用 Node 的 url.format 方法

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

const url = require('url').format({
protocol: 'file',
slashes: true,
pathname: require('node:path').join(__dirname, 'index.html')
})

win.loadURL(url)

您可以使用 POST 請求和 URL 編碼的資料來載入 URL,方法如下

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

win.loadURL('http://localhost:8000/post', {
postData: [{
type: 'rawData',
bytes: Buffer.from('hello=world')
}],
extraHeaders: 'Content-Type: application/x-www-form-urlencoded'
})

win.loadFile(filePath[, options])

  • filePath string
  • options Object (選用)
    • query Record<string, string> (選用) - 傳遞至 url.format()
    • search string (選用) - 傳遞至 url.format()
    • hash string (選用) - 傳遞至 url.format()

回傳 Promise<void> - 當頁面完成載入時,promise 將會解析 (請參閱 did-finish-load),如果頁面載入失敗,則會拒絕 (請參閱 did-fail-load)。

webContents.loadFile 相同,filePath 應該是相對於應用程式根目錄的 HTML 檔案路徑。請參閱 webContents 文件以取得更多資訊。

win.reload()

webContents.reload 相同。

win.setMenu(menu) Linux Windows

  • menu Menu | null

menu 設定為視窗的選單列。

win.removeMenu() Linux Windows

移除視窗的選單列。

win.setProgressBar(progress[, options])

  • progress Double
  • options Object (選用)
    • mode string Windows - 进度条的模式。可以是 nonenormalindeterminateerrorpaused

設定進度列中的進度值。有效範圍為 [0, 1.0]。

當進度 < 0 時移除進度列;當進度 > 1 時變更為不確定模式。

在 Linux 平台上,僅支援 Unity 桌面環境,您需要在 package.jsondesktopName 欄位中指定 *.desktop 檔案名稱。預設情況下,它會假設為 {app.name}.desktop

在 Windows 上,可以傳遞模式。接受的值為 nonenormalindeterminateerrorpaused。如果您在未設定模式的情況下呼叫 setProgressBar (但值在有效範圍內),則會假設為 normal

win.setOverlayIcon(overlay, description) Windows

  • overlay NativeImage | null - 要顯示在工作列圖示右下角的圖示。如果此參數為 null,則會清除覆蓋圖示
  • description string - 將提供給輔助功能螢幕閱讀器的描述

在目前的工作列圖示上設定 16 x 16 像素的覆蓋圖示,通常用於傳達某種應用程式狀態或被動地通知使用者。

win.invalidateShadow() macOS

使視窗陰影失效,以便根據目前的視窗形狀重新計算。

透明的 BrowserWindows 有時會在 macOS 上留下視覺瑕疵。例如,在執行動畫時,可以使用此方法來清除這些瑕疵。

win.setHasShadow(hasShadow)

  • hasShadow boolean

設定視窗是否應具有陰影。

win.hasShadow()

回傳 boolean - 視窗是否具有陰影。

win.setOpacity(opacity) Windows macOS

  • opacity number - 介於 0.0 (完全透明) 和 1.0 (完全不透明) 之間

設定視窗的不透明度。在 Linux 上,不會執行任何動作。超出範圍的數字值會箝制在 [0, 1] 範圍內。

win.getOpacity()

回傳 number - 介於 0.0 (完全透明) 和 1.0 (完全不透明) 之間。在 Linux 上,永遠回傳 1。

win.setShape(rects) Windows Linux Experimental

  • rects Rectangle[] - 在視窗上設定形狀。傳遞空列表會將視窗還原為矩形。

設定視窗形狀會決定系統允許在視窗內繪圖和使用者互動的區域。在給定區域之外,不會繪製任何像素,也不會註冊任何滑鼠事件。區域外的滑鼠事件不會被該視窗接收,而是會穿透到視窗後面的任何內容。

win.setThumbarButtons(buttons) Windows

回傳 boolean - 按鈕是否已成功新增

將具有指定按鈕集成的縮圖工具列新增到工作列按鈕版面配置中視窗的縮圖影像。回傳一個 boolean 物件,指示是否已成功新增縮圖。

由於空間有限,縮圖工具列中的按鈕數量不應超過 7 個。設定縮圖工具列後,由於平台的限制,工具列無法移除。但是您可以呼叫具有空陣列的 API 來清除按鈕。

buttonsButton 物件的陣列

  • Button 物件
    • icon NativeImage - 縮圖工具列中顯示的圖示。
    • click Function
    • tooltip string (選用) - 按鈕工具提示的文字。
    • flags string[] (選用) - 控制按鈕的特定狀態和行為。預設情況下,它是 ['enabled']

flags 是一個陣列,可以包含以下 string

  • enabled - 按鈕處於活動狀態,使用者可以使用。
  • disabled - 按鈕已停用。它存在,但具有視覺狀態,表示它不會回應使用者動作。
  • dismissonclick - 當按鈕被點擊時,縮圖視窗會立即關閉。
  • nobackground - 不繪製按鈕邊框,僅使用影像。
  • hidden - 按鈕未向使用者顯示。
  • noninteractive - 按鈕已啟用但不具互動性;不會繪製按下按鈕的狀態。此值適用於按鈕用於通知的情況。

win.setThumbnailClip(region) Windows

設定當滑鼠懸停在工作列中的視窗上時,要顯示為縮圖影像的視窗區域。您可以指定空區域來將縮圖重設為整個視窗:{ x: 0, y: 0, width: 0, height: 0 }

win.setThumbnailToolTip(toolTip) Windows

  • toolTip string

設定當滑鼠懸停在工作列中的視窗縮圖上時顯示的工具提示。

win.setAppDetails(options) Windows

  • options Object
    • appId string (選用) - 視窗的 應用程式使用者模型 ID。必須設定此項,否則其他選項將不會生效。
    • appIconPath string (選用) - 視窗的 重新啟動圖示
    • appIconIndex Integer (選用) - appIconPath 中圖示的索引。當未設定 appIconPath 時會忽略。預設值為 0
    • relaunchCommand string (選用) - 視窗的 重新啟動命令
    • relaunchDisplayName string (選用) - 視窗的 重新啟動顯示名稱

設定視窗工作列按鈕的屬性。

注意: relaunchCommandrelaunchDisplayName 必須始終一起設定。如果未設定其中一個屬性,則兩者都不會使用。

win.showDefinitionForSelection() macOS

webContents.showDefinitionForSelection() 相同。

win.setIcon(icon) Windows Linux

變更視窗圖示。

win.setWindowButtonVisibility(visible) macOS

  • visible boolean

設定視窗交通號誌按鈕是否應可見。

win.setAutoHideMenuBar(hide) Windows Linux

  • hide boolean

設定視窗選單列是否應自動隱藏。設定後,選單列只會在使用者按下單個 Alt 鍵時顯示。

如果選單列已可見,則呼叫 setAutoHideMenuBar(true) 不會立即隱藏它。

win.isMenuBarAutoHide() Windows Linux

回傳 boolean - 選單列是否自動隱藏。

win.setMenuBarVisibility(visible) Windows Linux

  • visible boolean

設定選單列是否應可見。如果選單列是自動隱藏的,使用者仍然可以透過按下單個 Alt 鍵來顯示選單列。

win.isMenuBarVisible() Windows Linux

回傳 boolean - 選單列是否可見。

win.setVisibleOnAllWorkspaces(visible[, options]) macOS Linux

  • visible boolean
  • options Object (選用)
    • visibleOnFullScreen boolean (選用) macOS - 設定視窗是否應在全螢幕視窗上方可見。
    • skipTransformProcessType boolean (選用) macOS - 呼叫 setVisibleOnAllWorkspaces 預設會轉換 UIElementApplication 和 ForegroundApplication 之間的處理程序類型,以確保正確的行為。但是,每次呼叫時,這都會短暫隱藏視窗和 Dock。如果您的視窗已經是 UIElementApplication 類型,您可以透過將 true 傳遞給 skipTransformProcessType 來繞過此轉換。

設定視窗是否應在所有工作區中可見。

注意: 此 API 在 Windows 上不會執行任何動作。

win.isVisibleOnAllWorkspaces() macOS Linux

回傳 boolean - 視窗是否在所有工作區中可見。

注意: 此 API 在 Windows 上永遠回傳 false。

win.setIgnoreMouseEvents(ignore[, options])

  • ignore boolean
  • options Object (選用)
    • forward boolean (選用) macOS Windows - 如果為 true,則將滑鼠移動訊息轉發到 Chromium,從而啟用滑鼠相關事件,例如 mouseleave。僅在 ignore 為 true 時使用。如果 ignore 為 false,則始終停用轉發,無論此值為何。

使視窗忽略所有滑鼠事件。

在此視窗中發生的所有滑鼠事件都將傳遞到此視窗下方的視窗,但是如果此視窗具有焦點,它仍然會接收鍵盤事件。

win.setContentProtection(enable) macOS Windows

  • enable 布林值

防止其他應用程式擷取視窗內容。

在 macOS 上,它將 NSWindow 的 sharingType 設定為 NSWindowSharingNone。在 Windows 上,它使用 WDA_EXCLUDEFROMCAPTURE 呼叫 SetWindowDisplayAffinity。對於 Windows 10 2004 版及更高版本,視窗將完全從擷取中移除,較舊的 Windows 版本行為如同套用了 WDA_MONITOR,擷取黑色視窗。

win.setFocusable(focusable) macOS Windows

  • focusable boolean

變更視窗是否可以被聚焦。

在 macOS 上,它不會從視窗中移除焦點。

win.isFocusable() macOS Windows

回傳 boolean - 視窗是否可以被聚焦。

win.setParentWindow(parent)

  • parent BrowserWindow | null

parent 設定為目前視窗的父視窗,傳遞 null 會將目前視窗變成最上層視窗。

win.getParentWindow()

回傳 BrowserWindow | null - 父視窗,如果沒有父視窗則為 null

win.getChildWindows()

傳回 BrowserWindow[] - 所有子視窗。

win.setAutoHideCursor(autoHide) macOS

  • autoHide 布林值

控制當輸入時是否隱藏游標。

win.selectPreviousTab() macOS

當啟用原生分頁且視窗中還有其他分頁時,選取上一個分頁。

win.selectNextTab() macOS

當啟用原生分頁且視窗中還有其他分頁時,選取下一個分頁。

win.showAllTabs() macOS

當啟用原生分頁時,顯示或隱藏分頁概覽。

win.mergeAllWindows() macOS

當啟用原生分頁且有多個開啟的視窗時,將所有視窗合併為一個具有多個分頁的視窗。

win.moveTabToNewWindow() macOS

如果啟用原生分頁且目前視窗中有多個分頁,則將目前分頁移動到新視窗。

win.toggleTabBar() macOS

如果啟用原生分頁且目前視窗中只有一個分頁,則切換分頁列的顯示狀態。

win.addTabbedWindow(browserWindow) macOS

  • browserWindow BrowserWindow

在此視窗上新增一個視窗作為分頁,在視窗實例的分頁之後。

win.setVibrancy(type[, options]) macOS

  • type 字串 | null - 可以是 titlebarselectionmenupopoversidebarheadersheetwindowhudfullscreen-uitooltipcontentunder-windowunder-page。 有關詳細資訊,請參閱 macOS 文件
  • options Object (選用)
    • animationDuration 數字 (選填) - 如果大於零,則鮮豔度變更將在給定的持續時間(以毫秒為單位)內動畫呈現。

為瀏覽器視窗新增鮮豔效果。傳遞 null 或空字串將移除視窗上的鮮豔效果。 animationDuration 參數僅對鮮豔效果的淡入或淡出進行動畫處理。 不支援在不同類型的鮮豔度之間進行動畫處理。

win.setBackgroundMaterial(material) Windows

  • material 字串
    • auto - 讓桌面視窗管理員 (DWM) 自動決定此視窗的系統繪製背景素材。這是預設值。
    • none - 不繪製任何系統背景。
    • mica - 繪製對應於長期存在的視窗的背景素材效果。
    • acrylic - 繪製對應於暫時性視窗的背景素材效果。
    • tabbed - 繪製對應於具有分頁標題列的視窗的背景素材效果。

此方法設定瀏覽器視窗的系統繪製背景素材,包括非用戶端區域的後面。

有關詳細資訊,請參閱 Windows 文件

注意: 此方法僅在 Windows 11 22H2 及更高版本上受支援。

win.setWindowButtonPosition(position) macOS

為無邊框視窗中的交通號誌按鈕設定自訂位置。 傳遞 null 將重置位置為預設值。

win.getWindowButtonPosition() macOS

傳回 Point | null - 無邊框視窗中交通號誌按鈕的自訂位置,當沒有自訂位置時,將傳回 null

win.setTouchBar(touchBar) macOS

  • touchBar TouchBar | null

為目前視窗設定 TouchBar 佈局。 指定 nullundefined 會清除 Touch Bar。 此方法僅在機器具有 Touch Bar 時有效。

注意: TouchBar API 目前為實驗性功能,可能會在未來的 Electron 版本中變更或移除。

win.setBrowserView(browserView) 實驗性 已棄用

  • browserView BrowserView | null - 將 browserView 附加到 win。 如果有其他附加的 BrowserView,它們將會從此視窗中移除。

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

win.getBrowserView() 實驗性 已棄用

傳回 BrowserView | null - 附加到 winBrowserView。 如果沒有附加,則傳回 null。 如果附加了多個 BrowserView,則會拋出錯誤。

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

win.addBrowserView(browserView) 實驗性 已棄用

用於支援使用多個瀏覽器視圖的 setBrowserView 替代 API。

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

win.removeBrowserView(browserView) 實驗性 已棄用

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

win.setTopBrowserView(browserView) 實驗性 已棄用

browserView 提升到附加到 win 的其他 BrowserView 之上。 如果 browserView 未附加到 win,則會拋出錯誤。

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

win.getBrowserViews() 實驗性 已棄用

傳回 BrowserView[] - 依 z 索引排序的所有 BrowserView 陣列,這些 BrowserView 已使用 addBrowserViewsetBrowserView 附加。 最頂層的 BrowserView 是陣列的最後一個元素。

注意 BrowserView 類別已棄用,並被新的 WebContentsView 類別取代。

win.setTitleBarOverlay(options) Windows Linux

  • options Object
    • color 字串 (選填) - 啟用時,視窗控制項覆疊的 CSS 顏色。
    • symbolColor 字串 (選填) - 啟用時,視窗控制項覆疊上符號的 CSS 顏色。
    • height 整數 (選填) - 標題列和視窗控制項覆疊的高度,以像素為單位。

在已啟用視窗控制項覆疊的視窗上,此方法會更新標題列覆疊的樣式。

在 Linux 上,如果未明確設定 symbolColor,則會自動計算 symbolColor 以使其與 color 具有最小的可訪問對比度。