原文:https://github.com/electron/electron/blob/master/docs/api/browser-window.md
譯者:Lin
創建并且控制瀏覽器窗口。
進程:主進程
// In the main process.
const {BrowserWindow} = require('electron')
// Or use `remote` from the renderer process.
// const {BrowserWindow} = require('electron').remote
let win = new BrowserWindow({width: 800, height: 600})
win.on('closed', () => {
win = null
})
// Load a remote URL
win.loadURL('https://github.com')
// Or load a local HTML file
win.loadURL(`file://${__dirname}/app/index.html`)
<h2 id="frameless-window">無框架窗口</h2>
創建一個沒有chrome的窗口,或者一個任意形狀的透明窗口,你可以使用Frameless Window接口。
<h2 id="showing-window-gracefully">優雅的展示窗口</h2>
當直接在窗口中加載一個頁面,用戶可能看到頁面逐漸加載的過程,這對于原生應用來說不是一個很好的體驗。為了使窗口沒有視覺上的閃爍,針對不同的情況這里又兩種解決方案。
<h3 id="using-ready-to-show-event">使用<code>ready-to-show</code>事件</h3>
頁面加載的時候,渲染進程已經開始首次繪制時ready-to-show
事件將會被分發,在這個事件之后展示窗口將不會出現視覺上的閃爍:
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
win.show()
})
這個事件通常在did-finish-load
事件之后被分發,但是包含了很多遠程資源的頁面可能會在did-finish-load
事件之前被分發。
<h3 id="setting-backgroundColor">設置<code>backgroundColor`</code></h3>
在一個復雜的應用中,ready-to-show
事件可能很晚才會被分發,這會使得應用感覺很慢。這種情況下,建議立刻展示窗口,使用一個backgroundColor
覆蓋住你應用的背景:
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({backgroundColor: '#2e2c29'})
win.loadURL('https://github.com')
值得注意的是,即使應用使用了ready-to-show
事件,也依然建議設置backgroundColor
來使得應用更像原生應用。
<h2 id="parent-and-child-windows">父窗口和子窗口</h2>
通過使用parent
選項,你可以創建一個子窗口:
const {BrowserWindow} = require('electron')
let top = new BrowserWindow()
let child = new BrowserWindow({parent: top})
child.show()
top.show()
這個child
窗口將總展示在top
窗口的上面。
<h3 id="modal-windows">模態窗口</h3>
一個模態窗口是一個禁用父窗口的子窗口,創建一個模態窗口,你需要設置parent
和modal
選項:
const {BrowserWindow} = require('electron')
let child = new BrowserWindow({parent: top, modal: true, show: false})
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})
<h3 id="platform-notices">平臺的注意事項</h3>
- MacOS中,模態窗口將被作為附加頁展示在父窗口中。
- MacOS中,當父窗口移動時子窗口將與父窗口保持相對的位置,而在Windows和Linux中子窗口將不會移動。
- Windows中, 不支持動態的改變父窗口。
- Linux中,模態窗口的類型將會變為對話框。
- Linux中,多數桌面環境不支持隱藏一個模態窗口。
<h2 id="class-browserWindow">類:BrowserWindow</h2>
創建并且控制瀏覽器窗口。
進程:主進程
BrowserWindow
是一個EventEmitter。
它使用options
設置的本地屬性的創建一個新的BrowserWindow
。
<h3 id="new-browserWindow"><code>new BrowserWindow([options])</code></h3>
-
options
Object類型(可選參數)-
width
Integer類型(可選參數)- 以像素為單位的窗口的寬度。默認是800
。 -
height
Integer類型(可選參數)- 以像素為單位的窗口的高度。默認是600
。 -
x
Integer類型(可選參數)(如果使用y
參數,則必須有該參數)- 窗口基于屏幕的左側偏移量。默認是窗口居中。 -
y
Integer類型(可選參數)(如果使用x
參數,則必須有該參數)- 窗口基于屏幕的頂部偏移量。默認是窗口居中。 -
useContentSize
Boolean類型(可選參數)-width
和height
是否直接作用于網頁的大小,如果true
則意味著真實的窗口大小將包含窗口邊框的大小并且比它略大。默認是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類型(可選參數)- 窗口是否需要全屏展示。MacOS中,當顯式的設置為false
,全屏按鈕將會被隱藏。默認為false
。 -
fullscreenable
Boolean類型(可選參數)- 窗口是否可以進入全屏模式。MacOS中,也代表著最大化/放大按鈕是否可以切換全屏或最大化。默認是true
。 -
skipTaskbar
Boolean類型(可選參數)- 是否在任務欄上顯示窗口。默認為false
。 -
kiosk
Boolean類型(可選參數)- kiosk模式(鎖定運行模式)。默認為false
。 -
title
String類型(可選參數)- 窗口的默認標題。默認為"Electron"
。 -
icon
(NativeImage | String)類型(可選參數)- 窗口的圖標。Windows中建議使用ICO
格式的圖標來獲得最好的視覺效果,你也可以不設置這樣executable的圖標就會默認的被設置。 -
show
Boolean類型(可選參數)- 是否在創建時顯示窗口。默認為true
。 -
frame
Boolean類型(可選參數)- 設置為false
來創建一個Frameless Window。默認為true
。 -
parent
BrowserWindow類型(可選參數)- 制定父窗口。默認為null
。 -
modal
Boolean類型(可選參數)- 是否是一個模態窗口。這個屬性只有在當前窗口是子窗口時工作。默認為false
。 -
acceptFirstMouse
Boolean類型(可選參數)- 網頁試圖是否接受一個單擊事件同時激活窗口。默認為false
。 -
disableAutoHideCursor
Boolean類型(可選參數)- 是否在輸入時隱藏光標。默認為false
。 -
autoHideMenuBar
Boolean類型(可選參數)- 除非按下Alt
鍵否則自動隱藏菜單欄。默認為false
。 -
enableLargerThanScreen
Boolean類型(可選參數)- 允許窗口縮放大于屏幕。默認為false
。 -
backgroundColor
String類型(可選參數)- 使用一個十六進制的值來設置窗口的背景顏色,例如#66CD00
或者#FFF
或者80FFFFFF
(支持透明度)。默認是#FFF
(白色)。 -
hasShadow
Boolean類型(可選參數)- 窗口是否需要有一個陰影。這個屬性僅在MacOS下有效。默認為true
。 -
darkTheme
Boolean類型(可選參數)- 窗口強制使用黑色主題,僅在一些GTK+3桌面環境中有效。默認為false
。 -
transparent
Boolean類型(可選參數)- 使窗口透明。默認為false
。 -
type
String類型(可選參數)- 窗口的類型,默認是一般窗口。在下面查看更多信息。 -
titleBarStyle
String類型(可選參數)- 窗口標題欄風格。默認是default
。可選的值有:-
default
- 結果是標準灰色不透明Mac標題欄。 -
hidden
- 結果是隱藏標題欄和一個全尺寸的內容窗口,但是標題欄在左上角仍有標準的窗口控制(“交通燈”)。 -
hidden-inset
- 結果是一個看起來非正規的隱藏的標題欄,交通燈按鈕稍微的更接近窗口邊緣。
-
-
thickFrame
Boolean類型(可選參數)- Windows中無邊框窗口使用WS_THICKFRAME
風格,將會添加一個標準的窗口邊框。設置false
將會移除窗口陰影和窗口動畫。默認為true
。 -
vibrancy
String類型(可選參數)- 為窗口添加一個震動效果,僅在MacOS中有效。可以是appearance-based
,light
,dark
,titlebar
,selection
,menu
,popover
,sidebar
,medium-light
或者ultra-dark
。 -
zoomToPageWidth
Boolean類型(可選參數)- MacOS中控制當單擊工具欄的綠色信號燈按鈕或點擊窗口放大菜單項時的行為。如果設置為true
,當縮放窗口時窗口將會逐漸擴大到首選寬度,如果設置為false
則會導致縮放到屏幕寬度。這個參數也將影響到直接調用maximize()
的結果。默認為false
。 -
webPreferences
Object類型(可選參數)- 設置網頁的特征。-
devTools
Boolean類型(可選參數)- 是否啟用開發工具。如果設置為false
,將不能使用BrowserWindow.webContents.openDevTools()
來打開開發工具。默認為true
。 -
nodeIntegration
Boolean類型(可選參數)- 是否啟用node完整性。默認為true
。 -
preload
String類型(可選參數)- 制定一個腳本在這個頁面中的其他腳本家在之前加載。這個腳本將有權使用node接口,無論nodeIntegration
是否開啟。這個屬性的值必須是腳本文件的絕對路徑。當nodeIntegration
設為false
時,這個預加載腳本可以從全局范圍內重新引用Node全局標識符。例子請看這里。 -
session
Session類型(可選參數)- 設置頁面使用的會話。Instead of passing the Session object directly,你也可以選擇使用partition
選項代替,which accepts a partition string. 當session
和partition
都被提供,session
將會被作為首選。默認是default session。 -
partition
String類型(可選參數)- Sets the session used by the page according to the session's partition string. If partition starts with persist:, the page will use a persistent session available to all pages in the app with the same partition. If there is no persist: prefix, the page will use an in-memory session. By assigning the same partition, multiple pages can share the same session. Default is the default session. -
zoomFactor
Number類型(可選參數)- 頁面的默認縮放因子,3.0
表示300%
,默認為1.0
。 -
javascript
Boolean類型(可選參數)- 能夠支持JavaScript。默認是true
。 -
webSecurity
Boolean類型(可選參數)- 當設置為false
,它將禁用同源策略(人們一般用來測試網站),并且如果這個選項沒有被設置那么將設置allowRunningInsecureContent
為true
。默認為true
。 -
allowRunningInsecureContent
Boolean類型(可選參數)- 允許一個https頁面運行JavaScript,CSS或者http URLs的插件。默認為false
。 -
images
Boolean類型(可選參數)- 啟用圖片支持。默認為true
。 -
textAreasAreResizable
Boolean類型(可選參數)- 使TextArea元素可以調整大小。默認為true
。 -
webgl
Boolean類型(可選參數)- 開啟WebGL支持。默認為true
。 -
webaudio
Boolean類型(可選參數)- 開啟WebAudio支持。默認為true
。 -
plugins
Boolean類型(可選參數)- 插件是否被允許開啟。默認為false
。 -
experimentalFeatures
Boolean類型(可選參數)- 開啟Chromium的試驗功能。默認為false
。 -
experimentalCanvasFeatures
Boolean類型(可選參數)- 開啟Chromium的canvas試驗功能。默認為false
。 -
scrollBounce
Boolean類型(可選參數)- MacOS下開啟彈性滾動(橡膠帶)。默認為false
。 -
blinkFeatures
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
。
-
-
defaultFontSize
Integer類型(可選參數)- 字體大小,默認是16
。 -
defaultMonospaceFontSize
Integer類型(可選參數)- 默認等寬字體大小,默認是13
。 -
minimumFontSize
Integer類型(可選參數)- 最小字體大小,默認是0
。 -
defaultEncoding
String類型(可選參數)- 默認編碼,默認是ISO-8859-1
。 -
backgroundThrottling
Boolean類型(可選參數)- 當頁面變成背景時是否停止動畫和計時器。默認是true
。 -
offscreen
Boolean類型(可選參數)- 是否啟用瀏覽器窗口在屏幕外渲染。查看離屏渲染教程來獲得詳細信息。 -
sandbox
Boolean類型(可選參數)- 是否開啟Chromium系統級別的沙盒。 -
contextIsolation
Boolean類型(可選參數)- 是否在一個隔離的Javascript環境中運行Ellectron接口和指定的預加載腳本。默認是false
。Defaults to false. The context that the preload script runs in will still have full access to the document and window globals but it will use its own set of JavaScript builtins (Array, Object, JSON, etc.) and will be isolated from any changes made to the global environment by the loaded page. Electron接口將會僅在preload
腳本中有效而不在已經加載的頁面中有效。This option should be used when loading potentially untrusted remote content to ensure the loaded content cannot tamper with the preload script and any Electron APIs being used. 這個選項使用和Chrome Content Scripts使用的相同的技術。你可以在開發工具中通過在控制臺選項卡的頂部的組合框中選中'Electron Isolated Context'入口里獲取context。注意:這個選項僅是當前的實驗項,可能會在未來的Electron版本中改變或被移除。
-
-
使用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
。
<h3 id="instance-events">對象的事件</h3>
使用new BrowserWindow
創建的對象會分發以下事件:
注意:一些事件只在特定的操作系統中有效,已經被標記出來。
<h4 id="event-page-title-updated">事件:‘page-title-updated’</h4>
返回值為:
-
event
Event類型 -
title
String類型
當文檔改變它自己的標題時被分發,調用event.preventDefault()
將阻止本地窗口的標題改變。
<h4 id="event-close">事件:‘close’</h4>
返回值為:
-
event
Event類型
當窗口將要被關閉時被分發。它會在DOM的beforeunload
和unload
事件之前被分發。調用event.preventDefault()會取消關閉。
通常你需要使用beforeunload
來處理是否關閉窗口的決定,當窗口重新加載的時候也會被調用。Electron中,返回除了undefined
之外的任何值都將會取消關閉。例如:
window.onbeforeunload = (e) => {
console.log('我不想要被關閉')
// 不同于其他瀏覽器提供給用戶一個消息盒子,返回一個非空值將會默默的取消關閉。
// 建議使用dialog接口來讓用戶確認關閉應用。
e.returnValue = false
}
<h4 id="event-closed">事件:‘closed’</h4>
當窗口被關閉的時候被分發。你收到這個事件之后你需要移除關于這個窗口的引用,并且避免再次使用它。
<h4 id="event-unresponsive">事件:‘unresponsive’</h4>
當網頁變成無應答狀態時被分發。
<h4 id="event-responsive">事件:‘responsive’</h4>
當無應答的網頁再次有反應時被分發。
<h4 id="event-blur">事件:‘blur’</h4>
當焦點不在窗口上時被分發。
<h4 id="event-focus">事件:‘focus’</h4>
當窗口獲得焦點的時候被分發。
<h4 id="event-show">事件:‘show’</h4>
當窗口被展示的時候被分發。
<h4 id="event-hide">事件:‘hide’</h4>
當窗口被隱藏的時候被分發。
<h4 id="event-ready-to-show">事件:‘ready-to-show’</h4>
當網頁已經被渲染完成,可以在沒有視覺上的閃爍的情況下被展示的時候被分發。
<h4 id="event-maximize">事件:‘maximize’</h4>
窗口最大化的時候被分發。
<h4 id="event-unmaximize">事件:‘unmaximize’</h4>
窗口退出最大化狀態時被分發。
<h4 id="event-minimize">事件:‘minimize’</h4>
窗口最小化的時候被分發。
<h4 id="event-restore">事件:‘restore’</h4>
當窗口從最小化狀態被恢復的時候被分發。
<h4 id="event-resize">事件:‘resize’</h4>
當窗口開始被調整大小的時候被分發。
<h4 id="event-move">事件:‘move’</h4>
窗口開始被移動到新的位置的時候被分發。
注意:MacOS中這個事件僅僅是moved
事件的一個別名。
<h4 id="event-moved">事件:‘moved’ <i>(MacOS)</i></h4>
當窗口已經被移動到新的位置的時候被分發一次。
<h4 id="event-enter-full-screen">事件:‘enter-full-screen’</h4>
當窗口進入全屏狀態的時候被分發。
<h4 id="event-leave-full-screen">事件:‘leave-full-screen’</h4>
當窗口從全屏狀態中推出的時候被分發。
<h4 id="event-enter-html-full-screen">事件:‘enter-html-full-screen’</h4>
當窗口因為HTML接口而進入全屏狀態的時候被分發。
<h4 id="event-leave-html-full-screen">事件:‘leave-html-full-screen’</h4>
當窗口因為HTML接口而從全屏狀態中退出的時候被分發。
<h4 id="event-app-command">事件:‘app-command’ <i>(Windows)</i></h4>
返回值為:
-
event
Event類型 -
command
String類型
當一個應用命令被調用的時候被分發。這些通常關系到鍵盤的媒體鍵或瀏覽器命令,以及Windows中一些鼠標上的“Back”按鈕。
命令是小寫字母組成的,下劃線用于替代連字符,并且被去掉APPCOMMAND_
前綴。例如APPCOMMAND_BROWSER_BACKWARD
被作為一個瀏覽器后退命令分發。
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.on('app-command', (e, cmd) => {
// 當用戶點鼠標上的后退按鈕時窗口會后退導航
if (cmd === 'browser-backward' && win.webContents.canGoBack()) {
win.webContents.goBack()
}
})
<h4 id="event-scroll-touch-begin">事件:‘scroll-touch-begin’ <i>(MacOS)</i></h4>
當滾輪事件開始時被分發。
<h4 id="event-scroll-touch-end">事件:‘scroll-touch-end’ <i>(MacOS)</i></h4>
當滾輪事件結束時被分發。
<h4 id="event-scroll-touch-edge">事件:‘scroll-touch-edge’ <i>(MacOS)</i></h4>
當滾輪事件到達元素邊緣的時候被分發。
<h4 id="event-swipe">事件:‘swipe’ <i>(MacOS)</i></h4>
返回值為:
-
event
Event類型 -
direction
String類型
當三個手指滑動時被分發。可能的方向有up
,right
,down
,left
。
<h3 id="static-methods">靜態方法</h3>
BrowserWindow
類有下面的這些靜態方法:
<h4 id="BrowserWindow-getAllWindows">BrowserWindow.getAllWindows()</h4>
返回值為BrowserWindow[]
類型 - 所有打開的瀏覽器窗口的數組。
<h4 id="BrowserWindow-getFocusedWindow">BrowserWindow.getFocusedWindow()</h4>
返回值為BrowserWindow
類型 - 應用中獲得焦點的窗口,如果沒有則返回null
。
<h4 id="BrowserWindow-fromWebContents">BrowserWindow.fromWebContents(webContents)</h4>
-
webContents
WebContents類型
返回值為BrowserWindow
- 通過給定的webContents
返回指定的窗口。
<h4 id="BrowserWindow-fromId">BrowserWindow.fromId(id)</h4>
-
id
Integer類型
返回值為BrowserWindow
類型 - 通過給定的id
返回指定的窗口。
<h4 id="BrowserWindow-addDevToolsExtension">BrowserWindow.addDevToolsExtension(path)</h4>
-
path
String類型
添加位于路徑中的開發工具擴展,并且返回擴展的名字。
擴展將會被記錄,所以你只需要調用這個接口一次就可以了。如果你嘗試添加一個已經被加載的擴展,這個方法將沒有任何返回,而是在控制臺中輸出一個警告。
如果這個擴展的證書丟失或者缺失,這個方法也不會返回任何值。
注意:這個接口不會在app
模塊中的ready
事件被分發之前被調用。
<h4 id="BrowserWindow-removeDevToolsExtension">BrowserWindow.removeDevToolsExtension(name)</h4>
-
name
String類型
通過名字移除一個開發工具擴展。
注意:這個接口不會在app
模塊中的ready
事件被分發之前被調用。
<h4 id="BrowserWindow-getDevToolsExtensions">BrowserWindow.getDevToolsExtensions()</h4>
返回值為Object
類型 - 鍵是擴展的名稱,對應的每一個值都是一個包含了name
和version
屬性的對象。
你可以運行下面的代碼來檢查開發工具擴展是否被安裝:
const {BrowserWindow} = require('electron')
let installed = BrowserWindow.getDevToolsExtensions().hasOwnProperty('devtron')
console.log(installed)
注意:這個接口不會在app
模塊中的ready
事件被分發之前被調用。
<h3 id="instance-properties">實例的屬性</h3>
通過new BrowserWindow
創建的對象具有下面的屬性:
const {BrowserWindow} = require('electron')
// 在這個例子中“win”是我們的實例
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('https://github.com')
<h4 id="win-webContents">win.webContents</h4>
窗口擁有的一個WebContents
對象。所有與網頁有關的事件和操作都會通過它來完成。
查看webContents
documentation來了解它的方法和事件。
<h4 id="win-id">win.id</h4>
一個Integer
類型的代表著窗口的唯一ID。
<h3 id="instance-methods">實例的方法</h3>
通過new BrowserWindow
創建的對象具有下面的方法:
注意:一些方法只在特定的操作系統中有效,已經被標記出來。
<h4 id="win-destroy">win.destroy()</h4>
強制關閉窗口,網頁的unload
和beforeunload
事件將不會被分發,窗口的close
事件也不會被分發,但是它保證closed
事件會被分發。
<h4 id="win-close">win.close()</h4>
嘗試關閉窗口。這個和用戶手動點擊窗口的關閉按鈕是一樣的效果。網頁可能會取消關閉。請查看close事件。
<h4 id="win-focus">win.focus()</h4>
窗口獲得焦點。
<h4 id="win-blur">win.blur()</h4>
窗口移除焦點。
<h4 id="win-isFocused">win.isFocused()</h4>
返回值為Boolean
類型 - 窗口是否獲得焦點。
<h4 id="win-isDestroyed">win.isDestroyed()</h4>
返回值為Boolean
類型 - 窗口是否被銷毀。
<h4 id="win-show">win.show()</h4>
展示窗口并且使窗口獲得焦點。
<h4 id="win-showInactive">win.showInactive()</h4>
展示窗口但不給窗口焦點。
<h4 id="win-hide">win.hide()</h4>
隱藏窗口。
<h4 id="win-isVisible">win.isVisible()</h4>
返回值為Boolean
類型 - 當前窗口對于用戶是否是可見的。
<h4 id="win-isModal">win.isModal()</h4>
返回值為Boolean
類型 - 當前窗口是否是一個模態窗口。
<h4 id="win-maximize">win.maximize()</h4>
最大化窗口。
<h4 id="win-unmaximize">win.unmaximize()</h4>
取消最大化窗口。
<h4 id="win-isMaximized">win.isMaximized()</h4>
返回值為Boolean
類型 - 窗口是否最大化。
<h4 id="win-minimize">win.minimize()</h4>
最小化窗口。在一些平臺上,最小化的窗口將會被展示在dock上。
<h4 id="win-restore">win.restore()</h4>
將最小化的窗口恢復到以前的狀態。
<h4 id="win-isMinimized">win.isMinimized()</h4>
返回值為Boolean
類型 - 窗口是否最小化。
<h4 id="win-setFullScreen">win.setFullScreen(flag)</h4>
-
flag
Boolean類型
設置窗口是否進入全屏模式。
<h4 id="win-isFullScreen">win.isFullScreen()</h4>
返回值為Boolean
類型 - 窗口是否在全屏模式下。
<h4 id="win-setAspectRatio">win.setAspectRatio (aspectRatio[, extraSize]) <i>(MacOS)</i></h4>
-
aspectRatio
Float類型 - 保持的部分內容視圖的縱橫比。 -
extraSize
Object類型(可選參數)- 不在保持的縱橫比內的額外的尺寸。-
width
Integer類型 -
height
Integer類型
-
這將使窗口保持一個縱橫比。使用像素設置的額外尺寸將允許一個開發者有不包含在縱橫比計算之內的空間。這個接口已經考慮到了不同窗口之間的大小和窗口的內容的大小。
考慮到一個HD視頻播放器和相關控件的一般窗口。可能在左邊框會有15像素的控件,有邊框有25像素控件,播放器下方還會有50像素的控件。為了在播放器內保持它自己的16:9
的縱橫比(1920x1080HD的標準縱橫比),我們需要調用這個方法,并傳入參數16/9
和[40,50]
。第二個參數不關心額外的寬度和高度在內容視圖的什么位置——只關心是否存在。只會在整個內容視圖中計算你要的額外的寬高就。
<h4 id="win-previewFile">win.win.previewFile(path[, displayName]) <i>(MacOS)</i></h4>
-
path
String類型 - 要使用QuickLook查看的文件的絕對路徑。對于Quick Look這是非常重要的,因為要使用路徑中的文件名和擴展名來決定打開文件內容的類型。 -
displayName
String類型(可選參數)- 在Quick Look模態視圖上展示的文件的名字。只是用來展示而不會決定文件的打開方式。默認是path
中的。
使用Quick Look 查看給定路徑的文件。
<h4 id="win-closeFilePreview">win.closeFilePreview() <i>(MacOS)</i></h4>
關閉當前打開的Quick Look面板
<h4 id="win-setBounds">win.setBounds(bounds[, animate])</h4>
-
bounds
Rectangle類型 -
animate
Boolean類型(可選參數)MacOS有效
調整大小和移動窗口的界限。
<h4 id="win-getBounds">win.getBounds()</h4>
返回值為Rectangle類型。
<h4 id="win-setContentBounds">win.setContentBounds(bounds[, animate])</h4>
-
bounds
Rectangle類型 -
animate
Boolean類型(可選參數)MacOS有效
調整大小和移動窗口的客戶端區域(例如網頁)的范圍。
<h4 id="win-getContentBounds">win.getContentBounds()</h4>
返回值為Rectangle類型。
<h4 id="win-setSize">win.setSize(width, height[, animate])</h4>
-
width
Integer類型 -
height
Integer類型 -
animate
Boolean類型(可選參數)MacOS有效
調整窗口大小的width
和height
。
<h4 id="win-getSize">win.getSize()</h4>
返回值為Integer[]
類型 - 包含窗口的寬度和高度。
<h4 id="win-setContentSize">win.setContentSize(width, height[, animate]</h4>
-
width
Integer類型 -
height
Integer類型 -
animate
Boolean類型(可選參數)MacOS有效
調整窗口客戶端區域大小的width
和height
。
<h4 id="win-getContentSize">win.getContentSize()</h4>
返回值為Integer[]
類型 - 包含窗口客戶端區域的寬度和高度。
<h4 id="win-setMinimumSize">win.setMinimumSize(width, height)</h4>
-
width
Integer類型 -
height
Integer類型
設置窗口的width
和height
的最小尺寸。
<h4 id="win-getMinimumSize">win.getMinimumSize()</h4>
返回值為Integer[]
類型 - 包含窗口的寬高的最小尺寸。
<h4 id="win-setMaximumSize">win.setMaximumSize(width, height)</h4>
-
width
Integer類型 -
height
Integer類型
設置窗口的width
和height
的最大尺寸。
<h4 id="win-getMaximumSize">win.getMaximumSize()</h4>
返回值為Integer[]
類型 - 包含窗口的寬高的最大尺寸。
<h4 id="win-setResizable">win.setResizable(resizable)</h4>
-
resizable
Boolean類型
設置窗口是否允許用戶手動調整大小。
<h4 id="win-isResizable">win.isResizable()</h4>
返回值為Boolean
類型 - 是否允許用戶手動調整窗口的大小。
<h4 id="win-setMovable">win.setMovable(movable) <i>(MacOS,Windows)</i></h4>
-
movable
Boolean類型
設置是否允許用戶移動窗口。Linux下是無效的。
<h4 id="win-isMovable">win.isMovable() <i>(MacOS,Windows)</i></h4>
返回值為Boolean
類型 - 是否允許用戶移動窗口。
Linux下是總會返回true
。
<h4 id="win-setMinimizable">win.setMinimizable(minimizable) <i>(MacOS,Windows)</i></h4>
-
minimizable
Boolean類型
設置是否允許用戶手動最小化窗口。Linux下是無效的。
<h4 id="win-isMinimizable">win.isMinimizable() <i>(MacOS,Windows)</i></h4>
返回值為Boolean
類型 - 是否允許用戶手動最小化窗口。
Linux下是總會返回true
。
<h4 id="win-setMaximizable">win.setMaximizable(maximizable) <i>(MacOS,Windows)</i></h4>
-
maximizable
Boolean類型
設置是否允許用戶手動最大化窗口。Linux下是無效的。
<h4 id="win-isMaximizable">win.isMaximizable() <i>(MacOS,Windows)</i></h4>
返回值為Boolean
類型 - 是否允許用戶手動最大化窗口。
Linux下是總會返回true
。
<h4 id="win-setFullScreenable">win.setFullScreenable(fullscreenable)</h4>
-
fullscreenable
Boolean類型
設置是否允許最大化/縮放窗口按鈕切換全屏模式或最大化窗口。
<h4 id="win-isFullScreenable">win.isFullScreenable()</h4>
返回值為Boolean類型 - 是否允許最大化/縮放窗口按鈕切換全屏模式或最大化窗口。
<h4 id="win-setClosable">win.setClosable(closable) <i>(MacOS,Windows)</i></h4>
-
closable
Boolean類型
設置是否允許用戶手動關閉窗口。Linux下是無效的。
<h4 id="win-isClosable">win.isClosable() <i>(MacOS,Windows)</i></h4>
返回值為Boolean
類型 - 是否允許用戶手動關閉窗口。
Linux下是總會返回true
。
<h4 id="win-setAlwaysOnTop">win.setAlwaysOnTop(flag[, level][, relativeLevel])</h4>
-
flag
Boolean類型 -
level
String類型(可選參數)MacOS有效 - 值包括了normal
,floating
,torn-off-menu
,modal-panel
,main-menu
,status
,pop-up-menu
,screen-saver
和(不推薦使用)。默認是dock
floating
。查看MacOS文檔獲取更詳細信息。 -
relativeLevel
Integer類型(可選參數)MacOS有效 - 通過傳入的level
設置這個窗口的更高層數。默認是0
。請注意,蘋果禁止設置的層級高于1在屏幕保護程序之上的。
設置窗口是否需要總是顯示在其他窗口的上面。設置之后,窗口仍然是一個正常的窗口,而不是一個不能被聚焦的工具窗口。
<h4 id="win-isAlwaysOnTop">win.isAlwaysOnTop()</h4>
返回值為Boolean
類型 - 窗口是否總是在其他窗口的上面。
<h4 id="win-center">win.center()</h4>
移動窗口到屏幕中間。
<h4 id="win-setPosition">win.setPosition(x, y[, animate])</h4>
-
x
Integer類型 -
y
Integer類型 -
animate
Boolean類型(可選參數)MacOS可用
移動窗口到x
和y
的位置。
<h4 id="win-getPosition">win.getPosition()</h4>
返回值為Integer[]
類型 - 包含窗口的當前位置。
<h4 id="win-setTitle">win.setTitle(title)</h4>
-
title
String類型
使用title
改變原生窗口的標題。
<h4 id="win-getTitle">win.getTitle()</h4>
返回值為String
類型 - 原生窗口的標題。
注意:網頁的標題可能和原生窗口的標題不同。
<h4 id="win-setSheetOffset">win.setSheetOffset(offsetY[, offsetX]) <i>(MacOS)</i></h4>
-
offsetY
Float類型 -
offsetX
Float類型(可選參數)
MacOS上改變表單的依附點。默認情況下,表單只依附在窗口邊框下,但是你可能想要在一個HTML渲染工具欄下展示它們。例如:
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
let toolbarRect = document.getElementById('toolbar').getBoundingClientRect()
win.setSheetOffset(toolbarRect.height)
<h4 id="win-flashFrame">win.flashFrame(flag)</h4>
-
flag
Boolean類型
開始或停止閃動窗口來吸引用戶注意力。
<h4 id="win-setSkipTaskbar">win.setSkipTaskbar(skip)</h4>
-
skip
Boolean類型
使窗口不在任務欄中顯示。
<h4 id="win-setKiosk">win.setKiosk(flag)</h4>
-
flag
Boolean類型
進入或者離開kiosk模式。
<h4 id="win-isKiosk">win.isKiosk()</h4>
返回值為Boolean
類型 - 窗口是否在kiosk模式下。
<h4 id="win-getNativeWindowHandle">win.getNativeWindowHandle()</h4>
返回值為Buffer
類型 - The platform-specific handle of the window.
原生操作類型在Windows下是HWND
,在MacOS下是NSView*
,在Linux下是Window
(unsigned long
)。
<h4 id="win-hookWindowMessage">win.hookWindowMessage(message, callback) <i>(Windows)</i></h4>
-
message
Integer類型 -
callback
Function類型
聯播一個窗口信息。當消息在WndProc被收到時會調用callback
。
<h4 id="win-isWindowMessageHooked">win.isWindowMessageHooked(message) <i>(Windows)</i></h4>
-
message
Integer類型
返回值為Boolean
類型 - true
還是false
取決于消息是否被聯播。
<h4 id="win-unhookWindowMessage">win.unhookWindowMessage(message) <i>(Windows)</i></h4>
-
message
Integer類型
取消聯播窗口的消息。
<h4 id="win-unhookAllWindowMessages">win.unhookAllWindowMessages() <i>(Windows)</i></h4>
取消聯播窗口的所有消息。
<h4 id="win-setRepresentedFilename">win.setRepresentedFilename(filename) <i>(macOS)</i></h4>
-
filename
String類型
設置代表窗口的文件的路徑名以及文件的圖標,文件將會被展示在窗口的標題欄。
<h4 id="win-getRepresentedFilename">win.getRepresentedFilename() <i>(macOS)</i></h4>
返回值為String
- 代表窗口的文件的路徑名。
<h4 id="win-setDocumentEdited">win.setDocumentEdited(edited) <i>(macOS)</i></h4>
-
edited
Boolean
指定窗口的文檔是否已經被編輯,如果設置為true
那么標題欄上的圖標將會變成灰色。
<h4 id="win-isDocumentEdited">win.isDocumentEdited() <i>(macOS)</i></h4>
返回值為Boolean
類型 - 窗口的文件是否被編輯。
<h4 id="win-focusOnWebView">win.focusOnWebView()</h4>
<h4 id="win-blurWebView">win.blurWebView()</h4>
<h4 id="win-capturePage">win.capturePage([rect, ]callback)</h4>
-
rect
Rectangle類型(可選參數)- 捕捉到的邊界。 -
callback
Function類型-
image
NativeImage
-
同webContents.capturePage([rect, ]callback)
一樣。
<h4 id="win-loadURL">win.loadURL(url[, options])</h4>
-
url
String類型 -
options
Object類型(可選參數)-
httpReferrer
String類型(可選參數)- 一個HTTP鏈接的地址。 -
userAgent
String類型(可選參數)- 一個發起請求的用戶代理。 -
extraHeaders
String類型(可選參數)- 使用“\n”分隔的額外的頭部。 -
postData
(UploadRawData | UploadFile | UploadFileSystem | UploadBlob)[]類型 - (可選參數)
-
同webContents.loadURL(url[, options])
一樣。
url
可以是一個遠程地址(例如http://
)也可以是一個使用file://
協議的本地的HTML文件路徑。
請確保文件地址是正確的,推薦使用Node的url.format
方法:
let url = require('url').format({
protocol: 'file',
slashes: true,
pathname: require('path').join(__dirname, 'index.html')
})
win.loadURL(url)
你可以像下面那樣使用一個URL編碼方式的POST
請求加載一個URL:
win.loadURL('http://localhost:8000/post', {
postData: [{
type: 'rawData',
bytes: Buffer.from('hello=world')
}],
extraHeaders: 'Content-Type: application/x-www-form-urlencoded'
})
<h4 id="win-reload">win.reload()</h4>
同webContents.reload
一樣。
<h4 id="win-setMenu">win.setMenu(menu) <i>(Linux,Windows)</i></h4>
-
menu
Menu類型
設置menu
作為窗口的菜單欄,設置它為null
則將會移除菜單欄。
<h4 id="win-setProgressBar">win.setProgressBar(progress[, options])</h4>
-
progress
Double類型 -
options
Object類型(可選參數)-
mode
String類型 Windows有效 - 進度條的模式。可以是none
,normal
,indeterminate
,error
或者paused
。
-
為進度條設置進度值。值的范圍是[0-1.0]。
當進度 < 0則移除進度條;當進度 > 1時變為不確定模式。
Linux平臺中,只支持Unity桌面環境,你需要在package.json
文件中的desktopName
中指定*.desktop
文件名字。默認情況下,它假設為app.getName().desktop
的值。
Windows中,一個模式可以被忽略。接受的值為none
,normal
,indeterminate
,error
和paused
。如果你沒有設置一個模式(沒有一個值在有效范圍內)就調用setProgressBar
,值將會假設為normal
。
<h4 id="win-setOverlayIcon">win.setOverlayIcon(overlay, description) <i>(Windows)</i></h4>
-
overlay
NativeImage類型 - 展示在任務欄右下角按鈕上的圖標。如果這個參數是null
,則覆蓋物將會被清除。 -
description
String類型 - 一個將提供給給屏幕閱讀器的描述。
設置一個16 x 16像素的覆蓋物到當前任務欄圖標上,通常被用來傳達某種應用狀態或者被動的通知用戶。
<h4 id="win-setHasShadow">win.setHasShadow(hasShadow) <i>(MacOS)</i></h4>
-
hasShadow
Boolean類型
設置窗口是否因該有一個陰影。Windows和Linux下無效。
<h4 id="win-hasShadow">win.hasShadow() <i>(MacOS)</i></h4>
返回值為Boolean
類型 - 窗口是否有一個陰影。
Windows和Linux下總是返回true
。
<h4 id="win-setThumbarButtons">win.setThumbarButtons(buttons) <i>(Windows)</i></h4>
-
buttons
ThumbarButton[]類型
返回值為Boolean
類型 - 按鈕是否被成功的添加。
添加一個帶有一些按鈕的縮略圖工具欄在一個任務欄按鈕布局上的窗口的縮略圖上。返回一個Boolean
對象來表示這個小東西是否被添加成功。
縮略圖工具欄上由于有限的空間按鈕的數量應該不能超過7個。一旦你設置了縮略圖工具欄,由于平臺的限制,這個工具欄將不可以被移除。但是你可以調用這個接口傳入一個空的數組來清空這些按鈕。
buttons
是一個Button
對象的數組:
-
Button
Object類型-
icon
NativeImage類型 - 在縮略圖工具欄上展示的圖標。 -
click
Function類型 -
tooltip
String類型(可選參數)- 這按鈕的工具提示的文字。 -
flags
String類型 - 控制按鈕的特殊的狀態和行為。通常來說這個值是['enabled']
。
-
flags
是一個可以包含下面字符串的數組:
-
enabled
- 按鈕是可點擊的并且對用戶有效。 -
disabled
- 按鈕是禁用的。按鈕存在,但是有一個視覺狀態表明它不可以響應用戶的點擊。 -
dismissonclick
- 當按鈕被點擊,這個縮略圖窗口將會被立刻關閉。 -
nobackground
- 不繪制按鈕的邊框,只使用圖片。 -
hidden
- 按鈕不展示給用戶。 -
noninteractive
- 按鈕已經啟用但是不進行交互;按下按鈕的狀態不會被繪制。這個值適用于被用在通知中的按鈕中。
<h4 id="win-setThumbnailClip">win.setThumbnailClip(region) <i>(Windows)</i></h4>
-
region
Rectangle - 窗口的區域。
設置當鼠標懸停在任務欄上時,窗口中展示縮略圖的區域。你可以通過指定一個空的區域{x: 0, y: 0, width: 0, height: 0}
來重新設置整個窗口的縮略圖。
<h4 id="win-setThumbnailToolTip">win.setThumbnailToolTip(toolTip) <i>Windows</i></h4>
-
toolTip
String類型
設置當鼠標懸停在任務欄的縮略圖窗口上時展示的提示文字。
<h4 id="win-setAppDetails">win.setAppDetails(options) <i>(Windows)<i></h4>
-
options
Object類型-
appId
String類型(可選參數)- 窗口的App User Model ID。它必須被設置,否則其他的設置選項將沒有效果。 -
appIconPath
String類型(可選參數)- 窗口的Relaunch Icon。 -
appIconIndex
Integer類型(可選參數) -appIconPath
中的圖標的索引值。當appIconPath
沒有被設置的時候將會被忽略。默認是0
。 -
relaunchCommand
String類型(可選參數)- 窗口的Relaunch Command。 -
relaunchDisplayName
String類型(可選參數)- 窗口的Relaunch Display Name。
-
設置窗口的任務欄按鈕的特性。
注意:relaunchCommand
和relaunchDisplayName
必須被一起設置。如果有一個沒有被設置,那么它們都不會被使用。
<h4 id="win-showDefinitionForSelection">win.showDefinitionForSelection() <i>(MacOS)</i></h4>
同webContents.showDefinitionForSelection()
一樣。
<h4 id="win-setIcon">win.setIcon(icon) <i>(Windows,Linux)</i></h4>
-
icon
NativeImage
改變窗口的圖標。
<h4 id="win-setAutoHideMenuBar">win.setAutoHideMenuBar(hide)</h4>
-
hide
Boolean類型
設置窗口的菜單欄是否自動隱藏。一旦設置,菜單欄將只會在用戶按下Alt
鍵時展示。
如果菜單欄已經是可見的,調用setAutoHideMenuBar(true)
將不會被立刻隱藏。
<h4 id="win-isMenuBarVisible">win.isMenuBarVisible()</h4>
返回值為Boolean
類型 - 菜單欄是否是可見的。
<h4 id="win-setVisibleOnAllWorkspaces">win.setVisibleOnAllWorkspaces(visible)</h4>
-
visible
Boolean類型
設置窗口在所有工作空間是否可見。
注意:這個接口將不會在Windows下工作。
<h4 id="win-isVisibleOnAllWorkspaces">win.isVisibleOnAllWorkspaces()</h4>
返回值為Boolean
類型 - 窗口是否在所有工作空間是否可見。
注意:這個接口將不會在Windows下工作。
<h4 id="win-setIgnoreMouseEvents">win.setIgnoreMouseEvents(ignore)</h4>
-
ignore
Boolean類型
使窗口忽略所有鼠標事件。
所有在這個窗口中發生的鼠標事件都會被轉移到這個窗口的下面窗口中,但是如果這個窗口獲得焦點,它仍然會接收鍵盤事件。
<h4 id="win-setContentProtection">win.setContentProtection(enable) <i>(MacOS,Windows)</i></h4>
-
enable
Boolean類型
防止窗口的內容被其他的應用捕獲。
MacOS中它會設置NSWindow
的sharingType
為NSWindowSharingNone
。Windows中它會調用SetWindowDisplayAffinity
傳入WDA_MONITOR
。
<h4 id="win-setFocusable">win.setFocusable(focusable) <i>(Windows)</i></h4>
-
focusable
Boolean類型
改變窗口是否可以被聚焦。
<h4 id="win-setParentWindow">win.setParentWindow(parent) <i>(Linux,MacOS)</i></h4>
-
parent
BrowserWindow類型
設置parent
為當前窗口的父窗口,設置null
將會使當前窗口放到一個頂級窗口中。
<h4 id="win-getParentWindow">win.getParentWindow()</h4>
返回值為BrowserWindow
類型 - 父窗口。
<h4 id="win-getChildWindows">win.getChildWindows()</h4>
返回值為BrowserWindow[]
類型 - 所有子窗口。
<h4 id="win-setAutoHideCursor">win.setAutoHideCursor(autoHide) <i>(MacOS)</i></h4>
-
autoHide
Boolean類型
控制是否在輸入時隱藏光標。
<h4 id="win-setVibrancy">win.setVibrancy(type) <i>(MacOS)</i></h4>
-
type
String類型 - 可以是appearance-based
,light
,dark
,titlebar
,selection
,menu
,popover
,sidebar
,medium-light
或ultra-dark
。查看macOS documentation獲取更多內容。
給瀏覽器窗口添加一個震動效果。傳入null
或者是空字符串將會移除窗口的震動效果。
<h4 id="win-setTouchBar">win.setTouchBar(touchBar) <i>(MacOS)</i></h4>
-
touchBar
TouchBar類型
為當前窗口設置touchBar布局。指定null
或者undefined
將清除touch bar。這個方法只會在電腦有一個touch bar并且運行MacOS 10.12.1+系統上才會有效果。