创建和控制窗口。
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上,许多桌面环境不支持隐藏模态窗口。
Resource management
When you add a WebContentsView
to a BaseWindow
and the BaseWindow
is closed, the webContents
of the WebContentsView
are not destroyed
automatically.
It is your responsibility to close the webContents
when you no longer need them, e.g. when
the BaseWindow
is closed:
const { BaseWindow, WebContentsView } = require('electron')
const win = new BaseWindow({ width: 800, height: 600 })
const view = new WebContentsView()
win.contentView.addChildView(view)
win.on('closed', () => {
view.webContents.close()
})
Unlike with a BrowserWindow
, if you don't explicitly close the
webContents
, you'll encounter memory leaks.
Class: BaseWindow
创建和控制窗口。
Process: Main
BaseWindow
是一个EventEmitter。
它根据options
设置的本地属性创建一个新的BaseWindow
。
new BaseWindow([options])
options
BaseWindowConstructorOptions (可选)
width
Integer (可选) - 窗口的宽度(以像素为单位)。 默认值为 800。
height
Integer (可选) - 窗口的高度(以像素为单位)。 默认值为 600。
x
Integer (可选) (如果y存在则必填) - 窗口相对于屏幕左侧的偏移量。
默认值为将窗口居中。
y
Integer (可选) (如果x存在则必填) - 窗口相对于屏幕顶端的偏移量。
默认值为将窗口居中。
useContentSize
boolean (optional) - The width
and height
would be used as web
page's size, which means the actual window's size will include window
frame's size and be slightly larger. Default is false
.
center
boolean (optional) - Show window in the center of the screen. Default is false
.
minWidth
Integer (optional) - Window's minimum width. Default is 0
.
minHeight
Integer (optional) - Window's minimum height. Default is 0
.
maxWidth
Integer (optional) - Window's maximum width. 默认值不限
maxHeight
Integer (optional) - Window's maximum height. 默认值不限
resizable
boolean (optional) - Whether window is resizable. Default is true
.
movable
boolean (optional) macOS Windows - Whether window is
movable. 在 Linux 上未 实现。 Default is true
.
minimizable
boolean (optional) macOS Windows - Whether window is
minimizable. 在 Linux 上未实现。 Default is true
.
maximizable
boolean (optional) macOS Windows - Whether window is
maximizable. 在 Linux 上未实现。 Default is true
.
closable
boolean (optional) macOS Windows - Whether window is
closable. 在 Linux 上未实现。 Default is true
.
focusable
boolean (optional) - Whether the window can be focused. Default is
true
. On Windows setting focusable: false
also implies setting
skipTaskbar: true
. On Linux setting focusable: false
makes the window
stop interacting with wm, so the window will always stay on top in all
workspaces.
alwaysOnTop
boolean (optional) - Whether the window should always stay on top of
other windows. Default is false
.
fullscreen
boolean (optional) - Whether the window should show in fullscreen. When
explicitly set to false
the fullscreen button will be hidden or disabled
on macOS. Default is false
.
fullscreenable
boolean (optional) - Whether the window can be put into fullscreen
mode. On macOS, also whether the maximize/zoom button should toggle full
screen mode or maximize window. Default is true
.
simpleFullscreen
boolean (optional) macOS - Use pre-Lion fullscreen on
macOS. Default is false
.
skipTaskbar
boolean (optional) macOS Windows - Whether to show the window in taskbar.
Default is false
.
hiddenInMissionControl
boolean (optional) macOS - Whether window should be hidden when the user toggles into mission control.
kiosk
boolean (optional) - Whether the window is in kiosk mode. Default is false
.
title
string (optional) - Default window title. Default is "Electron"
. If the HTML tag <title>
is defined in the HTML file loaded by loadURL()
, this property will be ignored.
icon
(NativeImage | string) (optional) - The window icon. On Windows it is
recommended to use ICO
icons to get best visual effects, you can also
leave it undefined so the executable's icon will be used.
show
boolean (optional) - Whether window should be shown when created. Default is
true
.
frame
boolean (optional) - Specify false
to create a
frameless window. Default is true
.
parent
BaseWindow (optional) - Specify parent window. Default is null
.
modal
boolean (optional) - Whether this is a modal window. This only works when the
window is a child window. Default is false
.
acceptFirstMouse
boolean (optional) macOS - Whether clicking an
inactive window will also click through to the web contents. Default is
false
on macOS. 此选项在其他平台上不可配置。
disableAutoHideCursor
boolean (optional) - Whether to hide cursor when typing.
Default is false
.
autoHideMenuBar
boolean (optional) - Auto hide the menu bar unless the Alt
key is pressed. Default is false
.
enableLargerThanScreen
boolean (optional) macOS - Enable the window to
be resized larger than screen. Only relevant for macOS, as other OSes
allow larger-than-screen windows by default. Default is false
.
backgroundColor
string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if transparent
is set to true
. Default is #FFF
(white). See win.setBackgroundColor for more information.
hasShadow
boolean (optional) - Whether window should have a shadow. Default is true
.
opacity
number (optional) macOS Windows - Set the initial opacity of
the window, between 0.0 (fully transparent) and 1.0 (fully opaque). This
is only implemented on Windows and macOS.
darkTheme
boolean (optional) - Forces using dark theme for the window, only works on
some GTK+3 desktop environments. Default is false
.
transparent
boolean (optional) - Makes the window transparent.
Default is false
. 在Windows上,仅在无边框窗口下起作用。
type
string (optional) - The type of window, default is normal window. See more about
this below.
visualEffectState
string (optional) macOS - Specify how the material
appearance should reflect window activity state on macOS. Must be used
with the vibrancy
property. 可能的值有
followWindow
- The backdrop should automatically appear active when the window is active, and inactive when it is not. 默认为该值。
active
- The backdrop should always appear active.
inactive
- The backdrop should always appear inactive.
titleBarStyle
string (optional) - The style of window title bar.
Default is default
. 可能的值有
default
- Results in the standard title bar for macOS or Windows respectively.
hidden
- Results in a hidden title bar and a full size content window. 在 macOS 内, 窗口将一直拥有位于左上的标准窗口控制器 (“traffic lights”)。 On Windows and Linux, when combined with titleBarOverlay: true
it will activate the Window Controls Overlay (see titleBarOverlay
for more information), otherwise no window controls will be shown.
hiddenInset
macOS - Results in a hidden title bar
with an alternative look where the traffic light buttons are slightly
more inset from the window edge.
customButtonsOnHover
macOS - Results in a hidden
title bar and a full size content window, the traffic light buttons will
display when being hovered over in the top left of the window.
Note: This option is currently experimental.
titleBarOverlay
Object | Boolean (optional) - When using a frameless window in conjunction with win.setWindowButtonVisibility(true)
on macOS or using a titleBarStyle
so that the standard window controls ("traffic lights" on macOS) are visible, this property enables the Window Controls Overlay JavaScript APIs and CSS Environment Variables. Specifying true
will result in an overlay with default system colors. Default is false
.
color
String (optional) Windows Linux - The CSS color of the Window Controls Overlay when enabled. 默认是系统颜色。
symbolColor
String (optional) Windows - The CSS color of the symbols on the Window Controls Overlay when enabled. 默认是系统颜色。
height
Integer (optional) - The height of the title bar and Window Controls Overlay in pixels. 默认值为系统高度。
trafficLightPosition
Point (optional) macOS -
Set a custom position for the traffic light buttons in frameless windows.
roundedCorners
boolean (optional) macOS - Whether frameless window
should have rounded corners on macOS. Default is true
. Setting this property
to false
will prevent the window from being fullscreenable.
thickFrame
boolean (optional) - Use WS_THICKFRAME
style for frameless windows on
Windows, which adds standard window frame. Setting it to false
will remove
window shadow and window animations. Default is true
.
vibrancy
string (optional) macOS - Add a type of vibrancy effect to
the window, only on macOS. Can be appearance-based
, titlebar
, selection
,
menu
, popover
, sidebar
, header
, sheet
, window
, hud
, fullscreen-ui
,
tooltip
, content
, under-window
, or under-page
.
backgroundMaterial
string (optional) Windows - Set the window's
system-drawn background material, including behind the non-client area.
Can be auto
, none
, mica
, acrylic
or tabbed
. See win.setBackgroundMaterial for more information.
zoomToPageWidth
boolean (optional) macOS - Controls the behavior on
macOS when option-clicking the green stoplight button on the toolbar or by
clicking the Window > Zoom menu item. If true
, the window will grow to
the preferred width of the web page when zoomed, false
will cause it to
zoom to the width of the screen. This will also affect the behavior when
calling maximize()
directly. Default is false
.
tabbingIdentifier
string (optional) macOS - Tab group name, allows
opening the window as a native tab. Windows with the same
tabbing identifier will be grouped together. This also adds a native new
tab button to your window's tab bar and allows your app
and window to
receive the new-window-for-tab
event.
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.
- On macOS, possible types are
desktop
, textured
, panel
.
- The
textured
type adds metal gradient appearance. This option is deprecated.
- 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 use globalShortcut
to receive
input sparingly.
- The
panel
type enables the window to float on top of full-screened apps
by adding the NSWindowStyleMaskNonactivatingPanel
style mask,normally
reserved for NSPanel, at runtime. Also, the window will appear on all
spaces (desktops).
- 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'
返回:
在窗口要关闭的时候触发。 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')
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'