BaseWindow
创建和控制窗口。
Process: Main
注意
BaseWindow
提供了一种在单个窗口中灵活组合多个web视图的方式。 对于只有单个全尺寸web视图的窗口,BrowserWindow
类可能是更简单的选择。
This module cannot be used until the ready
event of the app
module is emitted.
// 在主进程中
const { BaseWindow, WebContentsView } = require('electron')
const win = new BaseWindow({ width: 800, height: 600 })
const leftView = new WebContentsView()
leftView.webContents.loadURL('https://electronjs.org')
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
父窗口的顶部。
模态窗口
模态窗口是禁用父窗口的子窗口。 要创建模态窗口,必须同时设置parent
和modal
选项:
const { BaseWindow } = require('electron')
const parent = new BaseWindow()
const child = new BaseWindow({ parent, modal: true })
平台相关的提示
- 在 macOS 上,modal 窗口将显示为附加到父窗口的工作表。
- 在 macOS 上,当父窗口移动时,子窗口将保持相对位置,而在 Windows 和 Linux 上,子窗口将不会移动。
- 在 Linux 上,模态窗口的类型将更改为
dialog
。 - 在Linux上,许多桌面环境不支持隐藏模态窗口。
Class: BaseWindow
创建和控制窗口。
Process: Main
BaseWindow
是一个EventEmitter。
它根据options
设置的本地属性创建一个新的BaseWindow
。
new BaseWindow([options])
When setting minimum or maximum window size with minWidth
/maxWidth
/
minHeight
/maxHeight
, it only constrains the users. It won't prevent you from
passing a size that does not follow size constraints to setBounds
/setSize
or
to the constructor of BrowserWindow
.
type
选项的可用值和可能的行为与平台相关。
可能的值有
- On Linux, possible types are
desktop
,dock
,toolbar
,splash
,notification
.- The
desktop
type places the window at the desktop background window level (kCGDesktopWindowLevel - 1). However, note that a desktop window will not receive focus, keyboard, or mouse events. You can still use globalShortcut to receive input sparingly. - The
dock
type creates a dock-like window behavior. - The
toolbar
type creates a window with a toolbar appearance. - The
splash
type behaves in a specific way. It is not draggable, even if the CSS styling of the window's body contains -webkit-app-region: drag. This type is commonly used for splash screens. - The
notification
type creates a window that behaves like a system notification.
- The
- On macOS, possible types are
desktop
,textured
,panel
.- The
textured
type adds metal gradient appearance (NSWindowStyleMaskTexturedBackground
). - The
desktop
type places the window at the desktop background window level (kCGDesktopWindowLevel - 1
). Note that desktop window will not receive focus, keyboard or mouse events, but you can useglobalShortcut
to receive input sparingly. - The
panel
type enables the window to float on top of full-screened apps by adding theNSWindowStyleMaskNonactivatingPanel
style mask,normally reserved for NSPanel, at runtime. Also, the window will appear on all spaces (desktops).
- The
- On Windows, possible type is
toolbar
.
实例事件
Objects created with new BaseWindow
emit the following events:
Note: Some events are only available on specific operating systems and are labeled as such.
事件: 'close'
返回:
event
Event
在窗口要关闭的时候触发。 It's emitted before the
beforeunload
and unload
event of the DOM. Calling event.preventDefault()
will cancel the close.
Usually you would want to use the beforeunload
handler to decide whether the
window should be closed, which will also be called when the window is
reloaded. In Electron, returning any value other than undefined
would cancel the
close. 例如:
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
}
Note: There is a subtle difference between the behaviors of window.onbeforeunload = handler
and window.addEventListener('beforeunload', handler)
. It is recommended to always set the event.returnValue
explicitly, instead of only returning a value, as the former works more consistently within Electron.
事件: 'closed'
在窗口关闭时触发 当你接收到这个事件的时候, 你应当移除相应窗口的引用对象,避免再次使用它.
Event: 'session-end' Windows
因为强制关机或机器重启或会话注销而导致窗口会话结束时触发
事件: 'blur'
当窗口失去焦点时触发
事件: 'focus'
当窗口获得焦点时触发
事件: 'show'
当 窗口显示时触发
事件: 'hide'
当窗口隐藏时触发
事件: 'maximize'
窗口最大化时触发
事件: 'unmaximize'
当窗口从最大化状态退出时触发
事件: 'minimize'
窗口最小化时触发
事件: 'restore'
当窗口从最小化状态恢复时触发
Event: 'will-resize' macOS Windows
返回:
event
EventnewBounds
Rectangle - Size the window is being resized to.details
Objectedge
(string) - The edge of the window being dragged for resizing. Can bebottom
,left
,right
,top-left
,top-right
,bottom-left
orbottom-right
.
调整窗口大小前触发。 Calling event.preventDefault()
will prevent the window from being resized.
请注意,该事件仅在手动调整窗口大小时触发。 Resizing the window with setBounds
/setSize
will not emit this event.
The possible values and behaviors of the edge
option are platform dependent. 可能的值有
- On Windows, possible values are
bottom
,top
,left
,right
,top-left
,top-right
,bottom-left
,bottom-right
. - On macOS, possible values are
bottom
andright
.- The value
bottom
is used to denote vertical resizing. - The value
right
is used to denote horizontal resizing.
- The value
事件: 'resize'
调整窗口大小后触发。
Event: 'resized' macOS Windows
当窗口完成调整大小后触发一次。
这通常在手动调整窗口大小后触发。 On macOS, resizing the window with setBounds
/setSize
and setting the animate
parameter to true
will also emit this event once resizing has finished.
Event: 'will-move' macOS Windows
返回:
event
EventnewBounds
Rectangle - Location the window is being moved to.
窗口移动前触发。 On Windows, calling event.preventDefault()
will prevent the window from being moved.
注意:仅当手动移动窗口时才会触发此消息。 Moving the window with setPosition
/setBounds
/center
will not emit this event.
事件: 'move'
窗口移动到新位置时触发
Event: 'moved' macOS Windows
当窗口移动到新位置时触发一次
Note: On macOS this event is an alias of move
.
事件: 'enter-full-screen'
窗口进入全屏状态时触发
事件: 'leave-full-screen'
窗口离开全屏状态时触发
事件: 'always-on-top-changed'
返回:
event
EventisAlwaysOnTop
boolean
设置或取消设置窗口总是在其他窗口的顶部显示时触发。
Event: 'app-command' Windows Linux
返回:
event
Eventcommand
string
Emitted when an App Command is invoked. 典型的是键盘上的媒体键或浏览器命令, 以及在Windows上的一些鼠标中内置的“后退”按钮。
Commands are lowercased, underscores are replaced with hyphens, and the
APPCOMMAND_
prefix is stripped off.
e.g. APPCOMMAND_BROWSER_BACKWARD
is emitted as 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
Event: 'swipe' macOS
返回:
event
Eventdirection
string
三指滑动时触发。 Possible directions are up
, right
, down
, left
.
此事件的基本方法是用来处理旧的macOS风格的触摸板滑动,屏幕内容不会随着滑动而移动。 Most macOS trackpads are not
configured to allow this kind of swiping anymore, so in order for it to emit properly the
'Swipe between pages' preference in System Preferences > Trackpad > More Gestures
must be
set to 'Swipe with two or three fingers'.
Event: 'rotate-gesture' macOS
返回:
event
Eventrotation
Float
在触控板旋转手势上触发。 持续触发直到旋转手势结束。 The rotation
value on each emission is the angle in degrees rotated since
the last emission. The last emitted event upon a rotation gesture will always be of
value 0
. 逆时针旋转值为正值,顺时针旋转值为负值。
Event: 'sheet-begin' macOS
窗口打开sheet(工作表) 时触发
Event: 'sheet-end' macOS
窗口关闭sheet(工作表) 时触发
Event: 'new-window-for-tab' macOS
当点击了系统的新标签按钮时触发
Event: 'system-context-menu' Windows
返回:
event
Eventpoint
Point - The screen coordinates the context menu was triggered at
当系统上下文菜单在窗口上触发时发出, 通常只在用户右键点击你窗口的非客户端区域时触发。 This is the window titlebar or any area you have declared
as -webkit-app-region: drag
in a frameless window.
Calling event.preventDefault()
will prevent the menu from being displayed.
静态方法
BaseWindow
类具有以下静态方法:
BaseWindow.getAllWindows()
Returns BaseWindow[]
- 全部已打开浏览器窗口构成的数组。
BaseWindow.getFocusedWindow()
Returns BaseWindow | null
- 当前应用中聚焦的窗口,无聚焦则返回 null。
BaseWindow.fromId(id)
id
Integer
Returns BaseWindow | null
- 给定id
的窗口。
实例属性
使用 new BaseWindow
创建的对象具有以下属性:
const { BaseWindow } = require('electron')
// 在这个示例中,`win` 是我们的实例
const win = new BaseWindow({ width: 800, height: 600 })
win.id
Readonly
一个Integer
属性,表示窗口的唯一 ID。 每个 ID 在整个 Electron 应用程序的所有BaseWindow
实例中都是唯一的。