跳至主要内容

BaseWindow

创建和控制窗口。

进程:主进程

注意 BaseWindow 提供了一种灵活的方式在一个窗口中组合多个网页视图。对于只有一个全尺寸网页视图的窗口,BrowserWindow 类可能是一个更简单的选择。

app 模块发出 ready 事件之前,无法使用此模块。

// In the main process.
const { BaseWindow, WebContentsView } = require('electron')

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

const leftView = new WebContentsView()
leftView.webContents.loadURL('https://www.electron.js.cn')
win.contentView.addChildView(leftView)

const rightView = new WebContentsView()
rightView.webContents.loadURL('https://github.com/electron/electron')
win.contentView.addChildView(rightView)

leftView.setBounds({ x: 0, y: 0, width: 400, height: 600 })
rightView.setBounds({ x: 400, y: 0, width: 400, height: 600 })

父窗口和子窗口

通过使用 parent 选项,您可以创建子窗口

const { BaseWindow } = require('electron')

const parent = new BaseWindow()
const child = new BaseWindow({ parent })

child 窗口将始终显示在 parent 窗口之上。

模态窗口是一个禁用父窗口的子窗口。要创建模态窗口,您必须同时设置 parentmodal 选项

const { BaseWindow } = require('electron')

const parent = new BaseWindow()
const child = new BaseWindow({ parent, modal: true })

平台说明

  • 在 macOS 上,模态窗口将显示为附加到父窗口的表单。
  • 在 macOS 上,当父窗口移动时,子窗口将保持相对于父窗口的相对位置,而在 Windows 和 Linux 上,子窗口不会移动。
  • 在 Linux 上,模态窗口的类型将更改为 dialog
  • 在 Linux 上,许多桌面环境不支持隐藏模态窗口。

类:BaseWindow

创建和控制窗口。

进程:主进程

BaseWindow 是一个 EventEmitter

它使用 options 中设置的本机属性创建一个新的 BaseWindow

new BaseWindow([options])

  • options BaseWindowConstructorOptions(可选)
    • width 整数(可选) - 窗口的宽度(以像素为单位)。默认值为 800
    • height 整数(可选) - 窗口的高度(以像素为单位)。默认值为 600
    • x 整数(可选) - (如果使用 y 则必需)窗口相对于屏幕的左侧偏移量。默认值为将窗口居中。
    • y 整数(可选) - (如果使用 x 则必需)窗口相对于屏幕的顶部偏移量。默认值为将窗口居中。
    • useContentSize 布尔值(可选) - widthheight 将用作网页的大小,这意味着实际窗口的大小将包括窗口框架的大小,并且会稍微大一些。默认值为 false
    • center 布尔值(可选) - 在屏幕中央显示窗口。默认值为 false
    • minWidth 整数(可选) - 窗口的最小宽度。默认值为 0
    • minHeight 整数(可选) - 窗口的最小高度。默认值为 0
    • maxWidth 整数(可选) - 窗口的最大宽度。默认值为无限制。
    • maxHeight 整数(可选) - 窗口的最大高度。默认值为无限制。
    • resizable 布尔值(可选) - 窗口是否可调整大小。默认值为 true
    • movable 布尔值(可选) macOS Windows - 窗口是否可移动。这在 Linux 上未实现。默认值为 true
    • minimizable 布尔值(可选) macOS Windows - 窗口是否可最小化。这在 Linux 上未实现。默认值为 true
    • maximizable 布尔值(可选) macOS Windows - 窗口是否可最大化。这在 Linux 上未实现。默认值为 true
    • closable 布尔值(可选) macOS Windows - 窗口是否可关闭。这在 Linux 上未实现。默认值为 true
    • focusable 布尔值(可选) - 窗口是否可以获得焦点。默认值为 true。在 Windows 上,设置 focusable: false 也意味着设置 skipTaskbar: true。在 Linux 上,设置 focusable: false 使窗口停止与 wm 交互,因此窗口将始终停留在所有工作区的顶部。
    • alwaysOnTop 布尔值(可选) - 窗口是否应始终位于其他窗口的顶部。默认值为 false
    • fullscreen 布尔值(可选) - 窗口是否应以全屏显示。当显式设置为 false 时,全屏按钮将在 macOS 上隐藏或禁用。默认值为 false
    • fullscreenable 布尔值(可选) - 窗口是否可以进入全屏模式。在 macOS 上,还包括最大化/缩放按钮是否应切换全屏模式或最大化窗口。默认值为 true
    • simpleFullscreen 布尔值(可选) macOS - 在 macOS 上使用 Lion 之前的全屏模式。默认值为 false
    • skipTaskbar 布尔值(可选) macOS Windows - 是否在任务栏中显示窗口。默认值为 false
    • hiddenInMissionControl 布尔值(可选) macOS - 用户切换到 Mission Control 时窗口是否应隐藏。
    • kiosk 布尔值(可选) - 窗口是否处于 Kiosk 模式。默认值为 false
    • title 字符串(可选) - 默认窗口标题。默认值为 "Electron"。如果在 loadURL() 加载的 HTML 文件中定义了 HTML 标签 <title>,则此属性将被忽略。
    • iconNativeImage | 字符串)(可选) - 窗口图标。在 Windows 上,建议使用 ICO 图标以获得最佳视觉效果,您也可以将其保留为未定义,以便使用可执行文件的图标。
    • show 布尔值(可选) - 创建时窗口是否应显示。默认值为 true
    • frame 布尔值(可选) - 指定 false 以创建 无边框窗口。默认值为 true
    • parent BaseWindow(可选) - 指定父窗口。默认值为 null
    • modal 布尔值(可选) - 这是否为模态窗口。这只在窗口是子窗口时有效。默认值为 false
    • acceptFirstMouse 布尔值(可选) macOS - 单击非活动窗口是否也会单击到网页内容。在 macOS 上默认为 false。此选项在其他平台上不可配置。
    • disableAutoHideCursor 布尔值(可选) - 打字时是否隐藏光标。默认值为 false
    • autoHideMenuBar 布尔值(可选) - 自动隐藏菜单栏,除非按下 Alt 键。默认值为 false
    • enableLargerThanScreen 布尔值(可选) macOS - 使窗口可以调整到比屏幕更大的尺寸。仅适用于 macOS,因为其他操作系统默认允许大于屏幕的窗口。默认值为 false
    • backgroundColor 字符串(可选) - 窗口的十六进制、RGB、RGBA、HSL、HSLA 或命名 CSS 颜色格式的背景颜色。如果 transparent 设置为 true,则支持 #AARRGGBB 格式的 Alpha。默认值为 #FFF(白色)。有关更多信息,请参阅 win.setBackgroundColor
    • hasShadow 布尔值(可选) - 窗口是否应有阴影。默认值为 true
    • opacity 数字(可选) macOS Windows - 设置窗口的初始不透明度,介于 0.0(完全透明)和 1.0(完全不透明)之间。这仅在 Windows 和 macOS 上实现。
    • darkTheme 布尔值(可选) - 强制对窗口使用深色主题,仅适用于某些 GTK+3 桌面环境。默认值为 false
    • transparent 布尔值(可选) - 使窗口 透明。默认值为 false。在 Windows 上,除非窗口无边框,否则不起作用。
    • type 字符串(可选) - 窗口的类型,默认为普通窗口。请参阅下面有关此内容的更多信息。
    • visualEffectState 字符串(可选) macOS - 指定材质外观应如何反映 macOS 上的窗口活动状态。必须与 vibrancy 属性一起使用。可能的值为
      • followWindow - 当窗口处于活动状态时,背景应自动显示为活动状态,而当窗口不处于活动状态时,背景应显示为非活动状态。这是默认值。
      • active - 背景应始终显示为活动状态。
      • inactive - 背景应始终显示为非活动状态。
    • titleBarStyle 字符串(可选) - 窗口标题栏的样式。默认为 default。可能的值为
      • default - 分别生成 macOS 或 Windows 的标准标题栏。
      • hidden - 生成隐藏的标题栏和全尺寸内容窗口。在 macOS 上,窗口在左上角仍然具有标准的窗口控件(“交通灯”)。在 Windows 和 Linux 上,当与 titleBarOverlay: true 结合使用时,它将激活窗口控件叠加层(有关更多信息,请参阅 titleBarOverlay),否则将不显示任何窗口控件。
      • hiddenInset macOS - 隐藏标题栏并使用替代外观,其中交通灯按钮稍微内缩窗口边缘。
      • customButtonsOnHover macOS - 隐藏标题栏并显示全尺寸内容窗口,交通灯按钮在窗口左上角悬停时显示。**注意:**此选项目前处于实验阶段。
    • titleBarOverlay 对象 | 布尔值(可选) - 在 macOS 上与 win.setWindowButtonVisibility(true) 结合使用无边框窗口或使用 titleBarStyle 使标准窗口控件(macOS 上的“交通灯”)可见时,此属性启用窗口控件叠加 JavaScript APICSS 环境变量。指定 true 将导致使用默认系统颜色的叠加层。默认值为 false
      • color 字符串(可选) Windows Linux - 启用窗口控件叠加层的 CSS 颜色。默认为系统颜色。
      • symbolColor 字符串(可选) Windows - 启用窗口控件叠加层上符号的 CSS 颜色。默认为系统颜色。
      • height 整数(可选) - 标题栏和窗口控件叠加层的高度(以像素为单位)。默认为系统高度。
    • trafficLightPosition Point(可选) macOS - 为无边框窗口中的交通灯按钮设置自定义位置。
    • roundedCorners 布尔值(可选) macOS - 无边框窗口在 macOS 上是否应具有圆角。默认为 true。将此属性设置为 false 将阻止窗口进入全屏状态。
    • thickFrame 布尔值(可选) - 在 Windows 上的无边框窗口上使用 WS_THICKFRAME 样式,这会添加标准窗口框架。将其设置为 false 将删除窗口阴影和窗口动画。默认为 true
    • vibrancy 字符串(可选) macOS - 向窗口添加一种活力效果,仅在 macOS 上。可以是 appearance-basedtitlebarselectionmenupopoversidebarheadersheetwindowhudfullscreen-uitooltipcontentunder-windowunder-page
    • backgroundMaterial 字符串(可选) Windows - 设置窗口的系统绘制背景材质,包括非客户区后面。可以是 autononemicaacrylictabbed。有关更多信息,请参阅 win.setBackgroundMaterial
    • zoomToPageWidth 布尔值(可选) macOS - 控制 macOS 上在工具栏上 Option 单击绿色停止灯按钮或单击窗口 > 放大菜单项时的行为。如果为 true,则窗口在放大时会增长到网页的首选宽度,false 将使其放大到屏幕宽度。这也会影响直接调用 maximize() 时的行为。默认为 false
    • tabbingIdentifier 字符串(可选) macOS - 选项卡组名称,允许将窗口作为原生选项卡打开。具有相同选项卡标识符的窗口将组合在一起。这还会向窗口的选项卡栏添加一个本机的新选项卡按钮,并允许您的 app 和窗口接收 new-window-for-tab 事件。

当使用 minWidth/maxWidth/ minHeight/maxHeight 设置最小或最大窗口大小时,它只会约束用户。它不会阻止您将不符合大小约束的大小传递给 setBounds/setSizeBrowserWindow 的构造函数。

type 选项的可能值和行为取决于平台。可能的值为

  • 在 Linux 上,可能的类型为 desktopdocktoolbarsplashnotification
    • desktop 类型将窗口置于桌面背景窗口级别 (kCGDesktopWindowLevel - 1)。但是,请注意,桌面窗口不会接收焦点、键盘或鼠标事件。您仍然可以使用 globalShortcut 谨慎地接收输入。
    • dock 类型创建类似码头的窗口行为。
    • toolbar 类型创建具有工具栏外观的窗口。
    • splash 类型的行为方式特殊。即使窗口主体 CSS 样式包含 -webkit-app-region: drag,它也无法拖动。此类型通常用于启动画面。
    • notification 类型创建的行为类似于系统通知的窗口。
  • 在 macOS 上,可能的类型为 desktoptexturedpanel
    • textured 类型添加金属渐变外观 (NSWindowStyleMaskTexturedBackground)。
    • desktop 类型将窗口置于桌面背景窗口级别 (kCGDesktopWindowLevel - 1)。请注意,桌面窗口不会接收焦点、键盘或鼠标事件,但您可以使用 globalShortcut 谨慎地接收输入。
    • panel 类型通过在运行时添加 NSWindowStyleMaskNonactivatingPanel 样式掩码(通常保留给 NSPanel)来使窗口能够浮动在全屏应用程序的顶部。此外,窗口将显示在所有空间(桌面)上。
  • 在 Windows 上,可能的类型为 toolbar

实例事件

使用 new BaseWindow 创建的对象会发出以下事件

**注意:**某些事件仅在特定操作系统上可用,并已标注。

事件:'close'

返回值

  • event 事件

当窗口即将关闭时发出。它在 DOM 的 beforeunloadunload 事件之前发出。调用 event.preventDefault() 将取消关闭。

通常,您希望使用 beforeunload 处理程序来决定是否应关闭窗口,这也会在窗口重新加载时被调用。在 Electron 中,返回除 undefined 之外的任何值都会取消关闭。例如

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

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

**注意**:window.onbeforeunload = handlerwindow.addEventListener('beforeunload', handler) 的行为之间存在细微差别。建议始终显式设置 event.returnValue,而不是仅返回值,因为前者在 Electron 中的工作方式更一致。

事件:'closed'

当窗口关闭时发出。收到此事件后,您应删除对窗口的引用,并避免进一步使用它。

事件:'session-end' Windows

当窗口会话由于强制关闭或机器重启或会话注销而即将结束时发出。

事件:'blur'

当窗口失去焦点时发出。

事件:'focus'

当窗口获得焦点时发出。

事件:'show'

当窗口显示时发出。

事件:'hide'

当窗口隐藏时发出。

事件:'maximize'

当窗口最大化时发出。

事件:'unmaximize'

当窗口退出最大化状态时发出。

事件:'minimize'

当窗口最小化时发出。

事件:'restore'

当窗口从最小化状态恢复时发出。

事件:'will-resize' macOS Windows

返回值

  • event 事件
  • newBounds Rectangle - 窗口正在调整为的大小。
  • details 对象
    • edge(字符串) - 正在拖动以调整大小的窗口边缘。可以是 bottomleftrighttop-lefttop-rightbottom-leftbottom-right

在窗口调整大小之前发出。调用 event.preventDefault() 将阻止窗口调整大小。

请注意,这仅在手动调整窗口大小时发出。使用 setBounds/setSize 调整窗口大小不会发出此事件。

edge 选项的可能值和行为取决于平台。可能的值为

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

事件:'resize'

窗口调整大小后发出。

事件:'resized' macOS Windows

窗口调整大小完成后发出一次。

这通常在手动调整窗口大小时发出。在 macOS 上,使用 setBounds/setSize 调整窗口大小并将 animate 参数设置为 true 也会在调整大小完成后发出此事件一次。

事件:'will-move' macOS Windows

返回值

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

在窗口移动之前发出。在 Windows 上,调用 event.preventDefault() 将阻止窗口移动。

请注意,这仅在手动移动窗口时发出。使用 setPosition/setBounds/center 移动窗口不会发出此事件。

事件:'move'

当窗口正在移动到新位置时发出。

事件:'moved' macOS Windows

窗口移动到新位置后发出一次。

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

事件:'enter-full-screen'

当窗口进入全屏状态时发出。

事件:'leave-full-screen'

当窗口退出全屏状态时发出。

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

返回值

  • event 事件
  • isAlwaysOnTop 布尔值

当窗口设置为始终显示在其他窗口之上或取消此设置时发出。

事件: 'app-command' Windows Linux

返回值

  • event 事件
  • command 字符串

当调用应用程序命令时发出。这些通常与键盘媒体键或浏览器命令相关,以及 Windows 上某些鼠标内置的“后退”按钮。

命令小写,下划线替换为连字符,并去除 APPCOMMAND_ 前缀。例如,APPCOMMAND_BROWSER_BACKWARD 将发出为 browser-backward

const { BaseWindow } = require('electron')
const win = new BaseWindow()
win.on('app-command', (e, cmd) => {
// Navigate the window back when the user hits their mouse back button
if (cmd === 'browser-backward') {
// Find the appropriate WebContents to navigate.
}
})

以下应用程序命令在 Linux 上明确支持

  • browser-backward
  • browser-forward

事件: 'swipe' macOS

返回值

  • event 事件
  • direction 字符串

在三指滑动时发出。可能的滑动方向为 uprightdownleft

此事件底层的方法旨在处理旧版 macOS 样式的触控板滑动,其中屏幕上的内容不会随着滑动而移动。大多数 macOS 触控板不再配置为允许这种类型的滑动,因此为了使其正确发出,必须将 系统偏好设置 > 触控板 > 更多手势 中的“在页面间滑动”首选项设置为“用两根或三根手指滑动”。

事件: 'rotate-gesture' macOS

返回值

  • event 事件
  • rotation 浮点数

在触控板旋转手势时发出。持续发出,直到旋转手势结束。每次发出时的 rotation 值是从上次发出以来旋转的角度(以度为单位)。旋转手势结束时发出的最后一个事件的值始终为 0。逆时针旋转值为正,顺时针旋转值为负。

事件: 'sheet-begin' macOS

当窗口打开一个表单时发出。

事件: 'sheet-end' macOS

当窗口关闭一个表单时发出。

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

当点击原生新建标签按钮时发出。

事件: 'system-context-menu' Windows

返回值

  • event 事件
  • point Point - 上下文菜单触发的屏幕坐标

当系统上下文菜单在窗口上触发时发出,这通常仅在用户右键单击窗口的非客户端区域时触发。这是窗口标题栏或您在无边框窗口中声明为 -webkit-app-region: drag 的任何区域。

调用 event.preventDefault() 将阻止菜单显示。

静态方法

BaseWindow 类具有以下静态方法

BaseWindow.getAllWindows()

返回 BaseWindow[] - 所有打开的浏览器窗口的数组。

BaseWindow.getFocusedWindow()

返回 BaseWindow | null - 此应用程序中获得焦点的窗口,否则返回 null

BaseWindow.fromId(id)

  • id 整数

返回 BaseWindow | null - 具有给定 id 的窗口。

实例属性

使用 new BaseWindow 创建的对象具有以下属性

const { BaseWindow } = require('electron')
// In this example `win` is our instance
const win = new BaseWindow({ width: 800, height: 600 })

win.id 只读

表示窗口唯一 ID 的 整数 属性。每个 ID 在整个 Electron 应用程序的所有 BaseWindow 实例中都是唯一的。

win.contentView

窗口内容视图的 View 属性。

win.tabbingIdentifier macOS 只读

一个 字符串(可选)属性,等于传递给 BrowserWindow 构造函数的 tabbingIdentifier,如果未设置,则为 undefined

win.autoHideMenuBar

一个 布尔值 属性,用于确定窗口菜单栏是否应自动隐藏自身。设置后,菜单栏仅在用户按下单个 Alt 键时显示。

如果菜单栏已可见,则将此属性设置为 true 不会立即隐藏它。

win.simpleFullScreen

一个 布尔值 属性,用于确定窗口是否处于简单的(Lion 之前的)全屏模式。

win.fullScreen

一个 布尔值 属性,用于确定窗口是否处于全屏模式。

win.focusable Windows macOS

一个 布尔值 属性,用于确定窗口是否可聚焦。

win.visibleOnAllWorkspaces macOS Linux

一个 布尔值 属性,用于确定窗口是否在所有工作区中可见。

注意:在 Windows 上始终返回 false。

win.shadow

一个 布尔值 属性,用于确定窗口是否具有阴影。

win.menuBarVisible Windows Linux

一个 布尔值 属性,用于确定菜单栏是否应可见。

注意:如果菜单栏是自动隐藏的,用户仍然可以通过按下单个 Alt 键调出菜单栏。

win.kiosk

一个 布尔值 属性,用于确定窗口是否处于 Kiosk 模式。

win.documentEdited macOS

一个 布尔值 属性,用于指定窗口的文档是否已编辑。

设置为 true 时,标题栏中的图标将变为灰色。

win.representedFilename macOS

一个 字符串 属性,用于确定窗口表示的文件的路径名,并且文件图标将显示在窗口的标题栏中。

win.title

一个 字符串 属性,用于确定原生窗口的标题。

注意:网页的标题可能与原生窗口的标题不同。

win.minimizable macOS Windows

一个 布尔值 属性,用于确定窗口是否可以由用户手动最小化。

在 Linux 上,设置器是无操作的,尽管获取器返回 true

win.maximizable macOS Windows

一个 布尔值 属性,用于确定窗口是否可以由用户手动最大化。

在 Linux 上,设置器是无操作的,尽管获取器返回 true

win.fullScreenable

一个 布尔值 属性,用于确定最大化/缩放窗口按钮是切换全屏模式还是最大化窗口。

win.resizable

一个 布尔值 属性,用于确定窗口是否可以由用户手动调整大小。

win.closable macOS Windows

一个 布尔值 属性,用于确定窗口是否可以由用户手动关闭。

在 Linux 上,设置器是无操作的,尽管获取器返回 true

win.movable macOS Windows

一个 布尔值 属性,用于确定窗口是否可以由用户移动。

在 Linux 上,设置器是无操作的,尽管获取器返回 true

win.excludedFromShownWindowsMenu macOS

一个 布尔值 属性,用于确定窗口是否从应用程序的“窗口”菜单中排除。默认为 false

const { Menu, BaseWindow } = require('electron')
const win = new BaseWindow({ height: 600, width: 600 })

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

win.excludedFromShownWindowsMenu = true

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

win.accessibleTitle

一个 字符串 属性,用于定义仅提供给辅助工具(如屏幕阅读器)的备用标题。此字符串对用户不可见。

实例方法

使用 new BaseWindow 创建的对象具有以下实例方法

注意:某些方法仅在特定操作系统上可用,并已相应标记。

win.setContentView(view)

设置窗口的内容视图。

win.getContentView()

返回 View - 窗口的内容视图。

win.destroy()

强制关闭窗口,不会触发网页的unloadbeforeunload 事件,也不会触发该窗口的 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)

  • flag boolean

设置窗口是否应处于全屏模式。

注意:在 macOS 上,全屏转换是异步进行的。如果后续操作依赖于全屏状态,请使用 'enter-full-screen''leave-full-screen' 事件。

win.isFullScreen()

返回 boolean - 窗口是否处于全屏模式。

win.setSimpleFullScreen(flag) macOS

  • flag boolean

进入或退出简单全屏模式。

简单全屏模式模拟了 macOS Lion(10.7)之前版本中发现的原生全屏行为。

win.isSimpleFullScreen() macOS

返回 boolean - 窗口是否处于简单(Lion 之前版本)全屏模式。

win.isNormal()

返回 boolean - 窗口是否处于正常状态(未最大化、未最小化、未处于全屏模式)。

win.setAspectRatio(aspectRatio[, extraSize])

  • aspectRatio Float - 要为内容视图的一部分保持的纵横比。
  • extraSize Size(可选)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)

  • backgroundColor string - 十六进制、RGB、RGBA、HSL、HSLA 或命名 CSS 颜色格式的颜色。对于十六进制类型,alpha 通道是可选的。

有效的 backgroundColor 值示例

  • 十六进制
    • #fff(RGB 简写)
    • #ffff(ARGB 简写)
    • #ffffff(RGB)
    • #ffffffff(ARGB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • 例如 rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • 例如 rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • 例如 hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • 例如 hsla(200, 20%, 50%, 0.5)
  • 颜色名称
    • 选项列在 SkParseColor.cpp
    • 类似于 CSS 颜色模块级别 3 关键字,但区分大小写。
      • 例如 bluevioletred

设置窗口的背景颜色。参见 设置 backgroundColor

win.previewFile(path[, displayName]) macOS

  • path string - 使用 QuickLook 预览的文件的绝对路径。这很重要,因为 Quick Look 使用路径上的文件名和文件扩展名来确定要打开的文件的内容类型。
  • displayName string(可选) - 在 Quick Look 模态视图中显示的文件名。这纯粹是视觉上的,不影响文件的内容类型。默认为 path

使用 Quick Look 预览给定路径下的文件。

win.closeFilePreview() macOS

关闭当前打开的 Quick Look 面板。

win.setBounds(bounds[, animate])

  • bounds Partial<Rectangle>
  • animate boolean(可选)macOS

将窗口调整大小并移动到提供的边界。未提供的任何属性将默认为其当前值。

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

// 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-40px 之间。传递小于托盘高度的值会导致窗口与托盘齐平。

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])

  • bounds Rectangle
  • animate boolean(可选)macOS

将窗口的客户端区域(例如网页)调整大小并移动到提供的边界。

win.getContentBounds()

返回 Rectangle - 窗口客户端区域的 bounds 作为 Object

win.getNormalBounds()

返回 Rectangle - 包含正常状态下的窗口边界

注意:无论窗口的当前状态如何:最大化、最小化或全屏,此函数始终返回窗口在正常状态下的位置和大小。在正常状态下,getBounds 和 getNormalBounds 返回相同的 Rectangle

win.setEnabled(enable)

  • enable boolean

禁用或启用窗口。

win.isEnabled()

返回 boolean - 窗口是否已启用。

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

  • width Integer
  • height Integer
  • animate boolean(可选)macOS

将窗口大小调整为widthheight。如果widthheight低于任何设置的最小尺寸约束,则窗口将捕捉到其最小尺寸。

win.getSize()

返回Integer[] - 包含窗口的宽度和高度。

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

  • width Integer
  • height Integer
  • animate boolean(可选)macOS

将窗口的客户区(例如网页)大小调整为widthheight

win.getContentSize()

返回Integer[] - 包含窗口客户区的宽度和高度。

win.setMinimumSize(width, height)

  • width Integer
  • height Integer

将窗口的最小尺寸设置为widthheight

win.getMinimumSize()

返回Integer[] - 包含窗口的最小宽度和高度。

win.setMaximumSize(width, height)

  • width Integer
  • height Integer

将窗口的最大尺寸设置为widthheight

win.getMaximumSize()

返回Integer[] - 包含窗口的最大宽度和高度。

win.setResizable(resizable)

  • resizable 布尔值

设置用户是否可以手动调整窗口大小。

win.isResizable()

返回boolean - 用户是否可以手动调整窗口大小。

win.setMovable(movable) macOS Windows

  • movable 布尔值

设置用户是否可以移动窗口。在 Linux 上不起作用。

win.isMovable() macOS Windows

返回boolean - 用户是否可以移动窗口。

在 Linux 上始终返回true

win.setMinimizable(minimizable) macOS Windows

  • minimizable 布尔值

设置用户是否可以手动最小化窗口。在 Linux 上不起作用。

win.isMinimizable() macOS Windows

返回boolean - 用户是否可以手动最小化窗口。

在 Linux 上始终返回true

win.setMaximizable(maximizable) macOS Windows

  • maximizable 布尔值

设置用户是否可以手动最大化窗口。在 Linux 上不起作用。

win.isMaximizable() macOS Windows

返回boolean - 用户是否可以手动最大化窗口。

在 Linux 上始终返回true

win.setFullScreenable(fullscreenable)

  • fullscreenable 布尔值

设置最大化/缩放窗口按钮是否切换全屏模式或最大化窗口。

win.isFullScreenable()

返回boolean - 最大化/缩放窗口按钮是否切换全屏模式或最大化窗口。

win.setClosable(closable) macOS Windows

  • closable 布尔值

设置用户是否可以手动关闭窗口。在 Linux 上不起作用。

win.isClosable() macOS Windows

返回boolean - 用户是否可以手动关闭窗口。

在 Linux 上始终返回true

win.setHiddenInMissionControl(hidden) macOS

  • hidden 布尔值

设置用户切换到 Mission Control 时窗口是否隐藏。

win.isHiddenInMissionControl() macOS

返回boolean - 用户切换到 Mission Control 时窗口是否隐藏。

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

  • flag boolean
  • level 字符串(可选) macOS Windows - 值包括normalfloatingtorn-off-menumodal-panelmain-menustatuspop-up-menuscreen-saverdock(已弃用)。当flag为真时,默认为floating。当flag为假时,level重置为normal。请注意,从floatingstatus(含),窗口在 macOS 上放置在 Dock 下方,在 Windows 上放置在任务栏下方。从pop-up-menu到更高的级别,它在 macOS 上显示在 Dock 上方,在 Windows 上显示在任务栏上方。有关更多详细信息,请参阅macOS 文档
  • relativeLevel 整数(可选) macOS - 相对于给定level设置此窗口的层数。默认为0。请注意,Apple 不建议在screen-saver之上设置高于 1 的级别。

设置窗口是否应始终显示在其他窗口的顶部。设置此选项后,窗口仍然是普通窗口,而不是无法聚焦的工具箱窗口。

win.isAlwaysOnTop()

返回boolean - 窗口是否始终位于其他窗口的顶部。

win.moveAbove(mediaSourceId)

  • mediaSourceId 字符串 - DesktopCapturerSource ID 格式的窗口 ID。例如“window:1869:0”。

在 z 轴顺序上将窗口移动到源窗口上方。如果mediaSourceId不是窗口类型,或者窗口不存在,则此方法会抛出错误。

win.moveTop()

将窗口移动到顶部(z 轴顺序),无论焦点如何。

win.center()

将窗口移动到屏幕中央。

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

  • x 整数
  • y 整数
  • animate boolean(可选)macOS

将窗口移动到xy

win.getPosition()

返回Integer[] - 包含窗口的当前位置。

win.setTitle(title)

  • title 字符串

将原生窗口的标题更改为title

win.getTitle()

返回string - 原生窗口的标题。

注意:网页的标题可能与原生窗口的标题不同。

win.setSheetOffset(offsetY[, offsetX]) macOS

  • offsetY 浮点数
  • offsetX 浮点数(可选)

更改 macOS 上工作表的附着点。默认情况下,工作表附着在窗口框架正下方,但您可能希望将其显示在 HTML 渲染的工具栏下方。例如

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

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

win.flashFrame(flag)

历史记录
  • flag boolean

开始或停止闪烁窗口以吸引用户的注意力。

win.setSkipTaskbar(skip) macOS Windows

  • skip 布尔值

使窗口不显示在任务栏中。

win.setKiosk(flag)

  • flag boolean

进入或退出 Kiosk 模式。

win.isKiosk()

返回boolean - 窗口是否处于 Kiosk 模式。

win.isTabletMode() Windows

返回boolean - 窗口是否处于 Windows 10 平板电脑模式。

由于 Windows 10 用户可以将他们的电脑用作平板电脑,在此模式下,应用程序可以选择优化其针对平板电脑的 UI,例如放大标题栏并隐藏标题栏按钮。

此 API 返回窗口是否处于平板电脑模式,并且可以使用resize事件来监听平板电脑模式的更改。

win.getMediaSourceId()

返回string - DesktopCapturerSource ID 格式的窗口 ID。例如“window:1324:0”。

更准确地说,格式为window:id:other_id,其中id在 Windows 上为HWND,在 macOS 上为CGWindowIDuint64_t),在 Linux 上为Windowunsigned long)。other_id用于识别 Web 内容(选项卡),因此在同一顶级窗口内。

win.getNativeWindowHandle()

返回Buffer - 窗口的特定于平台的句柄。

句柄的原生类型在 Windows 上为HWND,在 macOS 上为NSView*,在 Linux 上为Windowunsigned long)。

win.hookWindowMessage(message, callback) Windows

  • message 整数
  • callback 函数
    • wParam 缓冲区 - 提供给 WndProc 的 wParam
    • lParam 缓冲区 - 提供给 WndProc 的 lParam

挂钩窗口消息。当 WndProc 中收到该消息时,将调用 callback

win.isWindowMessageHooked(message) Windows

  • message 整数

返回 boolean - 根据消息是否已挂钩返回 truefalse

win.unhookWindowMessage(message) Windows

  • message 整数

取消挂钩窗口消息。

win.unhookAllWindowMessages() Windows

取消挂钩所有窗口消息。

win.setRepresentedFilename(filename) macOS

  • filename 字符串

设置窗口表示的文件的路径名,并且文件图标将显示在窗口的标题栏中。

win.getRepresentedFilename() macOS

返回 string - 窗口表示的文件的路径名。

win.setDocumentEdited(edited) macOS

  • edited 布尔值

指定窗口的文档是否已被编辑,当设置为 true 时,标题栏中的图标将变为灰色。

win.isDocumentEdited() macOS

返回 boolean - 窗口的文档是否已被编辑。

win.setMenu(menu) Linux Windows

  • menu 菜单 | null

menu 设置为窗口的菜单栏。

win.removeMenu() Linux Windows

移除窗口的菜单栏。

win.setProgressBar(progress[, options])

  • progress 双精度数
  • options 对象(可选)
    • mode 字符串 Windows - 进度条的模式。可以是 nonenormalindeterminateerrorpaused

设置进度条中的进度值。有效范围是 [0, 1.0]。

当进度 < 0 时移除进度条;当进度 > 1 时更改为不确定模式。

在 Linux 平台上,仅支持 Unity 桌面环境,您需要在 package.json 中的 desktopName 字段中指定 *.desktop 文件名。默认情况下,它将假设为 {app.name}.desktop

在 Windows 上,可以传递一个模式。可接受的值为 nonenormalindeterminateerrorpaused。如果您在没有设置模式的情况下调用 setProgressBar(但值在有效范围内),则将假设为 normal

win.setOverlayIcon(overlay, description) Windows

  • overlay 原生图像 | null - 要在任务栏图标右下角显示的图标。如果此参数为 null,则清除叠加层
  • description 字符串 - 将提供给辅助功能屏幕阅读器的描述

在当前任务栏图标上设置一个 16 x 16 像素的叠加层,通常用于传达某种应用程序状态或被动地通知用户。

win.invalidateShadow() macOS

使窗口阴影无效,以便根据当前窗口形状重新计算它。

透明的 BaseWindow 有时会在 macOS 上留下视觉伪像。例如,在执行动画时,可以使用此方法清除这些伪像。

win.setHasShadow(hasShadow)

  • hasShadow 布尔值

设置窗口是否应具有阴影。

win.hasShadow()

返回 boolean - 窗口是否具有阴影。

win.setOpacity(opacity) Windows macOS

  • opacity 数字 - 介于 0.0(完全透明)和 1.0(完全不透明)之间

设置窗口的不透明度。在 Linux 上,不执行任何操作。超出范围的数值将被限制在 [0, 1] 范围内。

win.getOpacity()

返回 number - 介于 0.0(完全透明)和 1.0(完全不透明)之间。在 Linux 上,始终返回 1。

win.setShape(rects) Windows Linux 实验性

  • rects 矩形[] - 在窗口上设置形状。传递空列表会将窗口恢复为矩形。

设置窗口形状决定了系统允许绘制和用户交互的窗口内的区域。在给定区域之外,不会绘制任何像素,也不会注册任何鼠标事件。区域外的鼠标事件不会被该窗口接收,但会传递到窗口后面的任何内容。

win.setThumbarButtons(buttons) Windows

返回 boolean - 按钮是否已成功添加

在任务栏按钮布局中,向窗口的缩略图图像添加具有指定按钮集的缩略图工具栏。返回一个 boolean 对象,指示缩略图是否已成功添加。

由于空间有限,缩略图工具栏中的按钮数量不应超过 7 个。设置缩略图工具栏后,由于平台的限制,无法将其移除。但是,您可以使用空数组调用 API 来清除按钮。

buttonsButton 对象的数组

  • Button 对象
    • icon 原生图像 - 在缩略图工具栏中显示的图标。
    • click 函数
    • tooltip 字符串(可选) - 按钮工具提示的文本。
    • flags 字符串[](可选) - 控制按钮的特定状态和行为。默认情况下,为 ['enabled']

flags 是一个可以包含以下 string 的数组

  • enabled - 按钮处于活动状态且可供用户使用。
  • disabled - 按钮已禁用。它存在,但具有指示它不会响应用户操作的可视状态。
  • dismissonclick - 单击按钮时,缩略图窗口会立即关闭。
  • nobackground - 不要绘制按钮边框,仅使用图像。
  • hidden - 按钮不显示给用户。
  • noninteractive - 按钮已启用但不可交互;不绘制按下按钮的状态。此值用于按钮在通知中使用的实例。

win.setThumbnailClip(region) Windows

  • region 矩形 - 窗口的区域

设置窗口的区域,以在将鼠标悬停在任务栏中的窗口上时显示为缩略图图像。您可以通过指定空区域将缩略图重置为整个窗口:{ x: 0, y: 0, width: 0, height: 0 }

win.setThumbnailToolTip(toolTip) Windows

  • toolTip 字符串

设置在将鼠标悬停在任务栏中的窗口缩略图上时显示的工具提示。

win.setAppDetails(options) Windows

  • options 对象
    • appId 字符串(可选) - 窗口的 应用程序用户模型 ID。它必须设置,否则其他选项将无效。
    • appIconPath 字符串(可选) - 窗口的 重新启动图标
    • appIconIndex 整数(可选) - appIconPath 中图标的索引。当未设置 appIconPath 时忽略。默认为 0
    • relaunchCommand 字符串(可选) - 窗口的 重新启动命令
    • relaunchDisplayName 字符串(可选) - 窗口的 重新启动显示名称

设置窗口的任务栏按钮的属性。

注意:relaunchCommandrelaunchDisplayName 必须始终一起设置。如果其中一个属性未设置,则两者都不会使用。

win.setIcon(icon) Windows Linux

更改窗口图标。

win.setWindowButtonVisibility(visible) macOS

  • visible 布尔值

设置窗口交通灯按钮是否可见。

win.setAutoHideMenuBar(hide) Windows Linux

  • hide 布尔值

设置窗口菜单栏是否自动隐藏。设置后,菜单栏仅在用户按下单个Alt键时显示。

如果菜单栏已可见,调用setAutoHideMenuBar(true)不会立即将其隐藏。

win.isMenuBarAutoHide() Windows Linux

返回布尔值 - 菜单栏是否自动隐藏。

win.setMenuBarVisibility(visible) Windows Linux

  • visible 布尔值

设置菜单栏是否可见。如果菜单栏为自动隐藏,用户仍然可以通过按下单个Alt键调出菜单栏。

win.isMenuBarVisible() Windows Linux

返回布尔值 - 菜单栏是否可见。

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

  • visible 布尔值
  • options 对象(可选)
    • visibleOnFullScreen 布尔值(可选) macOS - 设置窗口是否应在全屏窗口上方可见。
    • skipTransformProcessType 布尔值(可选) macOS - 调用setVisibleOnAllWorkspaces默认情况下会在UIElementApplication和ForegroundApplication之间转换进程类型以确保正确的行为。但是,这将每次调用时都会短暂隐藏窗口和停靠栏。如果您的窗口已经是UIElementApplication类型,则可以通过将true传递给skipTransformProcessType来绕过此转换。

设置窗口是否应在所有工作区中可见。

注意:此 API 在 Windows 上无效。

win.isVisibleOnAllWorkspaces() macOS Linux

返回布尔值 - 窗口是否在所有工作区中可见。

注意:此 API 在 Windows 上始终返回 false。

win.setIgnoreMouseEvents(ignore[, options])

  • ignore 布尔值
  • options 对象(可选)
    • forward 布尔值(可选) macOS Windows - 如果为 true,则将鼠标移动消息转发到 Chromium,从而启用与鼠标相关的事件,例如mouseleave。仅在ignore为 true 时使用。如果ignore为 false,则无论此值如何,转发始终被禁用。

使窗口忽略所有鼠标事件。

此窗口中发生的全部鼠标事件将传递到此窗口下方的窗口,但如果此窗口具有焦点,它仍将接收键盘事件。

win.setContentProtection(enable) macOS Windows

  • enable boolean

防止窗口内容被其他应用程序捕获。

在 macOS 上,它将 NSWindow 的 sharingType 设置为 NSWindowSharingNone。在 Windows 上,它使用WDA_EXCLUDEFROMCAPTURE调用 SetWindowDisplayAffinity。对于 Windows 10 2004 及更高版本,窗口将完全从捕获中移除,较旧的 Windows 版本的行为就像应用了WDA_MONITOR一样,捕获一个黑色窗口。

win.setFocusable(focusable) macOS Windows

  • focusable 布尔值

更改窗口是否可以获得焦点。

在 macOS 上,它不会从窗口中移除焦点。

win.isFocusable() macOS Windows

返回布尔值 - 窗口是否可以获得焦点。

win.setParentWindow(parent)

  • parent BaseWindow | null

parent设置为当前窗口的父窗口,传递null将使当前窗口成为顶级窗口。

win.getParentWindow()

返回BaseWindow | null - 父窗口,如果不存在父窗口则返回null

win.getChildWindows()

返回BaseWindow[] - 所有子窗口。

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(baseWindow) macOS

  • baseWindow BaseWindow

在窗口实例的标签之后,将窗口作为标签添加到此窗口。

win.setVibrancy(type) macOS

  • type 字符串 | null - 可以是titlebarselectionmenupopoversidebarheadersheetwindowhudfullscreen-uitooltipcontentunder-windowunder-page。有关更多详细信息,请参阅macOS 文档

向窗口添加活力效果。传递null或空字符串将删除窗口上的活力效果。

win.setBackgroundMaterial(material) Windows

  • material 字符串
    • auto - 让桌面窗口管理器 (DWM) 自动为该窗口确定系统绘制的背景材料。这是默认设置。
    • none - 不要绘制任何系统背景。
    • mica - 绘制与长期存在的窗口相对应的背景材料效果。
    • acrylic - 绘制与短暂窗口相对应的背景材料效果。
    • tabbed - 绘制与具有选项卡式标题栏的窗口相对应的背景材料效果。

此方法设置浏览器窗口的系统绘制背景材料,包括非客户区后面。

有关更多详细信息,请参阅Windows 文档

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

win.setWindowButtonPosition(position) macOS

为无边框窗口中的交通灯按钮设置自定义位置。传递null会将位置重置为默认值。

win.getWindowButtonPosition() macOS

返回Point | null - 无边框窗口中交通灯按钮的自定义位置,当没有自定义位置时将返回null

win.setTouchBar(touchBar) macOS

  • touchBar TouchBar | null

设置当前窗口的 touchBar 布局。指定nullundefined将清除触控栏。此方法仅在机器具有触控栏时才有效。

注意:TouchBar API 目前处于实验阶段,可能会在将来的 Electron 版本中更改或删除。

win.setTitleBarOverlay(options) Windows Linux

  • options 对象
    • color 字符串(可选) - 启用窗口控件叠加层时的 CSS 颜色。

    • symbolColor 字符串 (可选) - 启用窗口控件覆盖层时,覆盖层上符号的 CSS 颜色。
    • height 整数 (可选) - 标题栏和窗口控件覆盖层的高度,以像素为单位。

在已启用窗口控件覆盖层的窗口上,此方法更新标题栏覆盖层的样式。

在 Linux 上,如果未显式设置,则会自动计算 symbolColor,使其与 color 具有最低的可访问对比度。