BrowserView

BrowserView 被用来让 BrowserWindow 嵌入更多的 web 内容。 它就像一个子窗口，除了它的位置是相对于父窗口。 这意味着可以替代webview标签.

类: BrowserView

创建和控制视图

进程：主进程

在 app 模块 emitted ready 事件之前，您不能使用此模块。

示例

// 在主进程中.
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 Object (可选)
  • webPreferences Object (可选) - 详情请看 BrowserWindow.

实例属性

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

view.webContents 实验功能

视图的WebContents 对象

实例方法

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

view.setAutoResize(options) 实验功能

• 选项 对象
  • width boolean（可选） - 如果为true，视图宽度跟随窗口变化。 默认值为 false
  • height boolean(可选) - 如果 true，视图的高度将增长和缩小 与窗口。 默认值为 false
  • horizontal boolean (可选) - 如果为 true，视图的x轴和宽度将随着窗口的大小变化等比例缩放。 默认值为 false
  • vertical boolean(可选) - 如果 true，视图的y位置和高度将增长 和收缩比例与窗口。 默认值为 false

view.setBounds(bounds) 实验功能

• bounds Rectangle

调整视图的大小，并将它移动到窗口边界

view.getBounds() 实验功能

返回 Rectangle

此BrowserView实例的 bounds 为 Object。

view.setBackgroundColor(color) 实验功能

• color string - 颜色为 Hex，RGB，ARGB，HSL，HSLA 或 命名的CSS颜色的格式。 Hex 的透明通道为可选项。

例如这些有效的 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
  • 名称列表在 SkParseColor.cpp
  • 类似 CSS Color Module Level 3 关键字，但大小写敏感。
    • 例如 blueviolet 或 red。

注意： Hex 格式带有透明通道需要 AARRGGBB 或 ARGB，不能是 RRGGBBA 或 RGA.