当前位置: 首页 > 文档资料 > Electron 中文文档 >

window.open 函数

优质
小牛编辑
177浏览
2023-12-01

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

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

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

默认情况下, 新创建的 BrowserWindow 将继承父窗口的选项。若要重写继承的选项, 可以在 features 字符串中设置它们。

window.open Function

Open a new window and load a URL.

When window.open is called to create a new window in a web page, a new instance of BrowserWindow will be created for the url and a proxy will be returned to window.open to let the page have limited control over it.

The proxy has limited standard functionality implemented to be compatible with traditional web pages. For full control of the new window you should create a BrowserWindow directly.

The newly created BrowserWindow will inherit the parent window's options by default. To override inherited options you can set them in the features string.

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

  • url String
  • frameName String(可选)
  • features String(可选)

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

features 字符串遵循标准浏览器的格式,但每个 feature 必须是BrowserWindow 选项中的字段。 These are the features you can set via features string: zoomFactor, nodeIntegration, preload, javascript, contextIsolation, webviewTag.

例如:

window.open('https://github.com', '_blank', 'nodeIntegration=no')

注意:

  • 如果在父窗口中禁用了 Node integration, 则在打开的 window 中将始终被禁用。
  • 如果在父窗口中启用了上下文隔离, 则在打开的 window 中将始终被启用。
  • 父窗口禁用 Javascript,打开的 window 中将被始终禁用
  • features 中给定的非标准特性 (不由 Chromium 或 Electron 处理) 将被传递到 additionalFeatures 参数中的任何已注册 webContentnew-window 事件处理程序。

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

  • url String
  • frameName String (optional)
  • features String (optional)

Returns BrowserWindowProxy - Creates a new window and returns an instance of BrowserWindowProxy class.

The features string follows the format of standard browser, but each feature 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:

window.open('https://github.com', '_blank', 'nodeIntegration=no')

Notes:

  • Node integration will always be disabled in the opened window if it is disabled on the parent window.
  • 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.
  • 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.

window.opener.postMessage(message, targetOrigin)

  • message String
  • targetOrigin String

将消息发送给指定来源的父窗口,如果未指定来源则发送给*,即所有窗口。

window.opener.postMessage(message, targetOrigin)

  • message String
  • targetOrigin String

Sends a message to the parent window with the specified origin or * for no origin preference.

使用 Chrome 的 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>')

Using Chrome's window.open() implementation

If you want to use Chrome's built-in window.open() implementation, set nativeWindowOpen to true in the webPreferences options object.

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:

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

The creation of the BrowserWindow is customizable via WebContents's new-window event.

// 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>')