Skip to main content

BrowserView

History
Version(s)Changes
None
API DEPRECATED
note

BrowserView 类已弃用，并由新的 WebContentsView 类取代。

¥[!NOTE] The BrowserView class is deprecated, and replaced by the new WebContentsView class.

BrowserView 可用于将其他 Web 内容嵌入到 BrowserWindow 中。它就像一个子窗口，只不过它是相对于其所属窗口定位的。它旨在作为 webview 标签的替代品。

¥A BrowserView can be used to embed additional web content into a 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.

类：BrowserView​

¥Class: BrowserView

History
Version(s)Changes
None
API DEPRECATED

创建和控制视图。

¥Create and control views.

note

BrowserView 类已弃用，并由新的 WebContentsView 类取代。

¥[!NOTE] The BrowserView class is deprecated, and replaced by the new WebContentsView class.

进程：主进程

¥Process: Main

在 app 模块的 ready 事件发出之前，该模块无法使用。

¥This module cannot be used until the ready event of the app module is emitted.

[!警告] Electron 的内置类无法在用户代码中进行子类化。更多信息，请参阅 常见问题解答。

¥[!WARNING] Electron's built-in classes cannot be subclassed in user code. For more information, see the FAQ.

示例​

¥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://electron.nodejs.cn')
})

new BrowserView([options]) 实验性已弃用​

¥new BrowserView([options]) Experimental Deprecated

History
Version(s)Changes
None
API DEPRECATED

  • options 对象（可选）

    ¥options Object (optional)

    • webPreferences WebPreferences（可选） - 网页功能的设置。

      ¥webPreferences WebPreferences (optional) - Settings of web page's features.

实例属性​

¥Instance Properties

使用 new BrowserView 创建的对象具有以下属性：

¥Objects created with new BrowserView have the following properties:

view.webContents 实验性已弃用​

¥view.webContents Experimental Deprecated

History
Version(s)Changes
None
API DEPRECATED

该视图拥有的 WebContents 对象。

¥A WebContents object owned by this view.

实例方法​

¥Instance Methods

使用 new BrowserView 创建的对象具有以下实例方法：

¥Objects created with new BrowserView have the following instance methods:

view.setAutoResize(options) 实验性已弃用​

¥view.setAutoResize(options) Experimental Deprecated

History

  • options 对象

    ¥options Object

    • width 布尔值（可选） - 如果是 true，视图的宽度将随着窗口一起增大和缩小。默认为 false。

      ¥width boolean (optional) - If true, the view's width will grow and shrink together with the window. false by default.

    • height 布尔值（可选） - 如果是 true，视图的高度将随着窗口一起增大和缩小。默认为 false。

      ¥height boolean (optional) - If true, the view's height will grow and shrink together with the window. false by default.

    • horizontal 布尔值（可选） - 如果是 true，视图的 x 位置和宽度将随窗口按比例增大和缩小。默认为 false。

      ¥horizontal boolean (optional) - If true, the view's x position and width will grow and shrink proportionally with the window. false by default.

    • vertical 布尔值（可选） - 如果是 true，视图的 y 位置和高度将随窗口按比例增大和缩小。默认为 false。

      ¥vertical boolean (optional) - If true, the view's y position and height will grow and shrink proportionally with the window. false by default.

view.setBounds(bounds) 实验性已弃用​

¥view.setBounds(bounds) Experimental Deprecated

History
Version(s)Changes
None
API DEPRECATED

调整视图大小并将视图移动到相对于窗口提供的边界。

¥Resizes and moves the view to the supplied bounds relative to the window.

view.getBounds() 实验性已弃用​

¥view.getBounds() Experimental Deprecated

History
Version(s)Changes
None
API DEPRECATED

返回 Rectangle

¥Returns Rectangle

此 BrowserView 实例的 bounds 为 Object。

¥The bounds of this BrowserView instance as Object.

view.setBackgroundColor(color) 实验性已弃用​

¥view.setBackgroundColor(color) Experimental Deprecated

History
Version(s)Changes
None
API DEPRECATED

  • color 字符串 - Hex、RGB、ARGB、HSL、HSLA 或命名 CSS 颜色格式的颜色。对于十六进制类型，Alpha 通道是可选的。

    ¥color string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.

有效 color 值的示例：

¥Examples of valid color values:

  • 十六进制

    ¥Hex

    • #fff(RGB)

    • #ffff(ARGB)

    • #ffffff(RRGGBB)

    • #ffffffff(AARRGGBB)

  • RGB

    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)

      • 例如 rgb(255, 255, 255)

        ¥e.g. rgb(255, 255, 255)

  • RGBA

    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)

      • 例如 rgba(255, 255, 255, 1.0)

        ¥e.g. rgba(255, 255, 255, 1.0)

  • HSL

    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)

      • 例如 hsl(200, 20%, 50%)

        ¥e.g. hsl(200, 20%, 50%)

  • HSLA

    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)

      • 例如 hsla(200, 20%, 50%, 0.5)

        ¥e.g. hsla(200, 20%, 50%, 0.5)

  • 颜色名称

    ¥Color name

    • 选项列于 SkParseColor.cpp 中

      ¥Options are listed in SkParseColor.cpp

    • 与 CSS Color Module Level 3 关键字类似，但区分大小写。

      ¥Similar to CSS Color Module Level 3 keywords, but case-sensitive.

      • 例如 blueviolet 或 red

        ¥e.g. blueviolet or red

[!NOTE] 带 alpha 的十六进制格式采用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。

¥[!NOTE] Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB.