Skip to main content

Fenêtre sans bords

Ouvre une fenêtre sans barre d'outils, sans bordures ou autre "chrome" graphique.

Une fenêtre sans cadre est une fenêtre qui n'a pas de chrome, les parties de la fenêtre, comme des barres d'outils, qui ne font pas partie de la page Web. Ce sont des options dans la classe BrowserWindow.

Créer une fenêtre sans bords#

Pour créer une fenêtre sans cadre, vous devez définir frame à false dans BrowserWindow's options:

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ width: 800, height: 600, frame: false })win.show()

Alternatives#

There's an alternative way to specify a chromeless window on macOS and Windows. Instead of setting frame to false which disables both the titlebar and window controls, you may want to have the title bar hidden and your content extend to the full window size, yet still preserve the window controls ("traffic lights" on macOS) for standard window actions. Vous pouvez le faire en spécifiant l'option titleBarStyle :

hidden#

Results in a hidden title bar and a full size content window. On macOS, the title bar still has the standard window controls (“traffic lights”) in the top left.

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ titleBarStyle: 'hidden' })win.show()

Alternatives sur macOS#

hiddenInset#

Résultats dans une barre de titre cachée avec un aspect alternatif où les boutons de feux de circulation sont un peu plus intégrés à partir du bord de la fenêtre.

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })win.show()

customButtonsOnHover#

Utilise les boutons personnalisés de fermeture dessinée, et miniaturise les boutons qui affichent en survolant en haut à gauche de la fenêtre. The fullscreen button is not available due to restrictions of frameless windows as they interface with Apple's macOS window masks. Ces boutons personnalisés empêchent les problèmes liés aux événements de la souris qui se produisent avec les boutons standard de la barre d'outils de la fenêtre. Cette option n'est applicable que pour les fenêtres sans cadres.

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: false })win.show()

Windows Control Overlay#

When using a frameless window in conjuction with win.setWindowButtonVisibility(true) on macOS, using one of the titleBarStyles as described above so that the traffic lights are visible, or using titleBarStyle: hidden on Windows, you can access the Window Controls Overlay JavaScript APIs and CSS Environment Variables by setting the titleBarOverlay option to true. Specifying true will result in an overlay with default system colors.

On Windows, you can also specify the color of the overlay and its symbols by setting titleBarOverlay to an object with the options color and symbolColor. If an option is not specified, the color will default to its system color for the window control buttons:

const { BrowserWindow } = require('electron')const win = new BrowserWindow({  titleBarStyle: 'hidden',  titleBarOverlay: true})win.show()
const { BrowserWindow } = require('electron')const win = new BrowserWindow({  titleBarStyle: 'hidden',  titleBarOverlay: {    color: '#2f3241',    symbolColor: '#74b1be'  }})win.show()

Fenêtre transparente#

En définissant l'option transparente à true, vous pouvez également rendre la fenêtre sans cadre transparente :

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ transparent: true, frame: false })win.show()

Limitations#

  • Vous ne pouvez pas cliquer à travers la zone transparente. Nous allons introduire une API pour définir la forme de fenêtre pour résoudre ce problème, voir notre problème pour plus de détails.
  • Transparent windows are not resizable. Setting resizable to true may make a transparent window stop working on some platforms.
  • Le filtre flur ne s'applique qu'à la page web, donc il n'y a aucun moyen d'appliquer l'effet de flou au contenu en dessous de la fenêtre (i. . d'autres applications s'ouvrent sur le système de l'utilisateur).
  • The window will not be transparent when DevTools is opened.
  • On Windows operating systems,
    • transparent windows will not work when DWM is disabled.
    • transparent windows can not be maximized using the Windows system menu or by double clicking the title bar. The reasoning behind this can be seen on this pull request.
  • Sous Linux, les utilisateurs doivent mettre --enable-transparent-visuals --disable-gpu dans la ligne de commande pour désactiver le GPU et permettre à ARGB de rendre une fenêtre transparente, ceci est causé par un bogue amont que canal alpha ne fonctionne pas sur certains pilotes NVidia sur Linux.
  • Sur Mac, l'ombre native de la fenêtre ne sera pas affichée sur une fenêtre transparente.

Fenêtre non cliquable#

Pour créer une fenêtre non cliquable, c'est-à-dire faire en sorte que la fenêtre ignore tous les événements de la souris, vous pouvez appeler l'API win.setIgnoreMouseEvents(ignore) :

const { BrowserWindow } = require('electron')const win = new BrowserWindow()win.setIgnoreMouseEvents(true)

Transfert#

Ignorer les messages de la souris rend la page Web inaccessible au mouvement de la souris, ce qui signifie que les événements de déplacement de la souris ne seront pas émis. Sur les systèmes d'exploitation Windows, un paramètre optionnel peut être utilisé pour déplacer les messages de la souris vers la page web, permettant d'émettre des événements tels que souris :

const { ipcRenderer } = require('electron')const el = document.getElementById('clickThroughElement')el.addEventListener('mouseenter', () => {  ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })})el.addEventListener('mouseleave', () => {  ipcRenderer.send('set-ignore-mouse-events', false)})
// Main processconst { ipcMain } = require('electron')ipcMain.on('set-ignore-mouse-events', (event, ...args) => {  BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)})

Cela rend la page web cliquante quand plus de el, et retourne à la normale en dehors de elle.

Région déplaçable#

Par défaut, la fenêtre sans cadre ne peut pas être déplacée. Les applications doivent spécifier -webkit-app-region: glisser dans CSS pour dire à Electron quelles régions sont glissables (comme la barre de titre standard de l'OS), et les applications peuvent également utiliser -webkit-app-region : no-drag pour exclure la zone non glissable de la région glissable. Notez que seules les formes rectangulaires sont actuellement prises en charge.

Remarque : -webkit-app-region: drag est connu pour avoir des problèmes pendant que les outils de développement sont ouverts. Voir ceci Problème GitHub pour plus d'informations, y compris une solution de contournement.

Pour que toute la fenêtre puisse être déplacée, vous pouvez ajouter -webkit-app-region : glisser comme body's style :

<body style="-webkit-app-region: drag"></body>

Et notez que si vous avez rendu toute la fenêtre déplaçable, vous devez également marquer les boutons comme non glissables, sinon il serait impossible pour les utilisateurs de cliquer sur eux :

button {  -webkit-app-region: no-drag;}

Si vous définissez seulement une barre de titre personnalisée comme glissable, vous devez également rendre tous les boutons de la barre de titre non glissables.

Sélection de texte#

In a frameless window the dragging behavior may conflict with selecting text. Par exemple, lorsque vous faites glisser la fenêtre depuis la barre de titre, vous pouvez accidentellement sélectionner son texte. Afin d'éviter cela, vous devez désactiver la sélection de texte dans une zone déplaçable. Comme ceci :

.titlebar {  -webkit-user-select: none;  -webkit-app-region: drag;}

Menu contextuel#

Sur certaines plateformes, la zone glissable sera traitée comme une image non-client, donc lorsque vous faites un clic droit dessus un menu système apparaîtra. Pour que le menu contextuel se comporte correctement sur toutes les plates-formes, vous ne devriez jamais utiliser un menu contextuel personnalisé sur zones glissables.