Skip to main content

BrowserView

A BrowserView can be used to embed additional web content into a BrowserWindow. BrowserView可用于将其他web内容嵌入到BrowserWindow中。It is like a child window, except that it is positioned relative to its owning window. 它就像一个子窗口，只是它是相对于其所属窗口定位的。It is meant to be an alternative to the webview tag.它是用来替代webview标记的。

Class: BrowserView​

Create and control views.创建和控制视图。

Process: 进程：Main

This module cannot be used until the ready event of the app module is emitted.在发出app模块的ready事件之前，无法使用此模块。

Example示例​

// In the main process.
const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })

  const view = new BrowserView()
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
  view.webContents.loadURL('https://electronjs.org')
})

new BrowserView([options]) Experimental​

Instance Properties实例属性​

Objects created with new BrowserView have the following properties:使用new BrowserView创建的对象具有以下属性：

view.webContents Experimental​

A WebContents object owned by this view.此视图所拥有的WebContents对象。

Instance Methods实例方法​

Objects created with new BrowserView have the following instance methods:使用new BrowserView创建的对象具有以下实例方法：

view.setAutoResize(options) Experimental​

  • options Object
    • width boolean (optional) - If true, the view's width will grow and shrink together with the window. 如果为true，则视图的宽度将随窗口一起增大和缩小。false by default.默认情况下为false。
    • height boolean (optional) - If true, the view's height will grow and shrink together with the window. 如果为true，则视图的高度将与窗口一起增长和收缩。false by default.默认情况下为false。
    • horizontal boolean (optional) - If true, the view's x position and width will grow and shrink proportionally with the window. 如果为true，则视图的x位置和宽度将与窗口成比例地增长和收缩。false by default.默认情况下为false。
    • vertical boolean (optional) - If true, the view's y position and height will grow and shrink proportionally with the window. 如果为true，则视图的y位置和高度将与窗口成比例地增长和收缩。false by default.默认情况下为false。

view.setBounds(bounds) Experimental​

Resizes and moves the view to the supplied bounds relative to the window.调整视图的大小并将其移动到相对于窗口提供的边界。

view.getBounds() Experimental​

Returns 返回Rectangle

The bounds of this BrowserView instance as Object.此BrowserView实例作为Object形式的的bounds。

view.setBackgroundColor(color) Experimental​

  • color string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. 颜色采用十六进制、RGB、ARGB、HSL、HSLA或命名的CSS颜色格式。The alpha channel is optional for the hex type.对于十六进制类型，alpha通道是可选的。

Examples of valid color values:有效color值示例：

  • Hex
    • #fff (RGB)
    • #ffff (ARGB)
    • #ffffff (RRGGBB)
    • #ffffffff (AARRGGBB)
  • RGB
    • rgb(([\d]+),\s([\d]+),\s([\d]+))
      • e.g. rgb(255, 255, 255)
  • RGBA
    • rgba(([\d]+),\s([\d]+),\s([\d]+),\s*([\d.]+))
      • e.g. rgba(255, 255, 255, 1.0)
  • HSL
    • hsl((-?[\d.]+),\s([\d.]+)%,\s([\d.]+)%)
      • e.g. hsl(200, 20%, 50%)
  • HSLA
    • hsla((-?[\d.]+),\s([\d.]+)%,\s([\d.]+)%,\s*([\d.]+))
      • e.g. hsla(200, 20%, 50%, 0.5)
  • Color name颜色名称
    • Options are listed in SkParseColor.cppSkParseColor.cpp中列出了选项
    • Similar to CSS Color Module Level 3 keywords, but case-sensitive.类似于CSS颜色模块级别3关键字，但区分大小写。
      • e.g. blueviolet or red

Note: Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBA or RGA.带alpha的十六进制格式采用AARGGBB或ARGB，而不是RRGGBBA或RGA。