Skip to main content

Opening windows from the 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点击链接或提交带有target=_blank装饰的表格
  • JavaScript calling window.open()JavaScript调用window.open()

For same-origin content, the new window is created within the same process, enabling the parent to access the child window directly. 对于相同来源的内容,新窗口是在同一进程中创建的,使父窗口能够直接访问子窗口。This can be very useful for app sub-windows that act as preference panels, or similar, as the parent can render to the sub-window directly, as if it were a div in the parent. 这对于充当首选项面板或类似面板的应用程序子窗口非常有用,因为父窗口可以直接渲染到子窗口,就好像它是父窗口中的div一样。This is the same behavior as in the browser.这与浏览器中的行为相同。

Electron pairs this native Chrome Window with a BrowserWindow under the hood. Electron将这个原生ChromeWindow与引擎盖下的BrowserWindow配对。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.通过对渲染器创建的窗口使用webContents.setWindowOpenHandler(),您可以在主进程中创建BrowserWindow时利用所有可用的自定义功能。

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. BrowserWindow构造函数选项由以下按递增的优先级顺序设置:window.open()features字符串中解析的选项、从父级继承的安全相关的webPreferences以及webContents.setWindowOpenHandler提供的选项。Note that webContents.setWindowOpenHandler has final say and full privilege because it is invoked in the main process.请注意,webContents.setWindowOpenHandler拥有最终发言权和完全权限,因为它是在主进程中调用的。

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

  • url string
  • frameName string (optional)
  • features string (optional)

Returns Window | null返回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. 为了方便起见,Electron将在可能的情况下从该列表中解析BrowserWindowConstructorOptionsFor full control and better ergonomics, consider using webContents.setWindowOpenHandler to customize the BrowserWindow creation.为了实现完全控制和更好的人体工程学,可以考虑使用webContents.setWindowOpenHandler来自定义BrowserWindow的创建。

A subset of WebPreferences can be set directly, unnested, from the features string: zoomFactor, nodeIntegration, preload, javascript, contextIsolation, and webviewTag.WebPreferences的一个子集可以从功能字符串中直接设置,无需测试:zoomFactornodeIntegrationpreloadjavascriptcontextIsolationwebviewTag

For example:例如:

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

Notes:

  • Node integration will always be disabled in the opened window if it is disabled on the parent window.如果在父窗口上禁用了节点集成,则在打开的window中将始终禁用节点集成。
  • Context isolation will always be enabled in the opened window if it is enabled on the parent window.如果在父窗口上启用了上下文隔离,则将始终在打开的window中启用上下文隔离。
  • JavaScript will always be disabled in the opened window if it is disabled on the parent window.如果在父窗口上禁用了JavaScript,则在打开的window中将始终禁用JavaScript。
  • Non-standard features (that are not handled by Chromium or Electron) given in features will be passed to any registered webContents's did-create-window event handler in the options argument.features中给定的非标准功能(不由Chromium或Electron处理)将传递给options参数中任何注册的webContentsdid-create-window事件处理程序。
  • frameName follows the specification of windowName located in the native documentation.遵循本机文档中的windowName规范。
  • 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.当打开about:black时,子窗口的WebPreferences将从父窗口复制,并且无法覆盖它,因为Chromium在这种情况下跳过浏览器端导航。

To customize or cancel the creation of the window, you can optionally set an override handler with webContents.setWindowOpenHandler() from the main process. 要自定义或取消窗口的创建,您可以从主进程中选择使用webContents.setWindowOpenHandler()设置覆盖处理程序。Returning { action: 'deny' } cancels the window. 返回{ action: 'deny' }将取消窗口。Returning {action: 'allow', overrideBrowserWindowOptions: { ... } } will allow opening the window and setting the BrowserWindowConstructorOptions to be used when creating the window. 返回{action: 'allow', overrideBrowserWindowOptions: { ... } }将允许打开窗口,并将BrowserWindowConstructorOptions设置为在创建窗口时使用。Note that this is more powerful than passing options through the feature string, as the renderer has more limited privileges in deciding security preferences than the main process.请注意,这比通过功能字符串传递选项更强大,因为渲染器在决定安全首选项方面的权限比主进程更有限。

In addition to passing in action and overrideBrowserWindowOptions, outlivesOpener can be passed like: { action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }. 除了传入actionoverrideBrowserWindowOptions之外,outlivesOpener还可以像以下方式传递:{ action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }If set to true, the newly created window will not close when the opener window closes. 如果设置为true,则在打开窗口关闭时,新创建的窗口将不会关闭。The default value is false.默认值为false

Native Window example原生Window示例

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

// In this example, only windows with the `about:blank` url will be created.
// 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>')