跳到主要内容

从渲染器打开窗口

有几种方法可以控制在渲染器中如何从受信任或不受信任的内容创建窗口。窗口可以通过两种方式从渲染器创建:

  • 点击链接或提交带有 target=_blank 的表单
  • JavaScript 调用 window.open()

对于同源内容,新窗口在同一进程中创建,使父窗口能够直接访问子窗口。这对于充当偏好设置面板或类似功能的应用程序子窗口非常有用,因为父窗口可以直接渲染到子窗口,就像它在父窗口中是一个 div 一样。这与浏览器中的行为相同。

Electron 在底层将此原生 Chrome Window 与一个 BrowserWindow 配对。您可以利用主进程中创建 BrowserWindow 时可用的所有自定义功能,通过对渲染器创建的窗口使用 webContents.setWindowOpenHandler()

BrowserWindow 构造函数选项的设置优先级递增如下:从 window.open()features 字符串中解析出的选项,从父级继承的安全相关 webPreferences,以及通过 webContents.setWindowOpenHandler 给出的选项。请注意,webContents.setWindowOpenHandler 拥有最终决定权和完全权限,因为它是在主进程中调用的。

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

  • url 字符串
  • frameName 字符串 (可选)
  • features 字符串 (可选)

返回 Window | null

features 是一个逗号分隔的键值列表,遵循浏览器的标准格式。Electron 将尽可能从该列表中解析出 BrowserWindowConstructorOptions 以提供便利。为了完全控制和更好的易用性,请考虑使用 webContents.setWindowOpenHandler 来自定义 BrowserWindow 的创建。

可以从 features 字符串直接(不嵌套地)设置 WebPreferences 的一个子集:zoomFactor, nodeIntegration, preload, javascript, contextIsolation, 和 webviewTag

例如

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

注意

  • 如果父窗口禁用了 Node 集成,则在打开的 window 中 Node 集成将始终被禁用。
  • 如果父窗口启用了上下文隔离,则在打开的 window 中上下文隔离将始终被启用。
  • 如果父窗口禁用了 JavaScript,则在打开的 window 中 JavaScript 将始终被禁用。
  • features 中给出的非标准特性(未由 Chromium 或 Electron 处理的)将作为 options 参数传递给任何已注册的 webContentsdid-create-window 事件处理程序。
  • frameName 遵循 原生文档target 的规范。
  • 当打开 about:blank 时,子窗口的 WebPreferences 将从父窗口复制,并且无法覆盖它,因为在这种情况下 Chromium 会跳过浏览器端导航。

要自定义或取消窗口的创建,您可以选择在主进程中使用 webContents.setWindowOpenHandler() 设置一个覆盖处理程序。返回 { action: 'deny' } 将取消窗口。返回 { action: 'allow', overrideBrowserWindowOptions: { ... } } 将允许打开窗口并设置创建窗口时要使用的 BrowserWindowConstructorOptions。请注意,这比通过 features 字符串传递选项更强大,因为渲染器在决定安全偏好方面的权限比主进程更有限。

除了传入 actionoverrideBrowserWindowOptions 外,还可以传入 outlivesOpener,例如:{ action: 'allow', outlivesOpener: true, overrideBrowserWindowOptions: { ... } }。如果设置为 true,新创建的窗口在打开它的窗口关闭时不会关闭。默认值为 false

原生 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>')