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 disponible à 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. Pour plus de commodité, Electron extraira dans la mesure du possible une BrowserWindowConstructorOptions de cette liste de. 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 peut être défini directement, sans imbrication, à partir de featurees et comprenant : 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 sera toujours désactivée dans le nouveau window si elle est désactivée sur la fenêtre parent.
  • L'isolation du context sera toujours activée dans le nouveau window si elle est activée sur la fenêtre parent.
  • JavaScript sera toujours désactivé dans le nouveau window si il 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 windowName située dans la documentation native.
  • Lors de l'ouverture de about:blank, les WebPreferences de la fenêtre enfant seront recopiées à partir de la fenêtre parente, et ceci sans aucune autre possibilité car sinon Chromium ignore la navigation latérale du navigateur.

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 d'ouvrir la fenêtre et de définir led BrowserWindowConstructorOptions à utiliser lors de la création de la fenêtre. Notez que c'est plus puissant que de passer des options à travers 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>')