Using window.open Function

Last Updated On Sunday 27th Mar 2022

Open a new window and load a URL.

  • When window.open is called to create a new window on a web page, a new Browser Window instance will be made for the url.
  • A Proxy will be returned to window.open to let the page have limited control over it.
  • The proxy has limited standard functionality implemented to be compatible with traditional web pages.
  • For complete control of the new window, you should create a BrowserWindow directly.
  • The newly created BrowserWindow will inherit the parent window’s options by default.
  • To override inherited options, you can set them in the features string.

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

  • url String
  • frameName String (optional)
  • features String (optional)

Returns BrowserWindowProxy – Creates a new window and returns an instance of BrowserWindowProxy` class.

The features string follows the standard browser format, but each feature has to be a field of BrowserWindow‘s options. These are the features you can set via the features string.

  • zoomFactor
  • nodeIntegration
  • preload
  • javascript
  • contextIsolation
  • webviewTag.

js window open

For example:

	window.open('https://github.com', '_blank', 'nodeIntegration=no')
	

Notes:

  • Node integration will always be disabled in the opened window if disabled on the parent window.
  • Context isolation will always be enabled in the opened window if enabled on the parent window.
  • JavaScript will always be disabled in the opened window if disabled on the parent window.
  • Non-standard features (that are not handled by Chromium or Electron) given in features will be passed to any registered webContent‘s new-window event handler in the additionalFeatures argument.

window.opener.postMessage(message, targetOrigin)

  • message String
  • targetOrigin String

It Sends a message to the parent window with the specified origin or * for no origin preference.

Using Chrome’s window.open() implementation

  • If you want to use Chrome’s built-in window.open() implementation, set
    nativeWindowOpen to true in the webPreferences options object.
  • Native window.open() allows synchronous access to opened windows, so it is a convenient choice if you need to open a dialogue or a preferences window.
  • It can set this option on <webview> tags as well:
	<webview webpreferences="nativeWindowOpen=yes"></webview>
	

The creation of the BrowserWindow is customizable via WebContents‘s new-window event.

	// main process
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nativeWindowOpen: true
  }
})
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
  if (frameName === 'modal') {
    // open window as modal
    event.preventDefault()
    Object.assign(options, {
      modal: true,
      parent: mainWindow,
      width: 100,
      height: 100
    })
    event.newGuest = new BrowserWindow(options)
  }
})
	
	// renderer process (mainWindow)
let modal = window.open('', 'modal')
modal.document.write('<h1>Hello</h1>')