2016-05-17 23:02:54 +00:00
# `window.open` Function
2015-03-04 16:47:04 +00:00
2016-04-22 18:42:54 +00:00
> Open a new window and load a URL.
2016-04-21 22:35:29 +00:00
2015-08-29 06:21:09 +00:00
When `window.open` is called to create a new window in a web page, a new instance
2017-11-29 11:13:45 +00:00
of [`BrowserWindow` ](browser-window.md ) will be created for the `url` and a proxy will be returned
2015-07-14 15:37:52 +00:00
to `window.open` to let the page have limited control over it.
2015-03-04 16:47:04 +00:00
2015-08-29 06:21:09 +00:00
The proxy has limited standard functionality implemented to be
compatible with traditional web pages. For full control of the new window
2015-03-04 16:47:04 +00:00
you should create a `BrowserWindow` directly.
2016-07-22 22:00:10 +00:00
The newly created `BrowserWindow` will inherit the parent window's options by
default. To override inherited options you can set them in the `features`
2015-09-22 14:46:44 +00:00
string.
2015-08-29 06:21:09 +00:00
### `window.open(url[, frameName][, features])`
2015-03-04 16:47:04 +00:00
* `url` String
2015-08-29 06:21:09 +00:00
* `frameName` String (optional)
* `features` String (optional)
2015-03-04 16:47:04 +00:00
2016-12-19 17:40:07 +00:00
Returns [`BrowserWindowProxy` ](browser-window-proxy.md ) - Creates a new window
and returns an instance of `BrowserWindowProxy` class.
2015-03-04 16:47:04 +00:00
2015-09-22 14:46:44 +00:00
The `features` string follows the format of standard browser, but each feature
2018-09-10 15:49:54 +00:00
has to be a field of `BrowserWindow` 's options. These are the features you can set via `features` string: `zoomFactor` , `nodeIntegration` , `preload` , `javascript` , `contextIsolation` , `webviewTag` .
For example:
```js
window.open('https://github.com', '_blank', 'nodeIntegration=no')
```
2015-09-22 14:46:44 +00:00
2016-09-23 07:08:32 +00:00
**Notes:**
2016-10-25 03:35:18 +00:00
2016-10-04 05:41:37 +00:00
* Node integration will always be disabled in the opened `window` if it is
disabled on the parent window.
2017-04-21 18:00:31 +00:00
* Context isolation will always be enabled in the opened `window` if it is
enabled on the parent window.
* JavaScript will always be disabled in the opened `window` if it is disabled on
the parent window.
2016-10-04 05:41:37 +00:00
* 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.
2016-03-30 17:55:16 +00:00
2015-08-29 06:21:09 +00:00
### `window.opener.postMessage(message, targetOrigin)`
2015-03-04 16:47:04 +00:00
* `message` String
* `targetOrigin` String
Sends a message to the parent window with the specified origin or `*` for no
origin preference.
2017-03-19 09:35:12 +00:00
2017-05-24 18:12:57 +00:00
### Using Chrome's `window.open()` implementation
2017-03-19 09:35:12 +00:00
2017-05-24 18:12:57 +00:00
If you want to use Chrome's built-in `window.open()` implementation, set
`nativeWindowOpen` to `true` in the `webPreferences` options object.
2017-03-19 09:35:12 +00:00
2017-05-24 18:12:57 +00:00
Native `window.open()` allows synchronous access to opened windows so it is
convenient choice if you need to open a dialog or a preferences window.
This option can also be set on `<webview>` tags as well:
```html
< webview webpreferences = "nativeWindowOpen=yes" > < / webview >
```
The creation of the `BrowserWindow` is customizable via `WebContents` 's
`new-window` event.
2017-03-19 09:35:12 +00:00
```javascript
2017-03-19 11:30:07 +00:00
// main process
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nativeWindowOpen: true
}
})
2017-03-19 09:35:12 +00:00
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
2017-03-19 11:30:07 +00:00
if (frameName === 'modal') {
2017-03-19 09:35:12 +00:00
// open window as modal
event.preventDefault()
Object.assign(options, {
modal: true,
parent: mainWindow,
width: 100,
height: 100
})
2017-03-28 10:50:45 +00:00
event.newGuest = new BrowserWindow(options)
2017-03-19 09:35:12 +00:00
}
2017-03-19 11:09:52 +00:00
})
2017-03-19 09:35:12 +00:00
```
2017-03-19 11:30:07 +00:00
```javascript
// renderer process (mainWindow)
2020-07-09 17:18:49 +00:00
const modal = window.open('', 'modal')
2017-03-19 11:30:07 +00:00
modal.document.write('< h1 > Hello< / h1 > ')
```