3. BrowserWindow

原文: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>

一個模態窗口是一個禁用父窗口的子窗口,創建一個模態窗口,你需要設置parentmodal選項:

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類型(可選參數)- widthheight是否直接作用于網頁的大小,如果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-basedlightdarktitlebarselectionmenupopoversidebarmedium-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. 當sessionpartition都被提供,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,它將禁用同源策略(人們一般用來測試網站),并且如果這個選項沒有被設置那么將設置allowRunningInsecureContenttrue。默認為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中,可能值有desktopdocktoolbarsplashnotification
  • MacOS中,可能值有desktoptextured
    • 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的beforeunloadunload事件之前被分發。調用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類型

當三個手指滑動時被分發。可能的方向有uprightdownleft

<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類型 - 鍵是擴展的名稱,對應的每一個值都是一個包含了nameversion屬性的對象。

你可以運行下面的代碼來檢查開發工具擴展是否被安裝:

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>

強制關閉窗口,網頁的unloadbeforeunload事件將不會被分發,窗口的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有效

調整窗口大小的widthheight

<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有效

調整窗口客戶端區域大小的widthheight

<h4 id="win-getContentSize">win.getContentSize()</h4>

返回值為Integer[]類型 - 包含窗口客戶端區域的寬度和高度。

<h4 id="win-setMinimumSize">win.setMinimumSize(width, height)</h4>

  • width Integer類型
  • height Integer類型

設置窗口的widthheight的最小尺寸。

<h4 id="win-getMinimumSize">win.getMinimumSize()</h4>

返回值為Integer[]類型 - 包含窗口的寬高的最小尺寸。

<h4 id="win-setMaximumSize">win.setMaximumSize(width, height)</h4>

  • width Integer類型
  • height Integer類型

設置窗口的widthheight的最大尺寸。

<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有效 - 值包括了normalfloatingtorn-off-menumodal-panelmain-menustatuspop-up-menuscreen-saverdock(不推薦使用)。默認是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可用

移動窗口到xy的位置。

<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下是Windowunsigned 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類型

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有效 - 進度條的模式。可以是nonenormalindeterminateerror或者paused

為進度條設置進度值。值的范圍是[0-1.0]。

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

Linux平臺中,只支持Unity桌面環境,你需要在package.json文件中的desktopName中指定*.desktop文件名字。默認情況下,它假設為app.getName().desktop的值。

Windows中,一個模式可以被忽略。接受的值為nonenormalindeterminateerrorpaused。如果你沒有設置一個模式(沒有一個值在有效范圍內)就調用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>

返回值為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>

設置當鼠標懸停在任務欄上時,窗口中展示縮略圖的區域。你可以通過指定一個空的區域{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

設置窗口的任務欄按鈕的特性。

注意:relaunchCommandrelaunchDisplayName必須被一起設置。如果有一個沒有被設置,那么它們都不會被使用。

<h4 id="win-showDefinitionForSelection">win.showDefinitionForSelection() <i>(MacOS)</i></h4>

webContents.showDefinitionForSelection()一樣。

<h4 id="win-setIcon">win.setIcon(icon) <i>(Windows,Linux)</i></h4>

改變窗口的圖標。

<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中它會設置NSWindowsharingTypeNSWindowSharingNone。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-basedlightdarktitlebarselectionmenupopoversidebarmedium-lightultra-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+系統上才會有效果。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原文:https://github.com/electron/electron/blob/master/docs/...
    Shmily落墨閱讀 6,192評論 0 1
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,915評論 18 139
  • 原文:https://github.com/electron/electron/blob/master/docs/...
    Shmily落墨閱讀 2,694評論 0 1
  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,145評論 6 13
  • 5月2日生日花,野萊菔。 野萊菔,是個多年生長的直立莖長的草本植物。會開花會結籽。 莖多會分枝,生葉和莖生,葉長圓...
    冬林探花閱讀 2,244評論 0 1