179 lines
5.1 KiB
Markdown
179 lines
5.1 KiB
Markdown
# BrowserView
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
> **Note**
|
|
> The `BrowserView` class is deprecated, and replaced by the new
|
|
> [`WebContentsView`](web-contents-view.md) class.
|
|
|
|
A `BrowserView` can be used to embed additional web content into a
|
|
[`BrowserWindow`](browser-window.md). 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
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
> Create and control views.
|
|
|
|
> **Note**
|
|
> The `BrowserView` class is deprecated, and replaced by the new
|
|
> [`WebContentsView`](web-contents-view.md) class.
|
|
|
|
Process: [Main](../glossary.md#main-process)
|
|
|
|
This module cannot be used until the `ready` event of the `app`
|
|
module is emitted.
|
|
|
|
### Example
|
|
|
|
```js
|
|
// 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_
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
* `options` Object (optional)
|
|
* `webPreferences` [WebPreferences](structures/web-preferences.md?inline) (optional) - Settings of web page's features.
|
|
|
|
### Instance Properties
|
|
|
|
Objects created with `new BrowserView` have the following properties:
|
|
|
|
#### `view.webContents` _Experimental_ _Deprecated_
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
A [`WebContents`](web-contents.md) object owned by this view.
|
|
|
|
### Instance Methods
|
|
|
|
Objects created with `new BrowserView` have the following instance methods:
|
|
|
|
#### `view.setAutoResize(options)` _Experimental_ _Deprecated_
|
|
|
|
<!--
|
|
```YAML history
|
|
changes:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
description: "Standardized auto-resizing behavior across all platforms"
|
|
breaking-changes-header: behavior-changed-browserviewsetautoresize-behavior-on-macos
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
* `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_
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
* `bounds` [Rectangle](structures/rectangle.md)
|
|
|
|
Resizes and moves the view to the supplied bounds relative to the window.
|
|
|
|
#### `view.getBounds()` _Experimental_ _Deprecated_
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
Returns [`Rectangle`](structures/rectangle.md)
|
|
|
|
The `bounds` of this BrowserView instance as `Object`.
|
|
|
|
#### `view.setBackgroundColor(color)` _Experimental_ _Deprecated_
|
|
|
|
<!--
|
|
```YAML history
|
|
deprecated:
|
|
- pr-url: https://github.com/electron/electron/pull/35658
|
|
breaking-changes-header: deprecated-browserview
|
|
```
|
|
-->
|
|
|
|
* `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](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
|
|
* 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`.
|