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
窗口的顶部。
模态窗口
模态窗口是禁用父窗口的子窗口。要创建模态窗口,您必须同时设置 parent
和 modal
选项。
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()
})
页面可见性
Page Visibility API 的工作方式如下:
- 在所有平台上,可见性状态跟踪窗口是否被隐藏/最小化。
- 此外,在 macOS 上,可见性状态还跟踪窗口的遮挡状态。如果窗口被另一个窗口遮挡(即完全覆盖),可见性状态将是
hidden
。在其他平台上,可见性状态只有在窗口最小化或使用win.hide()
显式隐藏时才会是hidden
。 - 如果使用
show: false
创建BrowserWindow
,尽管窗口实际是隐藏的,初始可见性状态将是visible
。 - 如果禁用了
backgroundThrottling
,即使窗口被最小化、遮挡或隐藏,可见性状态仍将保持visible
。
建议在可见性状态为 hidden
时暂停高开销的操作,以最大程度地降低功耗。
平台注意事项
- 在 macOS 上,模态窗口将显示为附加到父窗口的工作表。
- 在 macOS 上,子窗口在父窗口移动时会保持相对于父窗口的位置,而在 Windows 和 Linux 上,子窗口不会移动。
- 在 Linux 上,模态窗口的类型将更改为
dialog
。 - 在 Linux 上,许多桌面环境不支持隐藏模态窗口。
类:BrowserWindow 继承 BaseWindow
创建和控制浏览器窗口。
进程:主
BrowserWindow
是一个 EventEmitter。
它创建一个新的 BrowserWindow
,并使用 options
中设置的原生属性。
new BrowserWindow([options])
实例事件
使用 new BrowserWindow
创建的对象会触发以下事件
**注意:**某些事件仅在特定操作系统上可用,并已相应标记。
事件:'page-title-updated'
返回值
event
事件title
字符串explicitSet
boolean
当文档更改其标题时触发,调用 event.preventDefault()
将阻止原生窗口标题更改。当标题由文件 URL 合成时,explicitSet
为 false。
事件:'close'
返回值
event
事件
当窗口即将关闭时触发。它在 DOM 的 beforeunload
和 unload
事件之前触发。调用 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 = handler
和 window.addEventListener('beforeunload', handler)
的行为存在细微差异。建议始终显式设置 event.returnValue
,而不是仅返回值,因为前者在 Electron 中工作得更一致。
事件:'closed'
窗口关闭时触发。收到此事件后,应删除对该窗口的引用,避免再使用它。
事件:'query-session-end' Windows
返回值
event
WindowSessionEndEvent
当会话因关机、机器重启或用户注销而即将结束时触发。调用 event.preventDefault()
可以延迟系统关机,但通常最好尊重用户结束会话的选择。但是,如果结束会话会使用户面临丢失数据的风险,您可以选择使用它。
事件:'session-end' Windows
返回值
event
WindowSessionEndEvent
当会话因关机、机器重启或用户注销而即将结束时触发。一旦此事件触发,就无法阻止会话结束。
事件:'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
Objectedge
(string) - 拖动以调整窗口大小的边缘。可以是bottom
、left
、right
、top-left
、top-right
、bottom-left
或bottom-right
。
在窗口调整大小之前触发。调用 event.preventDefault()
将阻止窗口调整大小。
请注意,此事件仅在手动调整窗口大小时触发。使用 setBounds
/setSize
调整窗口大小不会触发此事件。
edge
选项的可能值和行为取决于平台。可能的值有:
- 在 Windows 上,可能的值为
bottom
、top
、left
、right
、top-left
、top-right
、bottom-left
、bottom-right
。 - 在 macOS 上,可能的值为
bottom
和right
。- 值
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
boolean
当窗口设置为始终置顶或取消置顶时触发。
事件:'app-command' Windows Linux
返回值
event
事件command
字符串
当调用 App 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
字符串
在三指轻扫时触发。可能的方向有 up
、right
、down
、left
。
此事件的基础方法旨在处理旧的 macOS 风格的触控板轻扫,在这种情况下,屏幕上的内容不会随轻扫移动。大多数 macOS 触控板不再配置为允许这种类型的轻扫,因此为了使其正常触发,必须在 System Preferences > Trackpad > More Gestures
中将“在页面之间轻扫”偏好设置为“用两指或三指轻扫”。
事件:'rotate-gesture' macOS
返回值
event
事件rotation
Float
在触控板旋转手势时触发。持续触发直到旋转手势结束。每次触发时的 rotation
值是自上次触发以来旋转的角度(以度为单位)。旋转手势结束时的最后一次触发事件的值始终为 0
。逆时针旋转值为正,顺时针旋转值为负。
事件:'sheet-begin' macOS
当窗口打开一个工作表时触发。
事件:'sheet-end' macOS
当窗口关闭一个工作表时触发。
事件:'new-window-for-tab' macOS
当单击原生新标签页按钮时触发。
事件:'system-context-menu' Windows Linux
返回值
event
事件point
Point - 触发上下文菜单的屏幕坐标。
当在窗口的非客户区触发系统上下文菜单时触发此事件,这通常仅在用户右键单击窗口的标题栏或在无框窗口中声明为 -webkit-app-region: drag
的任何区域时发生。
调用 event.preventDefault()
将阻止菜单显示。
要将 point
转换为 DIP,请使用 [screen.screenToDipPoint(point)
](/docs/latest/api/screen#screenscreentodippointpoint-windows)。
静态方法
BrowserWindow
类有以下静态方法:
BrowserWindow.getAllWindows()
Returns BrowserWindow[]
- 返回一个包含所有已打开的浏览器窗口的数组。
BrowserWindow.getFocusedWindow()
Returns BrowserWindow | null
- 返回当前应用中获得焦点的窗口,否则返回 null
。
BrowserWindow.fromWebContents(webContents)
webContents
WebContents
Returns BrowserWindow | null
- 返回拥有给定 webContents
的窗口,如果内容不归任何窗口所有,则返回 null
。
BrowserWindow.fromBrowserView(browserView)
已废弃
browserView
BrowserView
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
Returns BrowserWindow | null
- 返回拥有给定 browserView
的窗口。如果给定的视图未附加到任何窗口,则返回 null
。
BrowserWindow.fromId(id)
id
整数
Returns 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
只读
一个 Integer
类型的属性,表示窗口的唯一 ID。每个 ID 在整个 Electron 应用的所有 BrowserWindow
实例中都是唯一的。
win.tabbingIdentifier
macOS 只读
一个 string
类型 (可选) 的属性,等于传递给 BrowserWindow
构造函数的 tabbingIdentifier
,如果未设置则为 undefined
。
win.autoHideMenuBar
Linux Windows
一个 boolean
类型的属性,决定窗口的菜单栏是否应自动隐藏。一旦设置,菜单栏只会在用户按下单独的 Alt
键时显示。
如果菜单栏已经可见,将此属性设置为 true
不会立即隐藏它。
win.simpleFullScreen
一个 boolean
类型的属性,决定窗口是否处于简易 (Lion 系统之前) 全屏模式。
win.fullScreen
一个 boolean
类型的属性,决定窗口是否处于全屏模式。
win.focusable
Windows macOS
一个 boolean
类型的属性,决定窗口是否可聚焦。
win.visibleOnAllWorkspaces
macOS Linux
一个 boolean
类型的属性,决定窗口是否在所有工作区都可见。
注意:在 Windows 上始终返回 false。
win.shadow
一个 boolean
类型的属性,决定窗口是否有阴影。
win.menuBarVisible
Windows Linux
一个 boolean
类型的属性,决定菜单栏是否应该可见。
注意:如果菜单栏自动隐藏,用户仍然可以通过按下单独的 Alt
键来显示菜单栏。
win.kiosk
一个 boolean
类型的属性,决定窗口是否处于 kiosk 模式(公共终端模式)。
win.documentEdited
macOS
一个 boolean
类型的属性,指定窗口的文档是否已被编辑。
当设置为 true
时,标题栏中的图标将变为灰色。
win.representedFilename
macOS
一个 string
类型的属性,决定窗口所代表的文件的路径名,该文件的图标将显示在窗口的标题栏中。
win.title
一个 string
类型的属性,决定原生窗口的标题。
注意:网页的标题可以与原生窗口的标题不同。
win.minimizable
macOS Windows
一个 boolean
类型的属性,决定窗口是否可以由用户手动最小化。
在 Linux 上,setter 是一个空操作 (no-op),尽管 getter 返回 true
。
win.maximizable
macOS Windows
一个 boolean
类型的属性,决定窗口是否可以由用户手动最大化。
在 Linux 上,setter 是一个空操作 (no-op),尽管 getter 返回 true
。
win.fullScreenable
一个 boolean
类型的属性,决定最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
win.resizable
一个 boolean
类型的属性,决定窗口是否可以由用户手动调整大小。
win.closable
macOS Windows
一个 boolean
类型的属性,决定窗口是否可以由用户手动关闭。
在 Linux 上,setter 是一个空操作 (no-op),尽管 getter 返回 true
。
win.movable
macOS Windows
一个 boolean
类型的属性,决定窗口是否可以由用户移动。
在 Linux 上,setter 是一个空操作 (no-op),尽管 getter 返回 true
。
win.excludedFromShownWindowsMenu
macOS
一个 boolean
类型的属性,决定窗口是否从应用程序的 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
一个 string
类型的属性,定义了仅提供给辅助工具(例如屏幕阅读器)的替代标题。此字符串对用户不可见。
win.snapped
Windows 只读
一个 boolean
类型的属性,指示窗口是否通过 贴靠(Snap)排列。
实例方法
使用 new BrowserWindow
创建的对象拥有以下实例方法
注意:某些方法仅在特定的操作系统上可用,并已相应地标记。
win.destroy()
强制关闭窗口,网页的 unload
和 beforeunload
事件不会被触发,此窗口的 close
事件也不会被触发,但它保证会触发 closed
事件。
win.close()
尝试关闭窗口。这与用户手动点击窗口的关闭按钮效果相同。网页可能会取消关闭。请参阅 close 事件。
win.focus()
聚焦于窗口。
win.blur()
移除窗口的焦点。
win.isFocused()
Returns boolean
- 窗口是否获得焦点。
win.isDestroyed()
Returns boolean
- 窗口是否已被销毁。
win.show()
显示窗口并使其获得焦点。
win.showInactive()
显示窗口但不使其获得焦点。
win.hide()
隐藏窗口。
win.isVisible()
Returns boolean
- 窗口是否在前台对用户可见。
win.isModal()
Returns boolean
- 当前窗口是否为模态窗口。
win.maximize()
最大化窗口。如果窗口尚未显示,此操作也会显示(但不会使其获得焦点)窗口。
win.unmaximize()
取消窗口最大化。
win.isMaximized()
Returns boolean
- 窗口是否已最大化。
win.minimize()
最小化窗口。在某些平台上,最小化的窗口将显示在 Dock 中。
win.restore()
将窗口从最小化状态恢复到之前的大小和位置。
win.isMinimized()
Returns boolean
- 窗口是否已最小化。
win.setFullScreen(flag)
flag
布尔值
设置窗口是否应处于全屏模式。
注意:在 macOS 上,全屏切换是异步发生的。如果后续操作依赖于全屏状态,请使用 'enter-full-screen' 或 'leave-full-screen' 事件。
win.isFullScreen()
Returns boolean
- 窗口是否处于全屏模式。
注意:在 macOS 上,全屏切换是异步发生的。查询 BrowserWindow 的全屏状态时,应确保已触发 'enter-full-screen' 或 'leave-full-screen' 事件。
win.setSimpleFullScreen(flag)
macOS
flag
布尔值
进入或退出简易全屏模式。
简易全屏模式模拟了 macOS Lion (10.7) 之前版本中的原生全屏行为。
win.isSimpleFullScreen()
macOS
Returns boolean
- 窗口是否处于简易 (Lion 系统之前) 全屏模式。
win.isNormal()
Returns boolean
- 窗口是否处于正常状态(未最大化、未最小化、未处于全屏模式)。
win.setAspectRatio(aspectRatio[, extraSize])
aspectRatio
浮点数 - 内容视图某个部分的宽高比。extraSize
Size (可选) macOS - 维护宽高比时不应包含的额外大小。
这将使窗口保持宽高比。额外大小允许开发者指定以像素为单位的空间,这些空间不包含在宽高比计算中。此 API 已考虑到窗口大小与其内容大小之间的差异。
考虑一个带有高清视频播放器和相关控件的普通窗口。也许左边缘有 15 像素的控件,右边缘有 25 像素的控件,播放器下方有 50 像素的控件。为了在播放器本身内保持 16:9 的宽高比 (高清 @1920x1080 的标准宽高比),我们将使用 16/9 和 { width: 40, height: 50 } 作为参数调用此函数。第二个参数不关心额外宽度和高度在内容视图中的位置,只关心它们是否存在。将总体内容视图中所有额外的宽度和高度区域相加即可。
使用像 win.setSize
这样的 API 以编程方式调整窗口大小时,宽高比不会被遵守。
要重置宽高比,请将 aspectRatio
的值设为 0:win.setAspectRatio(0)
。
win.setBackgroundColor(backgroundColor)
backgroundColor
字符串 - 颜色,格式为 Hex、RGB、RGBA、HSL、HSLA 或命名的 CSS 颜色。对于 Hex 类型,Alpha 通道是可选的。
有效的 backgroundColor
值示例
- 十六进制 (Hex)
- #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 关键字,但区分大小写。
- 例如:
blueviolet
或red
- 例如:
设置窗口的背景颜色。请参阅 设置 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)高度。托盘高度随时间变化并取决于操作系统,但介于 20-40 像素之间。传递小于托盘高度的值将导致窗口紧贴托盘。
win.getBounds()
Returns Rectangle - 窗口的 bounds
,以 Object
形式返回。
注意:在 macOS 上,返回的 y 坐标值最小将是 托盘(Tray)高度。例如,在托盘高度为 38 时调用 win.setBounds({ x: 25, y: 20, width: 800, height: 600 })
表示 win.getBounds()
将返回 { x: 25, y: 38, width: 800, height: 600 }
。
win.getBackgroundColor()
Returns string
- 获取窗口的背景颜色,格式为 Hex (#RRGGBB
)。
请参阅 设置 backgroundColor
。
注意:Alpha 值不会与红、绿、蓝值一起返回。
win.setContentBounds(bounds[, animate])
bounds
Rectangleanimate
布尔值 (可选) macOS
调整窗口客户端区域(例如网页)的大小并将其移动到提供的边界。
win.getContentBounds()
Returns Rectangle - 窗口客户端区域的 bounds
,以 Object
形式返回。
win.getNormalBounds()
Returns Rectangle - 包含窗口正常状态的边界。
注意:无论窗口当前处于何种状态:最大化、最小化或全屏,此函数始终返回窗口在正常状态下的位置和大小。在正常状态下,getBounds 和 getNormalBounds 返回相同的 Rectangle。
win.setEnabled(enable)
enable
布尔值
禁用或启用窗口。
win.isEnabled()
Returns boolean
- 窗口是否已启用。
win.setSize(width, height[, animate])
width
整数height
整数animate
布尔值 (可选) macOS
将窗口大小调整为 width
和 height
。如果 width
或 height
小于任何设置的最小尺寸限制,窗口将自动调整到其最小尺寸。
win.getSize()
Returns Integer[]
- 包含窗口的宽度和高度。
win.setContentSize(width, height[, animate])
width
整数height
整数animate
布尔值 (可选) macOS
将窗口客户端区域(例如网页)的大小调整为 width
和 height
。
win.getContentSize()
Returns Integer[]
- 包含窗口客户端区域的宽度和高度。
win.setMinimumSize(width, height)
width
整数height
整数
设置窗口的最小尺寸为 width
和 height
。
win.getMinimumSize()
Returns Integer[]
- 包含窗口的最小宽度和高度。
win.setMaximumSize(width, height)
width
整数height
整数
设置窗口的最大尺寸为 width
和 height
。
win.getMaximumSize()
Returns Integer[]
- 包含窗口的最大宽度和高度。
win.setResizable(resizable)
resizable
布尔值
设置窗口是否可以由用户手动调整大小。
win.isResizable()
Returns boolean
- 窗口是否可以由用户手动调整大小。
win.setMovable(movable)
macOS Windows
movable
布尔值
设置窗口是否可以由用户移动。在 Linux 上无效。
win.isMovable()
macOS Windows
Returns boolean
- 窗口是否可以由用户移动。
在 Linux 上始终返回 true
。
win.setMinimizable(minimizable)
macOS Windows
minimizable
布尔值
设置窗口是否可以由用户手动最小化。在 Linux 上无效。
win.isMinimizable()
macOS Windows
Returns boolean
- 窗口是否可以由用户手动最小化。
在 Linux 上始终返回 true
。
win.setMaximizable(maximizable)
macOS Windows
maximizable
布尔值
设置窗口是否可以由用户手动最大化。在 Linux 上无效。
win.isMaximizable()
macOS Windows
Returns boolean
- 窗口是否可以由用户手动最大化。
在 Linux 上始终返回 true
。
win.setFullScreenable(fullscreenable)
fullscreenable
布尔值
设置最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
win.isFullScreenable()
Returns boolean
- 最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
win.setClosable(closable)
macOS Windows
closable
布尔值
设置窗口是否可以由用户手动关闭。在 Linux 上无效。
win.isClosable()
macOS Windows
Returns boolean
- 窗口是否可以由用户手动关闭。
在 Linux 上始终返回 true
。
win.setHiddenInMissionControl(hidden)
macOS
hidden
布尔值
设置当用户切换到 Mission Control 时,窗口是否会隐藏。
win.isHiddenInMissionControl()
macOS
Returns boolean
- 当用户切换到 Mission Control 时,窗口是否会隐藏。
win.setAlwaysOnTop(flag[, level][, relativeLevel])
flag
布尔值level
字符串 (可选) macOS Windows - 值包括normal
、floating
、torn-off-menu
、modal-panel
、main-menu
、status
、pop-up-menu
、screen-saver
和(已废弃)。当dock
flag
为 true 时,默认值为floating
。当 flag 为 false 时,level
会重置为normal
。注意,从floating
到status
(包括两者),窗口在 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
Integery
Integeranimate
布尔值 (可选) macOS
将窗口移动到 x
和 y
位置。
win.getPosition()
返回 Integer[]
- 包含窗口的当前位置。
win.setTitle(title)
title
字符串
将原生窗口的标题更改为 title
。
win.getTitle()
返回 string
- 原生窗口的标题。
注意:网页的标题可以与原生窗口的标题不同。
win.setSheetOffset(offsetY[, offsetX])
macOS
offsetY
FloatoffsetX
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 mode)。
win.isKiosk()
返回 boolean
- 窗口是否处于全屏模式 (kiosk mode)。
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
Integercallback
FunctionwParam
Buffer - 提供给 WndProc 的wParam
参数。lParam
Buffer - 提供给 WndProc 的lParam
参数。
钩取一个 Windows 消息。 当 WndProc 接收到消息时,将调用 callback
。
win.isWindowMessageHooked(message)
Windows
message
Integer
返回 boolean
- true
或 false
,取决于消息是否已被钩取。
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
返回 Promise<void>
- Promise 在页面加载完成时解析 (详见 did-finish-load
),如果页面加载失败则拒绝 (详见 did-fail-load
)。
与 webContents.loadURL(url[, options])
相同。
url
可以是远程地址 (例如 http://
) 或使用 file://
协议的本地 HTML 文件路径。
为了确保文件 URL 格式正确,建议使用 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
返回 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
设置进度条的进度值。 有效范围是 [0, 1.0]。
当进度 < 0 时移除进度条;当进度 > 1 时更改为不确定模式。
在 Linux 平台上,仅支持 Unity 桌面环境,您需要在 package.json
中的 desktopName
字段指定 *.desktop
文件名。 默认情况下,它将假定为 {app.name}.desktop
。
在 Windows 上,可以传递模式。 可接受的值为 none
,normal
,indeterminate
,error
和 paused
。 如果在未设置模式的情况下调用 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
buttons
ThumbarButton[]
返回 boolean
- 按钮是否成功添加。
在任务栏按钮布局中,为窗口的缩略图图像添加一个带有指定按钮集的缩略图工具栏。 返回一个 boolean
值,指示缩略图是否成功添加。
由于空间有限,缩略图工具栏中的按钮数量不应超过 7 个。 一旦设置了缩略图工具栏,由于平台的限制,工具栏无法移除。 但您可以调用此 API 并传入空数组来清除按钮。
buttons
是一个 Button
对象数组。
Button
对象icon
NativeImage - 显示在缩略图工具栏中的图标。click
Functiontooltip
string (可选) - 按钮工具提示文本。flags
string[] (可选) - 控制按钮的特定状态和行为。 默认值为['enabled']
。
flags
是一个可以包含以下 string
的数组。
enabled
- 按钮处于活动状态且用户可用。disabled
- 按钮处于禁用状态。 它存在,但视觉状态表明它不会响应用户操作。dismissonclick
- 单击按钮时,缩略图窗口立即关闭。nobackground
- 不绘制按钮边框,仅使用图像。hidden
- 按钮不显示给用户。noninteractive
- 按钮已启用但不交互;不绘制按下按钮的状态。 此值适用于按钮用于通知的场景。
win.setThumbnailClip(region)
Windows
region
Rectangle - 窗口区域。
设置窗口中显示在任务栏悬停窗口上的缩略图图像区域。 您可以通过指定空区域 { x: 0, y: 0, width: 0, height: 0 }
来将缩略图重置为整个窗口。
win.setThumbnailToolTip(toolTip)
Windows
toolTip
string
设置鼠标悬停在任务栏窗口缩略图上时显示的工具提示。
win.setAppDetails(options)
Windows
设置窗口任务栏按钮的属性。
注意:relaunchCommand
和 relaunchDisplayName
必须始终同时设置。 如果其中一个属性未设置,则两者都不会使用。
win.showDefinitionForSelection()
macOS
与 webContents.showDefinitionForSelection()
相同。
win.setIcon(icon)
Windows Linux
icon
NativeImage | string
改变窗口图标。
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.isSnapped()
Windows
返回 boolean
- 窗口是否通过 贴靠 (Snap) 排列。
窗口通过鼠标悬停在窗口最大化按钮上时显示的按钮进行贴靠,或通过将其拖动到屏幕边缘进行贴靠。
win.setVisibleOnAllWorkspaces(visible[, options])
macOS Linux
visible
boolean
设置窗口是否在所有工作区上可见。
注意:此 API 在 Windows 上不起作用。
win.isVisibleOnAllWorkspaces()
macOS Linux
返回 boolean
- 窗口是否在所有工作区上可见。
注意:此 API 在 Windows 上始终返回 false。
win.setIgnoreMouseEvents(ignore[, options])
ignore
boolean
使窗口忽略所有鼠标事件。
发生在此窗口中的所有鼠标事件都将传递给此窗口下方的窗口,但如果此窗口具有焦点,它仍将接收键盘事件。
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
boolean
控制打字时是否隐藏光标。
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
string | null - 可以是titlebar
、selection
、menu
、popover
、sidebar
、header
、sheet
、window
、hud
、fullscreen-ui
、tooltip
、content
、under-window
或under-page
。 更多详细信息请参阅 macOS 文档。
为浏览器窗口添加活力 (vibrancy) 效果。 传入 null
或空字符串将移除窗口上的活力效果。 animationDuration
参数仅对活力效果的淡入或淡出进行动画处理。 不支持在不同类型的活力效果之间进行动画处理。
win.setBackgroundMaterial(material)
Windows
material
stringauto
- 让桌面窗口管理器 (DWM) 自动决定此窗口由系统绘制的背景材质。 这是默认值。none
- 不绘制任何系统背景。mica
- 绘制与长时间运行窗口相对应的背景材质效果。acrylic
- 绘制与临时窗口相对应的背景材质效果。tabbed
- 绘制与带有标签标题栏的窗口相对应的背景材质效果。
此方法设置浏览器窗口由系统绘制的背景材质,包括非客户区后面。
更多详细信息请参阅 Windows 文档。
注意:此方法仅在 Windows 11 22H2 及更高版本上支持。
win.setWindowButtonPosition(position)
macOS
position
Point | null
在无框窗口中为红绿灯按钮设置自定义位置。 传入 null
将位置重置为默认值。
win.getWindowButtonPosition()
macOS
返回 Point | null
- 无框窗口中红绿灯按钮的自定义位置,如果没有自定义位置则返回 null
。
win.setTouchBar(touchBar)
macOS
touchBar
TouchBar | null
为当前窗口设置 TouchBar 布局。 指定 null
或 undefined
将清除 TouchBar。 此方法仅在机器具有 TouchBar 时有效。
注意: TouchBar API 目前是实验性的,在未来的 Electron 版本中可能会更改或移除。
win.setBrowserView(browserView)
实验性 已弃用
browserView
BrowserView | null - 将browserView
附加到win
。如果已附加其他BrowserView
,它们将从该窗口中移除。
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
win.getBrowserView()
实验性 已弃用
返回 BrowserView | null
- 附加到 win
的 BrowserView
。如果未附加,则返回 null
。如果附加了多个 BrowserView
,则抛出错误。
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
win.addBrowserView(browserView)
实验性 已弃用
browserView
BrowserView
setBrowserView 的替代 API,支持多浏览器视图。
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
win.removeBrowserView(browserView)
实验性 已弃用
browserView
BrowserView
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
win.setTopBrowserView(browserView)
实验性 已弃用
browserView
BrowserView
将 browserView
提升到附加到 win
的其他 BrowserView
之上。如果 browserView
未附加到 win
,则抛出错误。
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
win.getBrowserViews()
实验性 已弃用
返回 BrowserView[]
- 通过 addBrowserView
或 setBrowserView
附加的所有 BrowserView 按 z-index 排序的数组。最顶层的 BrowserView 是数组的最后一个元素。
注意:
BrowserView
类已废弃,已被新的WebContentsView
类取代。
win.setTitleBarOverlay(options)
Windows Linux
在已启用窗口控件叠加层的窗口上,此方法更新标题栏叠加层的样式。
在 Linux 上,如果未明确设置,symbolColor
会自动计算以与 color
具有最低可访问对比度。