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.
Create and control views.
Process: Main
This module cannot be used until the ready
event of the app
module is emitted.
// 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')
})
options
Object (optional)webPreferences
Object (optional) - See BrowserWindow.
Objects created with new BrowserView
have the following properties:
A WebContents
object owned by this view.
Objects created with new BrowserView
have the following instance methods:
options
Objectwidth
boolean (optional) - Iftrue
, the view's width will grow and shrink together with the window.false
by default.height
boolean (optional) - Iftrue
, the view's height will grow and shrink together with the window.false
by default.horizontal
boolean (optional) - Iftrue
, the view's x position and width will grow and shrink proportionally with the window.false
by default.vertical
boolean (optional) - Iftrue
, the view's y position and height will grow and shrink proportionally with the window.false
by default.
bounds
Rectangle
Resizes and moves the view to the supplied bounds relative to the window.
Returns Rectangle
The bounds
of this BrowserView instance as Object
.
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)
- rgb(([\d]+),\s*([\d]+),\s*([\d]+))
- RGBA
- rgba(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+))
- e.g. rgba(255, 255, 255, 1.0)
- rgba(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+))
- HSL
- hsl((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%)
- e.g. hsl(200, 20%, 50%)
- hsl((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%)
- HSLA
- hsla((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+))
- e.g. hsla(200, 20%, 50%, 0.5)
- hsla((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+))
- Color name
- Options are listed in SkParseColor.cpp
- Similar to CSS Color Module Level 3 keywords, but case-sensitive.
- e.g.
blueviolet
orred
- e.g.
Note: Hex format with alpha takes AARRGGBB
or ARGB
, not RRGGBBA
or RGA
.