BaseWindow
Création et gestion des fenêtres.
Process: Main
Remarque
BaseWindow
fournit un moyen flexible de composer plusieurs vues web dans une seule fenêtre . Pour les fenêtres avec seulement une vue Web simple, la classeBrowserWindow
représente une option plus simple.
This module cannot be used until the ready
event of the app
module is emitted.
// Dans le processus principal;
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 })
Fenêtres parent et enfant
En utilisant l'option parent
, vous pouvez créer des fenêtres enfants :
const { BaseWindow } = require('electron')
const parent = new BaseWindow()
const child = new BaseWindow({ parent })
La fenêtre child
s'affichera toujours devant la fenêtre parent
.
Fenêtres modales
Une fenêtre modale est une fenêtre enfant qui désactive la fenêtre parente. Pour créer une fenêtre modale
, vous devez définir les options parent
et modal
:
const { BaseWindow } = require('electron')
const parent = new BaseWindow()
const child = new BaseWindow({ parent, modal: true })
Avertissement sur les plateformes
- Sur macOS, les fenêtres modales seront affichés comme des feuilles attachées à la fenêtre parent.
- On macOS the child windows will keep the relative position to parent window when parent window moves, while on Windows and Linux child windows will not move.
- Sur Linux, le type des fenêtre modales sera remplacé par
dialog
. - Sur Linux, beaucoup d'environnements bureau ne peuvent pas cacher une fenêtre modale.
Gestion des ressources
Lorsque vous ajoutez un eWebContentsView
à une BaseWindow
et que la BaseWindow
est fermée, les webContents
de la WebContentsView
ne sont pas détruits
automatiquement.
Il est de votre responsabilité de fermer les webContents
lorsque vous n'en avez plus besoin, par exemple lorsque
la BaseWindow
est fermée :
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()
})
Contrairement à une BrowserWindow
, si vous ne fermez pas explicitement les
webContents
, vous aurez des fuites de mémoire.
Class: BaseWindow
Création et gestion des fenêtres.
Process: Main
BaseWindow
est un EventEmitter.
Création d'une nouvelle BaseWindow
dont les propriétés natives sont celles définies par les options
.
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
.
The possible values and behaviors of the type
option are platform dependent.
Les valeurs possibles étant:
- Sous Linux, les types possibles sont
desktop
,dock
,toolbar
,splash
,notification
.- Le type
desktop
place la fenêtre au niveau de la fenêtre de fond de bureau (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. Ce type est couramment utilisé pour les écrans de démarrage. - The
notification
type creates a window that behaves like a system notification.
- Le type
- 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 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
.
Événements d’instance
Objects created with new BaseWindow
emit the following events:
Note: Some events are only available on specific operating systems and are labeled as such.
Événement : 'close'
Retourne :
event
Event
Emis lorsque la fenêtre va être fermée. 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. Par exemple :
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.
Événement : 'closed'
Il est emis lorsque la fenêtre est fermée. Après réception de cet événement, vous devez supprimer la référence vers la fenêtre et, bien sur, éviter de la ré-utiliser.
Event: 'session-end' Windows
Émis lorsque la session va se terminer à cause d'un redémarrage, un arrêt forcé ou une déconnexion.
Événement : 'blur'
Retourne :
event
Event
Émis lorsque la fenêtre perd le focus.
Événement : 'focus'
Retourne :
event
Event
Émis lorsque la fenêtre obtient le focus.
Événement : 'show'
Émis lorsque la fenêtre est affichée.
Événement : 'hide'
Émis lorsque la fenêtre est masquée.
Événement : 'maximize'
Émis lorsque la fenêtre est agrandie.
Événement : 'unmaximize'
Émis lorsque la fenêtre quitte un état maximisé.
Événement : 'minimize'
Émis lorsque la fenêtre est minimisée.
Événement : 'restore'
Émis lorsque la fenêtre est restaurée à partir d’un état réduit.
Event: 'will-resize' macOS Windows
Retourne :
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
.
Émis avant que la fenêtre ne soit redimensionnée. Calling event.preventDefault()
will prevent the window from being resized.
Notez que cet événement n'est émis que lorsque la fenêtre est redimensionnée manuellement. Resizing the window with setBounds
/setSize
will not emit this event.
The possible values and behaviors of the edge
option are platform dependent. Les valeurs possibles étant:
- 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
Événement : 'resize'
Émis après que la fenêtre soit redimensionnée.
Event: 'resized' macOS Windows
Émis une fois que la fenêtre a fini d'être redimensionnée.
Généralement émis lorsque la fenêtre a été redimensionnée manuellement. 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
Retourne :
event
EventnewBounds
Rectangle - Location the window is being moved to.
Émis juste avant que la fenêtre ne soit déplacée. On Windows, calling event.preventDefault()
will prevent the window from being moved.
Notez bien qu'il ne sera émis que lorsque la fenêtre est déplacée manuellement. Moving the window with setPosition
/setBounds
/center
will not emit this event.
Événement : 'move'
Émis lorsque la fenêtre est déplacée vers une nouvelle position.
Event: 'moved' macOS Windows
Émis une fois lorsque la fenêtre est déplacée vers une nouvelle position.
Note: On macOS this event is an alias of move
.
Événement : 'enter-full-screen'
Émis lorsque la fenêtre passe à un état de plein écran.
Événement : 'leave-full-screen'
Émis lorsque la fenêtre revient d'un état de plein écran.
Événement : 'always-on-top-changed'
Retourne :
event
EventisAlwaysOnTop
boolean
Émis lorsque la fenêtre est définie ou non définie pour toujours afficher au dessus des autres fenêtres.
Event: 'app-command' Windows Linux
Retourne :
event
Eventcommand
string
Emitted when an App Command is invoked. Généralement lié aux touches multimédia du clavier ou aux commandes du navigateur, ainsi que le bouton "Retour" intégré à certaines souris sous 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.
}
})
Les commandes d'application suivantes sont explicitement prises en charge sur Linux :
browser-backward
browser-forward
Event: 'swipe' macOS
Retourne :
event
Eventdirection
string
Émis sur un balayage à 3 doigts. Possible directions are up
, right
, down
, left
.
La méthode sous-jacente à cet événement est construite afin de pouvoir gérer les glissements sur trackpad selon le styles des 'anciens macOS, où le contenu sur l'écran ne se déplace pas avec le glissement. 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
Retourne :
event
Eventrotation
Float
Émis lors du mouvement de rotation du trackpad. Émission continue jusqu'à la fin du geste de rotation. 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
. Les valeurs de rotation dans le sens inverse des aiguilles d'une montre sont positives, tandis que les valeurs dans le sens horaire sont
négatives.
Event: 'sheet-begin' macOS
Émis lorsque la fenêtre ouvre une feuille.
Event: 'sheet-end' macOS
Émis lorsque la fenêtre a fermé une feuille.
Event: 'new-window-for-tab' macOS
Émis lorsque le bouton natif du nouvel onglet est cliqué.
Event: 'system-context-menu' Windows
Retourne :
event
Eventpoint
Point - The screen coordinates the context menu was triggered at
Émis lorsque le menu contextuel du système est déclenché dans la fenêtre, ceci est
normalement uniquement déclenché lorsque l'utilisateur fait un clic droit sur la zone non-client
de votre fenêtre. 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.
Méthodes statiques
The BaseWindow
class has the following static methods:
BaseWindow.getAllWindows()
Returns BaseWindow[]
- An array of all opened browser windows.
BaseWindow.getFocusedWindow()
Returns BaseWindow | null
- The window that is focused in this application, otherwise returns null
.
BaseWindow.fromId(id)
id
Integer
Returns BaseWindow | null
- The window with the given id
.