electron/docs/api/browser-view.md

BrowserView

Note

The BrowserView class is deprecated, and replaced by the new WebContentsView class.

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.

Class: BrowserView

Create and control views.

Note

The BrowserView class is deprecated, and replaced by the new WebContentsView class.

Process: Main

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

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 Deprecated

• options Object (optional)
  • webPreferences WebPreferences (optional) - Settings of web page's features.

Instance Properties

Objects created with new BrowserView have the following properties:

view.webContents Experimental Deprecated

A WebContents object owned by this view.

Instance Methods

Objects created with new BrowserView have the following instance methods:

view.setAutoResize(options) Experimental Deprecated

• options Object
  • width boolean (optional) - If true, the view's width will grow and shrink together with the window. false by default.
  • height boolean (optional) - If true, the view's height will grow and shrink together with the window. false by default.
  • horizontal boolean (optional) - If true, the view's x position and width will grow and shrink proportionally with the window. false by default.
  • 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) Experimental Deprecated

• bounds Rectangle

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

view.getBounds() Experimental Deprecated

Returns Rectangle

The bounds of this BrowserView instance as Object.

view.setBackgroundColor(color) Experimental Deprecated

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

Examples of valid color values:

• 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.cpp
  • Similar to CSS Color Module Level 3 keywords, but case-sensitive.
    • e.g. blueviolet or red

Note: Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB.