Aller au contenu principal

Ouverture de fenêtres depuis le moteur de rendu

Il existe plusieurs façons de gérer la création de fenêtres à partir d'un contenu fiable ou non fiable au sein d'un moteur de rendu. Les fenêtres peuvent être créées à partir du moteur de rendu de deux manières:

  • Soit à l'aide de l'attribut target=_blank et en cliquant sur un lien ou en soumettant un formulaire.
  • Soit par un appel JavaScript à window.open()

Dans le cas de contenu de même origine, la nouvelle fenêtre est créée dans le même processus, permettant ainsi au parent d'accéder directement à la fenêtre enfant. Cela peut être très utile pour les sous-fenêtres d'une application agissant comme par exemple un volet des préférences, ou autre chose, car dans ce cas le parent peut effectuer le rendu de la sous-fenêtre directement comme s'il s'agissait d'une de ses div. Ce comportement est identique à celui du navigateur.

Sous le capot, Electron associe cette Window native de Chromium à une BrowserWindow. Vous pouvez bénéficier des personnalisations disponibles à la création d'une BrowserWindow dans le processus principal en utilisant webContents.setWindowOpenHandler() pour les fenêtres créées par le moteur de rendu.

BrowserWindow constructor options are set by, in increasing precedence order: parsed options from the features string from window.open(), security-related webPreferences inherited from the parent, and options given by webContents.setWindowOpenHandler. Notez tout de même que webContents.setWindowOpenHandler a le dernier mot et tous les privilèges puisque il est invoqué au niveau du processus principal.

window.open(url[, frameName][, features])

  • url string
  • frameName string (facultatif)
  • features string (facultatif)

Retourne Window | null

features est une liste de paires clé-valeur séparées par des virgules, suivant le format standard du navigateur. Electron will parse BrowserWindowConstructorOptions out of this list where possible, for convenience. Pour un contrôle complet et une meilleure ergonomie, il est conseillé d'utiliser webContents.setWindowOpenHandler pour personnaliser la création des BrowserWindow .

A subset of WebPreferences can be set directly, unnested, from the features string: zoomFactor, nodeIntegration, preload, javascript, contextIsolation, and webviewTag.

Par exemple :

window.open('https://github.com', '_blank', 'top=500,left=200,frame=false,nodeIntegration=no')

Notes:

  • L'intégration de Node, si elle est désactivée sur la fenêtre parent, sera toujours désactivée dans la nouvelle window.
  • De même, si l'isolation du contexte est activée sur la fenêtre parent, elle sera toujours activée pour la nouvelle window .
  • JavaScript sera toujours désactivé dans la nouvelle window si elle est désactivé sur la fenêtre parent.
  • Les fonctionnalités non standards (non gérées par Chromium ou Electron) renseignées dans features seront transmises à tout gestionnaire de l'événement did-create-window enregistré de webContents dans le paramètre options.
  • frameName suit la spécification de target située dans la documentation native.
  • When opening about:blank, the child window's WebPreferences will be copied from the parent window, and there is no way to override it because Chromium skips browser side navigation in this case.

Pour personnaliser ou annuler la création de la fenêtre, vous pouvez optionnellement définir un gestionnaire de surcharge avec webContents.setWindowOpenHandler() dans le processus principal . Le retour de { action: 'deny' } annule la fenêtre. Le retour de { action : 'allow', overrideBrowserWindowOptions : { ... } } permettra l’ouverture de la fenêtre et l'assignation des BrowserWindowConstructorOptions à utiliser lorsque création de la fenêtre. Notez que c'est plus puissant que de passer des options via la chaîne features, car les privilèges du moteur de rendu sont plus limités que ceux du processus principal en ce qui concerne les préférences de sécurité .

En plus de passer action et overrideBrowserWindowOptions, on peut passer outlivesOpener de cette manière: { action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }. Dans le cas où la valeur est à true, la fenêtre nouvellement créée ne se fermera pas suite à la fermeture de la fenêtre parente. La valeur par défaut est false.

Exemple de Window native

// main.js
const mainWindow = new BrowserWindow()

// Dans cet exemple, seules des fenêtres déclarées avec l'url `about:blank` seront créées.
// Toutes les autres url seront bloquées.
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
if (url === 'about:blank') {
return {
action: 'allow',
overrideBrowserWindowOptions: {
frame: false,
fullscreenable: false,
backgroundColor: 'black',
webPreferences: {
preload: 'my-child-window-preload-script.js'
}
}
}
}
return { action: 'deny' }
})
// processus de rendu (mainWindow)
const childWindow = window.open('', 'modal')
childWindow.document.write('<h1>Hello</h1>')