2016-05-17 16:02:54 -07:00
# `window.open` Function
2015-03-04 08:47:04 -08:00
2016-04-22 11:42:54 -07:00
> Open a new window and load a URL.
2016-04-21 15:35:29 -07:00
2015-08-28 23:21:09 -07:00
When `window.open` is called to create a new window in a web page, a new instance
2017-11-29 12:13:45 +01:00
of [`BrowserWindow` ](browser-window.md ) will be created for the `url` and a proxy will be returned
2015-07-14 16:37:52 +01:00
to `window.open` to let the page have limited control over it.
2015-03-04 08:47:04 -08:00
2015-08-28 23:21:09 -07: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 08:47:04 -08:00
you should create a `BrowserWindow` directly.
2016-07-22 15:00:10 -07: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 22:46:44 +08:00
string.
2015-08-28 23:21:09 -07:00
### `window.open(url[, frameName][, features])`
2015-03-04 08:47:04 -08:00
* `url` String
2015-08-28 23:21:09 -07:00
* `frameName` String (optional)
* `features` String (optional)
2015-03-04 08:47:04 -08:00
2016-12-19 09:40:07 -08:00
Returns [`BrowserWindowProxy` ](browser-window-proxy.md ) - Creates a new window
and returns an instance of `BrowserWindowProxy` class.
2015-03-04 08:47:04 -08:00
2015-09-22 22:46:44 +08:00
The `features` string follows the format of standard browser, but each feature
2018-09-10 17:49:54 +02: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 22:46:44 +08:00
2016-09-23 09:08:32 +02:00
**Notes:**
2016-10-25 12:35:18 +09:00
2016-10-04 14:41:37 +09:00
* Node integration will always be disabled in the opened `window` if it is
disabled on the parent window.
2017-04-21 11:00:31 -07: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 14:41:37 +09: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 10:55:16 -07:00
2015-08-28 23:21:09 -07:00
### `window.opener.postMessage(message, targetOrigin)`
2015-03-04 08:47:04 -08:00
* `message` String
* `targetOrigin` String
Sends a message to the parent window with the specified origin or `*` for no
origin preference.
2017-03-19 18:35:12 +09:00
2017-05-24 11:12:57 -07:00
### Using Chrome's `window.open()` implementation
2017-03-19 18:35:12 +09:00
2017-05-24 11:12:57 -07: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 18:35:12 +09:00
2017-05-24 11:12:57 -07: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 18:35:12 +09:00
```javascript
2017-03-19 20:30:07 +09:00
// main process
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nativeWindowOpen: true
}
})
2017-03-19 18:35:12 +09:00
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
2017-03-19 20:30:07 +09:00
if (frameName === 'modal') {
2017-03-19 18:35:12 +09:00
// open window as modal
event.preventDefault()
Object.assign(options, {
modal: true,
parent: mainWindow,
width: 100,
height: 100
})
2017-03-28 19:50:45 +09:00
event.newGuest = new BrowserWindow(options)
2017-03-19 18:35:12 +09:00
}
2017-03-19 20:09:52 +09:00
})
2017-03-19 18:35:12 +09:00
```
2017-03-19 20:30:07 +09:00
```javascript
// renderer process (mainWindow)
let modal = window.open('', 'modal')
modal.document.write('< h1 > Hello< / h1 > ')
```