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()
})
页面可见性
《页面可见性 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。
Electron 的内置类不能在用户代码中被继承。有关更多信息,请参阅 FAQ。
new BrowserWindow([options])
实例事件
使用 new BrowserWindow 创建的对象会发出以下事件
某些事件仅在特定操作系统上可用,并已相应标记。
事件: 'page-title-updated'
返回
eventEventtitlestringexplicitSetboolean
当文档更改其标题时发出,调用 event.preventDefault() 将阻止本机窗口的标题更改。当标题从文件 URL 综合生成时,explicitSet 为 false。
事件: 'close'
返回
eventEvent
当窗口即将关闭时发出。它在 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
返回
eventWindowSessionEndEvent
当由于关机、机器重启或用户注销而即将结束会话时发出。调用 event.preventDefault() 可以延迟系统关机,但通常最好尊重用户结束会话的选择。但是,您可能会选择使用它,如果结束会话会使用户面临数据丢失的风险。
事件: 'session-end' Windows
返回
eventWindowSessionEndEvent
当由于关机、机器重启或用户注销而即将结束会话时发出。一旦此事件触发,就无法阻止会话结束。
事件: 'unresponsive'
当网页无响应时发出。
事件: 'responsive'
当无响应的网页再次响应时发出。
事件: 'blur'
当窗口失去焦点时发出。
事件: 'focus'
当窗口获得焦点时发出。
事件: 'show'
当窗口显示时发出。
事件: 'hide'
当窗口隐藏时发出。
事件: 'ready-to-show'
当网页已渲染(未显示时)并且可以显示窗口而没有视觉闪烁时发出。
请注意,使用此事件意味着渲染器将被视为“可见”并进行绘制,即使 show 为 false。如果您使用 paintWhenInitiallyHidden: false,则此事件将永远不会触发。
事件: 'maximize'
当窗口最大化时发出。
事件: 'unmaximize'
当窗口退出最大化状态时发出。
事件: 'minimize'
当窗口最小化时发出。
事件: 'restore'
当窗口从最小化状态恢复时发出。
事件: 'will-resize' macOS Windows
返回
eventEventnewBoundsRectangle - 窗口正在调整为的大小。detailsObjectedge(字符串) - 正在拖动窗口进行调整大小的边缘。可以是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
返回
eventEventnewBoundsRectangle - 窗口正在移动到的位置。
在窗口移动之前发出。在 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'
返回
eventEventisAlwaysOnTop布尔值
在窗口设置为或取消设置为始终位于其他窗口之上时发出。
事件: 'app-command' Windows Linux
返回
eventEventcommand字符串
在调用 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-backwardbrowser-forward
事件: 'swipe' macOS
返回
eventEventdirection字符串
在三指滑动时发出。可能的方向是 up(向上)、right(向右)、down(向下)、left(向左)。
此事件的基础方法构建为处理旧版 macOS 风格的触控板滑动,其中屏幕上的内容不会随滑动移动。大多数 macOS 触控板未配置为允许这种类型的滑动,因此为了正确发出此事件,必须将“系统偏好设置 > 触控板 > 更多手势”中的“用两或三根手指滑动”首选项设置为“用两或三根手指滑动”。
事件: 'rotate-gesture' macOS
返回
eventEventrotation浮点数
在触控板旋转手势时发出。在旋转手势结束之前持续发出。每次发出的 rotation 值是自上次发出以来的旋转角度(以度为单位)。旋转手势的最后一次发出事件的值始终为 0。逆时针旋转值为正,顺时针旋转值为负。
事件: 'sheet-begin' macOS
在窗口打开床单时发出。
事件: 'sheet-end' macOS
在窗口关闭床单时发出。
事件: 'new-window-for-tab' macOS
在单击本机的新选项卡按钮时发出。
事件: 'system-context-menu' Windows Linux
返回
eventEventpointPoint - 触发上下文菜单的屏幕坐标。
在窗口上触发系统上下文菜单时发出,通常仅在用户右键单击窗口的非客户端区域时触发。这是窗口标题栏或您在无边框窗口中声明为 -webkit-app-region: drag 的任何区域。
调用 event.preventDefault() 将阻止显示菜单。
要将 point 转换为 DIP,请使用 screen.screenToDipPoint(point)。
静态方法
BrowserWindow 类具有以下静态方法
BrowserWindow.getAllWindows()
返回 BrowserWindow[] - 所有已打开的浏览器窗口的数组。
BrowserWindow.getFocusedWindow()
返回 BrowserWindow | null - 此应用程序中获得焦点的窗口,否则返回 null。
BrowserWindow.fromWebContents(webContents)
webContentsWebContents
返回 BrowserWindow | null - 拥有给定 webContents 的窗口,如果内容不属于任何窗口,则返回 null。
BrowserWindow.fromBrowserView(browserView) 已弃用
browserViewBrowserView
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
返回 BrowserWindow | null - 拥有给定 browserView 的窗口。如果给定的视图未附加到任何窗口,则返回 null。
BrowserWindow.fromId(id)
idInteger
返回 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。
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 属性,用于确定窗口是否处于亭体模式。
win.documentEdited macOS
一个 boolean 属性,用于指定窗口的文档是否已被编辑。
当设置为 true 时,标题栏中的图标将变为灰色。
win.representedFilename macOS
一个 string 属性,用于确定窗口所代表的文件的路径名,并且该文件的图标将显示在窗口的标题栏中。
win.title
一个 string 属性,用于确定原生窗口的标题。
网页的标题可能与原生窗口的标题不同。
win.minimizable macOS Windows
一个 boolean 属性,用于确定窗口是否可以由用户手动最小化。
在 Linux 上,setter 是一个空操作,尽管 getter 返回 true。
win.maximizable macOS Windows
一个 boolean 属性,用于确定窗口是否可以由用户手动最大化。
在 Linux 上,setter 是一个空操作,尽管 getter 返回 true。
win.fullScreenable
一个 boolean 属性,用于确定最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
win.resizable
一个 boolean 属性,用于确定窗口是否可以由用户手动调整大小。
win.closable macOS Windows
一个 boolean 属性,用于确定窗口是否可以由用户手动关闭。
在 Linux 上,setter 是一个空操作,尽管 getter 返回 true。
win.movable macOS Windows
一个 boolean 属性,用于确定窗口是否可以由用户移动。
在 Linux 上,setter 是一个空操作,尽管 getter 返回 true。
win.excludedFromShownWindowsMenu macOS
一个 boolean 属性,用于确定窗口是否从应用程序的“窗口”菜单中排除。默认值为 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 属性,指示窗口是否通过 “窗口捕捉” 功能排列。
实例方法
使用 new BrowserWindow 创建的对象具有以下实例方法
某些方法仅在特定操作系统上可用,并已如此标记。
win.destroy()
强制关闭窗口,网页将不会发出 unload 和 beforeunload 事件,并且此窗口也不会发出 close 事件,但它保证会发出 closed 事件。
win.close()
尝试关闭窗口。这与用户手动单击窗口的关闭按钮的效果相同。网页可能会取消关闭。请参阅 close 事件。
win.focus()
将焦点设置到窗口。
win.blur()
从窗口移除焦点。
win.isFocused()
返回 boolean - 窗口是否处于焦点状态。
win.isDestroyed()
返回 boolean - 窗口是否已被销毁。
win.show()
显示并聚焦到窗口。
win.showInactive()
显示窗口但不聚焦到它。
win.hide()
隐藏窗口。
win.isVisible()
返回 boolean - 窗口是否对用户在应用程序的前台可见。
win.isModal()
返回 boolean - 当前窗口是否为模态窗口。
win.maximize()
最大化窗口。如果窗口尚未显示,这将同时显示(但不聚焦)窗口。
win.unmaximize()
取消最大化窗口。
win.isMaximized()
返回 boolean - 窗口是否已最大化。
win.minimize()
最小化窗口。在某些平台上,最小化的窗口将在 Dock 中显示。
win.restore()
将窗口从最小化状态恢复到其先前状态。
win.isMinimized()
返回 boolean - 窗口是否已最小化。
win.setFullScreen(flag)
flagboolean
设置窗口是否应处于全屏模式。
在 macOS 上,全屏过渡是异步进行的。如果进一步的操作依赖于全屏状态,请使用 'enter-full-screen' 或 'leave-full-screen' 事件。
win.isFullScreen()
返回 boolean - 窗口是否处于全屏模式。
在 macOS 上,全屏过渡是异步进行的。在查询 BrowserWindow 的全屏状态时,应确保已发出 'enter-full-screen' 或 'leave-full-screen' 事件。
win.setSimpleFullScreen(flag) macOS
flagboolean
进入或退出简单的全屏模式。
简单的全屏模式模拟了 macOS Lion (10.7) 之前的版本中存在的原生全屏行为。
win.isSimpleFullScreen() macOS
返回 boolean - 窗口是否处于简单的(Lion 之前的)全屏模式。
win.isNormal()
返回 boolean - 窗口是否处于正常状态(未最大化、未最小化、未处于全屏模式)。
win.setAspectRatio(aspectRatio[, extraSize])
aspectRatioFloat - 维持内容视图一部分的宽高比。extraSizeSize (可选) macOS - 在维持宽高比时,不包含在内的额外尺寸。
这将使窗口保持一个宽高比。额外的尺寸允许开发者指定像素为单位的空间,不包含在宽高比计算中。此 API 已经考虑了窗口尺寸与其内容尺寸之间的差异。
考虑一个带有高清视频播放器和相关控件的普通窗口。假设左边缘有 15 像素的控件,右边缘有 25 像素的控件,播放器下方有 50 像素的控件。为了在播放器本身内维持 16:9 的宽高比(高清的标准宽高比 @1920x1080),我们将使用 16/9 和 { width: 40, height: 50 } 作为参数调用此函数。第二个参数不关心额外的宽度和高度在内容视图中的位置——只关心它们的存在。将内容视图中所有额外的宽度和高度区域相加。
当窗口使用诸如 win.setSize 之类的 API 以编程方式调整大小时,宽高比不会被尊重。
要重置宽高比,将 0 作为 aspectRatio 值传递:win.setAspectRatio(0)。
win.setBackgroundColor(backgroundColor)
backgroundColorstring - 十六进制、RGB、RGBA、HSL、HSLA 或命名的 CSS 颜色格式的颜色。十六进制类型可以选择性地包含 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
pathstring - 使用 QuickLook 预览文件的绝对路径。这很重要,因为 Quick Look 使用路径中的文件名和文件扩展名来确定要打开的文件的内容类型。displayNamestring (可选) - 在 Quick Look 模态视图上显示的文件的名称。这纯粹是视觉上的,不会影响文件的内容类型。默认值为path。
使用 Quick Look 预览给定路径下的文件。
win.closeFilePreview() macOS
关闭当前打开的 Quick Look 面板。
win.setBounds(bounds[, animate])
boundsPartial<Rectangle>animateboolean (可选) 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 坐标值不能小于 托盘 的高度。托盘高度随时间变化,并且取决于操作系统,但介于 20-40 像素之间。传递的值低于托盘高度会导致窗口与托盘齐平。
win.getBounds()
返回 Rectangle - 窗口的 bounds 作为 Object。
在 macOS 上,返回的 y 坐标值至少是 托盘 的高度。例如,如果托盘高度为 38,调用 win.setBounds({ x: 25, y: 20, width: 800, height: 600 }) 将导致 win.getBounds() 返回 { x: 25, y: 38, width: 800, height: 600 }。
win.getBackgroundColor()
返回 string - 获取窗口的背景颜色,格式为十六进制 (#RRGGBB)。
请参阅 设置 backgroundColor。
alpha 值不与红色、绿色和蓝色值一起返回。
win.setContentBounds(bounds[, animate])
boundsRectangleanimateboolean (可选) macOS
将窗口的客户端区域(例如,网页)调整为提供的边界。
win.getContentBounds()
返回 Rectangle - 窗口客户端区域的 bounds 作为 Object。
win.getNormalBounds()
返回 Rectangle - 包含正常状态下的窗口边界
无论窗口的当前状态如何(最大化、最小化或全屏),此函数始终返回窗口在正常状态下的位置和大小。在正常状态下,getBounds 和 getNormalBounds 返回相同的 Rectangle。
win.setEnabled(enable)
enableboolean
禁用或启用窗口。
win.isEnabled()
返回 boolean - 窗口是否已启用。
win.setSize(width, height[, animate])
widthIntegerheightIntegeranimateboolean (可选) macOS
将窗口调整为 width 和 height。如果 width 或 height 低于任何设置的最小尺寸约束,窗口将调整到其最小尺寸。
win.getSize()
返回 Integer[] - 包含窗口的宽度和高度。
win.setContentSize(width, height[, animate])
widthIntegerheightIntegeranimateboolean (可选) macOS
将窗口的客户端区域(例如,网页)调整为 width 和 height。
win.getContentSize()
返回 Integer[] - 包含窗口客户端区域的宽度和高度。
win.setMinimumSize(width, height)
widthIntegerheightInteger
将窗口的最小尺寸设置为 width 和 height。
win.getMinimumSize()
返回 Integer[] - 包含窗口的最小宽度和高度。
win.setMaximumSize(width, height)
widthIntegerheightInteger
将窗口的最大尺寸设置为 width 和 height。
win.getMaximumSize()
返回 Integer[] - 包含窗口的最大宽度和高度。
win.setResizable(resizable)
resizableboolean
设置窗口是否可以由用户手动调整大小。
win.isResizable()
返回 boolean - 窗口是否可以由用户手动调整大小。
win.setMovable(movable) macOS Windows
movableboolean
设置窗口是否可以被用户移动。在 Linux 上不起作用。
win.isMovable() macOS Windows
返回 boolean - 是否允许用户移动窗口。
在 Linux 上始终返回 true。
win.setMinimizable(minimizable) macOS Windows
minimizableboolean
设置是否允许用户手动最小化窗口。在 Linux 上不起作用。
win.isMinimizable() macOS Windows
返回 boolean - 是否允许用户手动最小化窗口。
在 Linux 上始终返回 true。
win.setMaximizable(maximizable) macOS Windows
maximizableboolean
设置是否允许用户手动最大化窗口。在 Linux 上不起作用。
win.isMaximizable() macOS Windows
返回 boolean - 是否允许用户手动最大化窗口。
在 Linux 上始终返回 true。
win.setFullScreenable(fullscreenable)
fullscreenableboolean
设置最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
win.isFullScreenable()
返回 boolean - 设置最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。
win.setClosable(closable) macOS Windows
closableboolean
设置是否允许用户手动关闭窗口。在 Linux 上不起作用。
win.isClosable() macOS Windows
返回 boolean - 是否允许用户手动关闭窗口。
在 Linux 上始终返回 true。
win.setHiddenInMissionControl(hidden) macOS
hiddenboolean
设置当用户切换到 Mission Control 时窗口是否隐藏。
win.isHiddenInMissionControl() macOS
返回 boolean - 当用户切换到 Mission Control 时窗口是否隐藏。
win.setAlwaysOnTop(flag[, level][, relativeLevel])
flagbooleanlevelstring (可选) macOS Windows - 值包括normal,floating,torn-off-menu,modal-panel,main-menu,status,pop-up-menu,screen-saver,以及(已弃用)。默认值为dockfloating,当flag为 true 时。当flag为 false 时,level会重置为normal。请注意,从floating到status包含,窗口将放置在 macOS 的 Dock 之下和 Windows 的任务栏之下。从pop-up-menu到更高的层级,它将显示在 macOS 的 Dock 之上和 Windows 的任务栏之上。有关更多详细信息,请参阅 macOS 文档。relativeLevelInteger (可选) macOS - 相对于给定的level,设置此窗口更高的层数。默认值为0。请注意,Apple 不建议将层级设置为高于screen-saver1 层级。
设置窗口是否始终显示在其他窗口之上。设置后,窗口仍然是一个普通窗口,而不是无法聚焦的工具箱窗口。
win.isAlwaysOnTop()
返回 boolean - 是否始终显示在其他窗口之上。
win.moveAbove(mediaSourceId)
mediaSourceIdstring - 窗口 ID,格式为 DesktopCapturerSource 的 ID。例如 "window:1869:0"。
将窗口移动到源窗口之上,以 z 顺序为准。如果 mediaSourceId 不是窗口类型或窗口不存在,则此方法会抛出错误。
win.moveTop()
将窗口移动到顶部(z 顺序),无论焦点如何
win.center()
将窗口移动到屏幕中心。
win.setPosition(x, y[, animate])
xIntegeryIntegeranimateboolean (可选) macOS
将窗口移动到 x 和 y。
win.getPosition()
返回 Integer[] - 包含窗口的当前位置。
win.setTitle(title)
titlestring
将本机窗口的标题更改为 title。
win.getTitle()
返回 string - 本机窗口的标题。
网页的标题可能与原生窗口的标题不同。
win.setSheetOffset(offsetY[, offsetX]) macOS
offsetYFloatoffsetXFloat (可选)
更改 macOS 上工作表的附着点。默认情况下,工作表附着在窗口框架下方,但您可能希望在 HTML 渲染的工具栏下方显示它们。例如
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
const toolbarRect = document.getElementById('toolbar').getBoundingClientRect()
win.setSheetOffset(toolbarRect.height)
win.flashFrame(flag)
历史
flagboolean
开始或停止闪烁窗口以吸引用户的注意力。
win.setSkipTaskbar(skip) macOS Windows
skipboolean
使窗口不在任务栏中显示。
win.setKiosk(flag)
flagboolean
进入或退出全屏模式。
win.isKiosk()
返回 boolean - 是否处于全屏模式。
win.isTabletMode() Windows
返回 boolean - 是否处于 Windows 10 平板电脑模式。
由于 Windows 10 用户可以 像平板电脑一样使用他们的电脑,在此模式下,应用程序可以选择优化其 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
messageIntegercallbackFunctionwParamBuffer - 传递给 WndProc 的wParamlParamBuffer - 传递给 WndProc 的lParam
挂钩一个 Windows 消息。当 WndProc 接收到消息时,将调用 callback。
win.isWindowMessageHooked(message) Windows
messageInteger
返回 boolean - true 或 false,具体取决于消息是否已挂钩。
win.unhookWindowMessage(message) Windows
messageInteger
取消挂钩窗口消息。
win.unhookAllWindowMessages() Windows
取消挂钩所有窗口消息。
win.setRepresentedFilename(filename) macOS
filenamestring
设置窗口所代表的文件的路径名,并且文件的图标将显示在窗口的标题栏中。
win.getRepresentedFilename() macOS
返回 string - 窗口所代表的文件的路径名。
win.setDocumentEdited(edited) macOS
edited布尔值
指定窗口的文档是否已被编辑。如果设置为 true,则标题栏中的图标将变为灰色。
win.isDocumentEdited() macOS
返回 布尔值 - 窗口的文档是否已被编辑。
win.focusOnWebView()
win.blurWebView()
win.capturePage([rect, opts])
rect矩形 (可选) - 要捕获的边界opts对象 (可选)stayHidden布尔值 (可选) - 保持页面隐藏而不是可见。默认值为false。stayAwake布尔值 (可选) - 保持系统唤醒而不是允许其休眠。默认值为false。
返回 Promise<NativeImage> - 解析为 NativeImage
捕获 rect 内页面的快照。省略 rect 将捕获整个可见页面。如果页面不可见,rect 可能为空。当其浏览器窗口隐藏且捕获计数非零时,页面被认为是可见的。如果您希望页面保持隐藏状态,则应确保将 stayHidden 设置为 true。
win.loadURL(url[, options])
urlstring
返回 Promise<void> - 当页面完成加载时(请参阅 did-finish-load),promise 将解析,如果页面加载失败(请参阅 did-fail-load),则 promise 将拒绝。已经附加了一个无操作的拒绝处理程序,以避免未处理的拒绝错误。如果现有页面具有 beforeUnload 处理程序,除非处理了 will-prevent-unload,否则将调用 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('node:url').format({
protocol: 'file',
slashes: true,
pathname: require('node:path').join(__dirname, 'index.html')
})
win.loadURL(url)
您可以使用 URL 编码的数据通过 POST 请求加载 URL,如下所示
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.loadURL('https://:8000/post', {
postData: [{
type: 'rawData',
bytes: Buffer.from('hello=world')
}],
extraHeaders: 'Content-Type: application/x-www-form-urlencoded'
})
win.loadFile(filePath[, options])
filePathstring
返回 Promise<void> - 当页面完成加载时(请参阅 did-finish-load),promise 将解析,如果页面加载失败(请参阅 did-fail-load),则 promise 将拒绝。
与 webContents.loadFile 相同,filePath 应该是相对于应用程序根目录的 HTML 文件的路径。有关更多信息,请参阅 webContents 文档。
win.reload()
与 webContents.reload 相同。
win.setMenu(menu) Linux Windows
menuMenu | null
将 menu 设置为窗口的菜单栏。
win.removeMenu() Linux Windows
删除窗口的菜单栏。
win.setProgressBar(progress[, options])
progress双精度数
设置进度条中的进度值。有效范围是 [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
overlayNativeImage | null - 要显示在任务栏图标右下角的图标。如果此参数为null,则清除叠加层description字符串 - 将提供给辅助功能屏幕阅读器的描述
在当前任务栏图标上设置一个 16 x 16 像素的叠加层,通常用于传达某种应用程序状态或被动地通知用户。
win.invalidateShadow() macOS
使窗口阴影失效,以便根据当前窗口形状重新计算。
透明的 BrowserWindows 在 macOS 上有时会留下视觉伪影。当执行动画时,可以使用此方法清除这些伪影。
win.setHasShadow(hasShadow)
hasShadow布尔值
设置窗口是否应该有阴影。
win.hasShadow()
返回 布尔值 - 窗口是否具有阴影。
win.setOpacity(opacity) Windows macOS
opacity数字 - 介于 0.0(完全透明)和 1.0(完全不透明)之间
设置窗口的不透明度。在 Linux 上,不起作用。超出范围的数字值将被限制在 [0, 1] 范围内。
win.getOpacity()
返回 数字 - 介于 0.0(完全透明)和 1.0(完全不透明)之间。在 Linux 上,始终返回 1。
win.setShape(rects) Windows Linux 实验性
rects矩形[] - 设置窗口的形状。传递一个空列表会将窗口恢复为矩形。
设置窗口形状确定系统允许在该窗口内进行绘制和用户交互的区域。在给定的区域之外,不会绘制任何像素,也不会注册任何鼠标事件。区域外的鼠标事件将不会被该窗口接收,而是会传递到窗口背后的内容。
win.setThumbarButtons(buttons) Windows
buttonsThumbarButton[]
返回 布尔值 - 指示是否已成功添加按钮
使用指定的按钮集向任务栏按钮布局中的窗口缩略图图像添加缩略图工具栏。返回一个 布尔值 对象,指示是否已成功添加缩略图。
由于空间有限,缩略图工具栏中的按钮数量不应超过 7 个。设置缩略图工具栏后,由于平台限制,无法删除工具栏。但是,您可以使用空数组调用 API 来清除按钮。
buttons 是一个 Button 对象数组
Button对象iconNativeImage - 在缩略图工具栏中显示的图标。clickFunctiontooltipstring (optional) - 按钮工具提示的文本。flagsstring[] (optional) - 控制按钮的特定状态和行为。默认值为['enabled']。
flags 是一个可以包含以下 string 的数组
enabled- 按钮处于活动状态,可供用户使用。disabled- 按钮已禁用。它存在,但具有视觉状态,表明它不会响应用户操作。dismissonclick- 单击按钮时,缩略图窗口将立即关闭。nobackground- 不绘制按钮边框,仅使用图像。hidden- 按钮不会显示给用户。noninteractive- 按钮已启用但不可交互;不绘制按下按钮状态。此值用于按钮用作通知的情况。
win.setThumbnailClip(region) Windows
regionRectangle - 窗口区域
设置在任务栏中悬停在窗口上时显示的缩略图图像的窗口区域。您可以通过指定一个空区域将缩略图重置为整个窗口:{ x: 0, y: 0, width: 0, height: 0 }。
win.setThumbnailToolTip(toolTip) Windows
toolTipstring
设置在任务栏中悬停在窗口缩略图上时显示的工具提示。
win.setAppDetails(options) Windows
设置窗口任务栏按钮的属性。
relaunchCommand 和 relaunchDisplayName 必须始终一起设置。如果其中一个属性未设置,则两者都不会被使用。
win.setAccentColor(accentColor) Windows
accentColorboolean | string | null - 窗口的强调色。默认情况下,遵循系统设置中的用户偏好。要重置为系统默认值,请传递null。
设置系统强调色和活动窗口边框的突出显示。
accentColor 参数接受以下值
- 颜色字符串 - 类似于
true,但使用标准的 CSS 颜色格式(Hex、RGB、RGBA、HSL、HSLA 或命名颜色)设置自定义强调色。RGBA/HSLA 格式中的 Alpha 值将被忽略,颜色将被视为完全不透明。 true- 启用窗口的强调色突出显示,使用系统强调色,无论系统设置中是否为窗口启用了强调色。false- 禁用窗口的强调色突出显示,无论系统设置中是否当前为窗口启用了强调色。null- 将窗口强调色行为重置为遵循系统设置中设置的行为。
示例
const win = new BrowserWindow({ frame: false })
// Set red accent color.
win.setAccentColor('#ff0000')
// RGB format (alpha ignored if present).
win.setAccentColor('rgba(255,0,0,0.5)')
// Enable accent color, using the color specified in System Settings.
win.setAccentColor(true)
// Disable accent color.
win.setAccentColor(false)
// Reset window accent color behavior to follow behavior set in System Settings.
win.setAccentColor(null)
win.getAccentColor() Windows
返回 string | boolean - 以十六进制 RGB 格式显示的系统强调色和活动窗口边框的突出显示。
如果窗口已设置与系统强调色不同的颜色,则将返回窗口强调色。否则,将返回一个布尔值,其中 true 表示窗口使用全局系统强调色,而 false 表示窗口的强调色突出显示已禁用。
win.showDefinitionForSelection() macOS
与 webContents.showDefinitionForSelection() 相同。
win.setIcon(icon) Windows Linux
iconNativeImage | string
更改窗口图标。
win.setWindowButtonVisibility(visible) macOS
visibleboolean
设置窗口交通信号灯按钮是否可见。
win.setAutoHideMenuBar(hide) Windows Linux
hideboolean
设置窗口菜单栏是否应自动隐藏。设置后,菜单栏仅在用户按下单个 Alt 键时才会显示。
如果菜单栏已可见,调用 setAutoHideMenuBar(true) 不会立即隐藏它。
win.isMenuBarAutoHide() Windows Linux
返回 boolean - 菜单栏是否自动隐藏。
win.setMenuBarVisibility(visible) Windows Linux
visibleboolean
设置菜单栏是否应可见。如果菜单栏是自动隐藏的,用户仍然可以通过按下单个 Alt 键来调出菜单栏。
win.isMenuBarVisible() Windows Linux
返回 boolean - 菜单栏是否可见。
win.isSnapped() Windows
返回 boolean - 窗口是否通过 Snap 方式排列。
窗口通过将鼠标悬停在窗口最大化按钮上显示的按钮或将其拖动到屏幕边缘来 Snap。
win.setVisibleOnAllWorkspaces(visible[, options]) macOS Linux
visibleboolean
设置窗口是否应在所有工作区中可见。
此 API 在 Windows 上不起作用。
win.isVisibleOnAllWorkspaces() macOS Linux
返回 boolean - 窗口是否在所有工作区中可见。
此 API 始终在 Windows 上返回 false。
win.setIgnoreMouseEvents(ignore[, options])
ignoreboolean
使窗口忽略所有鼠标事件。
此窗口发生的所有鼠标事件都将传递到此窗口下方的窗口,但如果此窗口具有焦点,它仍然会接收键盘事件。
win.setContentProtection(enable) macOS Windows
enableboolean
防止其他应用程序捕获窗口内容。
在 Windows 上,它调用 SetWindowDisplayAffinity 并使用 WDA_EXCLUDEFROMCAPTURE。对于 Windows 10 版本 2004 及更高版本,窗口将完全从捕获中删除,旧版本的 Windows 的行为就像应用了 WDA_MONITOR,捕获一个黑色窗口。
在 macOS 上,它将 NSWindow 的 sharingType 设置为 NSWindowSharingNone。不幸的是,由于 macOS 中有意的更改,使用 ScreenCaptureKit 的较新的 Mac 应用程序即使在 win.setContentProtection(true) 的情况下也会捕获您的窗口。请参阅 此处。
win.isContentProtected() macOS Windows
返回 boolean - 内容保护是否当前启用。
win.setFocusable(focusable) macOS Windows
focusableboolean
更改窗口是否可以获得焦点。
在 macOS 上,它不会从窗口中移除焦点。
win.isFocusable() macOS Windows
返回 boolean - 窗口是否可以获得焦点。
win.setParentWindow(parent)
parentBrowserWindow | 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
browserWindowBrowserWindow
将窗口作为此窗口上的标签页添加,位于窗口实例的标签页之后。
win.setVibrancy(type[, options]) macOS
type字符串 | null - 可以是titlebar、selection、menu、popover、sidebar、header、sheet、window、hud、fullscreen-ui、tooltip、content、under-window或under-page。有关更多详细信息,请参阅 macOS 文档。
为浏览器窗口添加 vibrancy 效果。传递 null 或空字符串将删除窗口上的 vibrancy 效果。animationDuration 参数仅对 vibrancy 效果的淡入或淡出进行动画处理。不支持在不同类型的 vibrancy 之间进行动画处理。
win.setBackgroundMaterial(material) Windows
material字符串auto- 让桌面窗口管理器 (DWM) 自动决定此窗口的系统绘制背景材质。这是默认设置。none- 不绘制任何系统背景。mica- 绘制对应于持久窗口的背景材质效果。acrylic- 绘制对应于临时窗口的背景材质效果。tabbed- 绘制对应于带有标签标题栏的窗口的背景材质效果。
此方法设置浏览器窗口的系统绘制背景材质,包括非客户端区域之后。
有关更多详细信息,请参阅 Windows 文档。
此方法仅受 Windows 11 22H2 及更高版本支持。
win.setWindowButtonPosition(position) macOS
positionPoint | null
为无边框窗口设置交通灯按钮的自定义位置。传递 null 将把位置重置为默认值。
win.getWindowButtonPosition() macOS
返回 Point | null - 无边框窗口中交通灯按钮的自定义位置,如果没有自定义位置则返回 null。
win.setTouchBar(touchBar) macOS
touchBarTouchBar | null
设置当前窗口的触控栏布局。指定 null 或 undefined 将清除触控栏。只有机器具有触控栏时,此方法才有效。
TouchBar API 目前仍处于实验阶段,在未来的 Electron 版本中可能会发生更改或被移除。
win.setBrowserView(browserView) 实验性 已弃用
browserViewBrowserView | null - 将browserView附加到win。如果有其他BrowserView附加,它们将从该窗口中删除。
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
win.getBrowserView() 实验性 已弃用
返回 BrowserView | null - 附加到 win 的 BrowserView。如果没有附加,则返回 null。如果附加了多个 BrowserView,则会引发错误。
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
win.addBrowserView(browserView) 实验性 已弃用
browserViewBrowserView
支持使用多个浏览器视图的 setBrowserView 的替代 API。
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
win.removeBrowserView(browserView) 实验性 已弃用
browserViewBrowserView
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
win.setTopBrowserView(browserView) 实验性 已弃用
browserViewBrowserView
将 browserView 提升到附加到 win 的其他 BrowserView 之上。如果 browserView 未附加到 win,则会引发错误。
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
win.getBrowserViews() 实验性 已弃用
返回 BrowserView[] - 按 z 索引排序的数组,其中包含使用 addBrowserView 或 setBrowserView 附加的所有 BrowserView。最顶层的 BrowserView 是数组的最后一个元素。
BrowserView 类已弃用,并由新的 WebContentsView 类取代。
win.setTitleBarOverlay(options) Windows Linux
在已经启用窗口控件叠加的窗口上,此方法更新标题栏叠加的样式。
在 Linux 上,如果未显式设置,则 symbolColor 会自动计算为与 color 具有最小可访问对比度的颜色。