Skip to main content

BrowserView

History
Version(s)Changes
None
API DEPRECATED
note

BrowserView 类已不推荐使用，已被新的 WebContentsView 类取代。

BrowserView 可以用来将额外的网页内容嵌入到 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

创建和管理视图。

note

BrowserView 类已不推荐使用，已被新的 WebContentsView 类取代。

进程：主进程

🌐 Process: Main

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

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

warning

Electron 内置的类不能在用户代码中被继承。 欲了解更多信息，请参见 常见问题。

示例​

🌐 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 对象（可选）

实例属性​

🌐 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 对象
    • width 布尔值（可选）- 如果为 true，视图的宽度将随窗口一起增大或缩小。默认情况下为 false。
    • height 布尔值（可选）- 如果为 true，视图的高度将随窗口一起增大或缩小。默认值为 false。
    • horizontal 布尔值（可选）- 如果为 true，视图的 x 位置和宽度将随窗口按比例增长和缩小。默认情况下为 false。
    • vertical 布尔值（可选）- 如果为 true，视图的 y 位置和高度将随窗口按比例增大或缩小。默认情况下为 false。

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 字符串 - 使用十六进制、RGB、ARGB、HSL、HSLA 或命名的 CSS 颜色格式。十六进制类型的 alpha 通道是可选的。

color 值的有效示例：

🌐 Examples of valid color values:

  • 十六进制
    • #fff（RGB）
    • #ffff（ARGB）
    • #ffffff（RRGGBB）
    • #ffffffff (AARRGGBB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • 例如 rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • 例如 rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • 例如 hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • 例如 hsla(200, 20%, 50%, 0.5)
  • 颜色名称
    • 选项列在 SkParseColor.cpp 中
    • 与 CSS Color Module Level 3 关键字类似，但区分大小写。
      • 例如 blueviolet 或 red
note

带透明度的十六进制格式使用 AARRGGBB 或 ARGB，而不是 RRGGBBAA 或 RGB。