Skip to main content

WebContentsView

A View that displays a WebContents.

Process: Main

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

const { BaseWindow, WebContentsView } = require('electron')

const win = new BaseWindow({ width: 800, height: 400 })

const view1 = new WebContentsView()
win.contentView.addChildView(view1)
view1.webContents.loadURL('https://electronjs.org')
view1.setBounds({ x: 0, y: 0, width: 400, height: 400 })

const view2 = new WebContentsView()
win.contentView.addChildView(view2)
view2.webContents.loadURL('https://github.com/electron/electron')
view2.setBounds({ x: 400, y: 0, width: 400, height: 400 })

Class: WebContentsView extends View​

A View that displays a WebContents.

Process: Main

WebContentsView inherits from View.

WebContentsView is an EventEmitter.

warning

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

new WebContentsView([options])​

  • options Object (optional)
    • webPreferences WebPreferences (optional) - Settings of web page's features.
    • webContents WebContents (optional) - If present, the given WebContents will be adopted by the WebContentsView. A WebContents may only be presented in one WebContentsView at a time.

Creates a WebContentsView.

Instance Events​

Event: 'bounds-changed'​

Inherited from View

Emitted when the view's bounds have changed in response to being laid out. The new bounds can be retrieved with view.getBounds().

Instance Properties​

Objects created with new WebContentsView have the following properties, in addition to those inherited from View:

view.webContents Readonly​

A WebContents property containing a reference to the displayed WebContents. Use this to interact with the WebContents, for instance to load a URL.

const { WebContentsView } = require('electron')

const view = new WebContentsView()
view.webContents.loadURL('https://electronjs.org/')

view.children Readonly​

Inherited from View

A View[] property representing the child views of this view.

Instance Methods​

view.addChildView(view[, index])​

Inherited from View

  • view View - Child view to add.
  • index Integer (optional) - Index at which to insert the child view. Defaults to adding the child at the end of the child list.

If the same View is added to a parent which already contains it, it will be reordered such that it becomes the topmost view.

view.removeChildView(view)​

Inherited from View

  • view View - Child view to remove.

If the view passed as a parameter is not a child of this view, this method is a no-op.

view.setBounds(bounds[, options])​

Inherited from View

  • bounds Rectangle - New bounds of the View.
  • options Object (optional) - Options for setting the bounds.
    • animate boolean | Object (optional) - If true, the bounds change will be animated. If an object is passed, it can contain the following properties:
      • duration Integer (optional) - Duration of the animation in milliseconds. Default is 250.
      • easing string (optional) - Easing function for the animation. Default is linear.
        • linear
        • ease-in
        • ease-out
        • ease-in-out

view.getBounds()​

Inherited from View

Returns Rectangle - The bounds of this View, relative to its parent.

view.setBackgroundColor(color)​

Inherited from View

  • 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.

view.setBorderRadius(radius)​

Inherited from View

  • radius Integer - Border radius size in pixels.
note

The area cutout of the view's border still captures clicks.

view.setBackgroundBlur(blurRadius)​

Inherited from View

  • blurRadius Integer - The radius of the background blur effect (in pixels).
note

You must set a background color with an alpha channel (e.g. #80ffffff) in order for the blur effect to be visible.

view.setVisible(visible)​

Inherited from View

  • visible boolean - If false, the view will be hidden from display.

view.getVisible()​

Inherited from View

Returns boolean - Whether the view should be drawn. Note that this is different from whether the view is visible on screen—it may still be obscured or out of view.