Abrir ventanas desde el renderer

There are several ways to control how windows are created from trusted or untrusted content within a renderer. Windows can be created from the renderer in two ways:

• clicking on links or submitting forms adorned with target=_blank
• JavaScript calling window.open()

Para contenido del mismo origen, la nueva ventana es creada dentro del mismo proceso, permitiendo al padre acceder a la ventana hija derectamente. Esto puede ser muy útil para las sub ventanas de la aplicación que actúan como paneles de preferencia o similares, ya que el padre puede renderizar directamente a la sub ventana, como si fuera un div en el padre. Este es el mismo comportamiento que en el navegador.

Electron pairs this native Chrome Window with a BrowserWindow under the hood. You can take advantage of all the customization available when creating a BrowserWindow in the main process by using webContents.setWindowOpenHandler() for renderer-created windows.

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. Note that webContents.setWindowOpenHandler has final say and full privilege because it is invoked in the main process.

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

• url string
• frameName string (opcional)
• features string (opcional)

Devuelve Window | null

features is a comma-separated key-value list, following the standard format of the browser. Electron will parse BrowserWindowConstructorOptions out of this list where possible, for convenience. For full control and better ergonomics, consider using webContents.setWindowOpenHandler to customize the BrowserWindow creation.

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

Por ejemplo:

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

Notas:

• La integración de nodo siempre estará deshabilitada en la window abierta si está deshabilitada en la ventana principal.
• El aislamiento de contexto siempre estará habilitado en la window abierta si está habilitado en la ventana principal.
• JavaScript siempre estará deshabilitado en la window abierta si está deshabilitado en la ventana principal.
• Las características no estándares (que no son manejadas por Chromium o Electron) dadas en features serán pasadas a cualquier manejador de evento registrado did-create-window de webContents en el argumento options.
• frameName follows the specification of target located in the native documentation.
• 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.

To customize or cancel the creation of the window, you can optionally set an override handler with webContents.setWindowOpenHandler() from the main process. Devolver { action: 'deny' } cancela la ventana. Returning { action: 'allow', overrideBrowserWindowOptions: { ... } } will allow opening the window and setting the BrowserWindowConstructorOptions to be used when creating the window. Tenga en cuenta que esto es más poderoso que pasar opciones a través de la cadena de características, ya que el renderizador tiene privilegios más limitados para decidir las preferencias de seguridad que el proceso principal.

In addition to passing in action and overrideBrowserWindowOptions, outlivesOpener can be passed like: { action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }. If set to true, the newly created window will not close when the opener window closes. El valor predeterminado es false.

Ejemplo de Window nativo

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

// En este ejemplo, solo ventanas con la url `about:blank` serán creadas.
// All other urls will be blocked.
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' }
})

// renderer process (mainWindow)
const childWindow = window.open('', 'modal')
childWindow.document.write('<h1>Hello</h1>')