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.

Les options du constructeur BrowserWindow sont définies par ordre de priorité croissante : options de la string features de window.open(), puis les webPreferences liées à la sécurité héritées du parent, et enfin, les options données par 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 analysera BrowserWindowConstructorOptions si possible, pour plus de commodité. Pour un contrôle complet et une meilleure ergonomie, il est conseillé d'utiliser webContents.setWindowOpenHandler pour personnaliser la création des BrowserWindow .

Un sous-ensemble de WebPreferences non-imbriquées peut être défini directement, à partir des fonctionalité: zoomFactor, nodeIntegration, preload, javascript, contextIsolation et 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.
  • Lors de l’ouverture de about:blank, les WebPreferences de la fenêtre enfant sont copiées à partir de la fenêtre parent, et ceci sans aucun remplacement possible car Chromium ignore la navigation côté navigateur dans ce cas.

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>')