非常教程

Electron参考手册

窗口开启 | window.open

窗口开启 | window.open

打开一个新窗口并加载一个 URL。

window.open被调用来在网页中创建一个新窗口时,BrowserWindow将为该实例创建一个url新实例,并且将返回一个代理window.open以使该页面对其进行有限的控制。

代理具有有限的标准功能,实现与传统网页兼容。要完全控制新窗口,您应该BrowserWindow直接创建。

新创建的BrowserWindow将默认继承父窗口的选项。要覆盖继承的选项,你可以在features字符串中设置它们。

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

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

返回BrowserWindowProxy- 创建一个新窗口并返回一个BrowserWindowProxy类的实例。

features字符串遵循标准浏览器的格式,但每个功能都必须是一个BrowserWindow选项字段。

注:

  • 如果在父窗口上禁用了节点集成,它将始终在打开window时被禁用。
  • 如果在父窗口上启用了上下文隔离,则会始终在window打开时启用上下文隔离。
  • 如果在父窗口禁用 JavaScript,则在打开的window 中将始终处于禁用状态。
  • 非标准特征(不由 Chromium 或 Electron 处理)features将在参数中传递给任何注册webContentnew-window事件处理程序additionalFeatures

window.opener.postMessage(message, targetOrigin)

  • message
  • targetOrigin

将消息发送到具有指定来源的父窗口或*无源偏好。

使用铬window.open()实施

如果您想使用 Chrome 的内置window.open()实现,请在webPreferences选项对象中nativeWindowOpen设置true

原生的 window.open()允许同步访问打开的窗口,因此如果需要打开对话框或首选项窗口,它是方便的选择。

这个选项也可以在<webview>标签上设置:

<webview webpreferences="nativeWindowOpen=yes"></webview>

的创建BrowserWindow是通过定制WebContentsnew-window事件。

// 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>')
窗口开启 | window.open
窗口开启 | window.open 详细
Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

主页 https://electron.atom.io/
源码 https://github.com/electron/electron
发布版本 1.7.9