feat: replace BrowserView with WebContentsView (#35658)
This commit is contained in:
Jeremy Rose
GitHub
parent
a94fb2cb5d
commit
15c6014324
76 changed files with 2987 additions and 1531 deletions
|
|
@ -106,7 +106,7 @@ These individual tutorials expand on topics discussed in the guide above.
|
|||
|
||||
* [app](api/app.md)
|
||||
* [autoUpdater](api/auto-updater.md)
|
||||
* [BrowserView](api/browser-view.md)
|
||||
* [BaseWindow](api/base-window.md)
|
||||
* [BrowserWindow](api/browser-window.md)
|
||||
* [contentTracing](api/content-tracing.md)
|
||||
* [desktopCapturer](api/desktop-capturer.md)
|
||||
|
|
@ -134,8 +134,10 @@ These individual tutorials expand on topics discussed in the guide above.
|
|||
* [TouchBar](api/touch-bar.md)
|
||||
* [Tray](api/tray.md)
|
||||
* [utilityProcess](api/utility-process.md)
|
||||
* [View](api/view.md)
|
||||
* [webContents](api/web-contents.md)
|
||||
* [webFrameMain](api/web-frame-main.md)
|
||||
* [WebContentsView](api/web-contents-view.md)
|
||||
|
||||
### Modules for the Renderer Process (Web Page):
|
||||
|
||||
|
|
|
|||
1380
docs/api/base-window.md
Normal file
1380
docs/api/base-window.md
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,9 @@
|
|||
# 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
|
||||
|
|
@ -9,6 +13,10 @@ relative to its owning window. It is meant to be an alternative to the
|
|||
|
||||
> 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`
|
||||
|
|
@ -30,7 +38,7 @@ app.whenReady().then(() => {
|
|||
})
|
||||
```
|
||||
|
||||
### `new BrowserView([options])` _Experimental_
|
||||
### `new BrowserView([options])` _Experimental_ _Deprecated_
|
||||
|
||||
* `options` Object (optional)
|
||||
* `webPreferences` [WebPreferences](structures/web-preferences.md?inline) (optional) - Settings of web page's features.
|
||||
|
|
@ -39,7 +47,7 @@ app.whenReady().then(() => {
|
|||
|
||||
Objects created with `new BrowserView` have the following properties:
|
||||
|
||||
#### `view.webContents` _Experimental_
|
||||
#### `view.webContents` _Experimental_ _Deprecated_
|
||||
|
||||
A [`WebContents`](web-contents.md) object owned by this view.
|
||||
|
||||
|
|
@ -47,7 +55,7 @@ A [`WebContents`](web-contents.md) object owned by this view.
|
|||
|
||||
Objects created with `new BrowserView` have the following instance methods:
|
||||
|
||||
#### `view.setAutoResize(options)` _Experimental_
|
||||
#### `view.setAutoResize(options)` _Experimental_ _Deprecated_
|
||||
|
||||
* `options` Object
|
||||
* `width` boolean (optional) - If `true`, the view's width will grow and shrink together
|
||||
|
|
@ -59,19 +67,19 @@ Objects created with `new BrowserView` have the following instance methods:
|
|||
* `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_
|
||||
#### `view.setBounds(bounds)` _Experimental_ _Deprecated_
|
||||
|
||||
* `bounds` [Rectangle](structures/rectangle.md)
|
||||
|
||||
Resizes and moves the view to the supplied bounds relative to the window.
|
||||
|
||||
#### `view.getBounds()` _Experimental_
|
||||
#### `view.getBounds()` _Experimental_ _Deprecated_
|
||||
|
||||
Returns [`Rectangle`](structures/rectangle.md)
|
||||
|
||||
The `bounds` of this BrowserView instance as `Object`.
|
||||
|
||||
#### `view.setBackgroundColor(color)` _Experimental_
|
||||
#### `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.
|
||||
|
|
@ -79,25 +87,25 @@ The `bounds` of this BrowserView instance as `Object`.
|
|||
Examples of valid `color` values:
|
||||
|
||||
* Hex
|
||||
* #fff (RGB)
|
||||
* #ffff (ARGB)
|
||||
* #ffffff (RRGGBB)
|
||||
* #ffffffff (AARRGGBB)
|
||||
* `#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]+)\)`
|
||||
* e.g. `rgb(255, 255, 255)`
|
||||
* 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.]+)\)`
|
||||
* e.g. `rgba(255, 255, 255, 1.0)`
|
||||
* HSL
|
||||
* hsl\((-?\[\d.]+),\s*(\[\d.]+)%,\s*(\[\d.]+)%\)
|
||||
* e.g. hsl(200, 20%, 50%)
|
||||
* `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)
|
||||
* `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_ `RRGGBBA` or `RGA`.
|
||||
**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBAA` or `RGB`.
|
||||
|
|
|
|||
|
|
@ -98,8 +98,8 @@ The `child` window will always show on top of the `top` window.
|
|||
|
||||
## Modal windows
|
||||
|
||||
A modal window is a child window that disables parent window, to create a modal
|
||||
window, you have to set both `parent` and `modal` options:
|
||||
A modal window is a child window that disables parent window. To create a modal
|
||||
window, you have to set both the `parent` and `modal` options:
|
||||
|
||||
```js
|
||||
const { BrowserWindow } = require('electron')
|
||||
|
|
@ -140,7 +140,7 @@ state is `hidden` in order to minimize power consumption.
|
|||
* On Linux the type of modal windows will be changed to `dialog`.
|
||||
* On Linux many desktop environments do not support hiding a modal window.
|
||||
|
||||
## Class: BrowserWindow
|
||||
## Class: BrowserWindow extends `BaseWindow`
|
||||
|
||||
> Create and control browser windows.
|
||||
|
||||
|
|
@ -440,10 +440,14 @@ Returns `BrowserWindow | null` - The window that is focused in this application,
|
|||
Returns `BrowserWindow | null` - The window that owns the given `webContents`
|
||||
or `null` if the contents are not owned by a window.
|
||||
|
||||
#### `BrowserWindow.fromBrowserView(browserView)`
|
||||
#### `BrowserWindow.fromBrowserView(browserView)` _Deprecated_
|
||||
|
||||
* `browserView` [BrowserView](browser-view.md)
|
||||
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
Returns `BrowserWindow | null` - The window that owns the given `browserView`. If the given view is not attached to any window, returns `null`.
|
||||
|
||||
#### `BrowserWindow.fromId(id)`
|
||||
|
|
@ -1580,41 +1584,62 @@ machine has a touch bar.
|
|||
**Note:** The TouchBar API is currently experimental and may change or be
|
||||
removed in future Electron releases.
|
||||
|
||||
#### `win.setBrowserView(browserView)` _Experimental_
|
||||
#### `win.setBrowserView(browserView)` _Experimental_ _Deprecated_
|
||||
|
||||
* `browserView` [BrowserView](browser-view.md) | null - Attach `browserView` to `win`.
|
||||
If there are other `BrowserView`s attached, they will be removed from
|
||||
this window.
|
||||
|
||||
#### `win.getBrowserView()` _Experimental_
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
#### `win.getBrowserView()` _Experimental_ _Deprecated_
|
||||
|
||||
Returns `BrowserView | null` - The `BrowserView` attached to `win`. Returns `null`
|
||||
if one is not attached. Throws an error if multiple `BrowserView`s are attached.
|
||||
|
||||
#### `win.addBrowserView(browserView)` _Experimental_
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
#### `win.addBrowserView(browserView)` _Experimental_ _Deprecated_
|
||||
|
||||
* `browserView` [BrowserView](browser-view.md)
|
||||
|
||||
Replacement API for setBrowserView supporting work with multi browser views.
|
||||
|
||||
#### `win.removeBrowserView(browserView)` _Experimental_
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
#### `win.removeBrowserView(browserView)` _Experimental_ _Deprecated_
|
||||
|
||||
* `browserView` [BrowserView](browser-view.md)
|
||||
|
||||
#### `win.setTopBrowserView(browserView)` _Experimental_
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
#### `win.setTopBrowserView(browserView)` _Experimental_ _Deprecated_
|
||||
|
||||
* `browserView` [BrowserView](browser-view.md)
|
||||
|
||||
Raises `browserView` above other `BrowserView`s attached to `win`.
|
||||
Throws an error if `browserView` is not attached to `win`.
|
||||
|
||||
#### `win.getBrowserViews()` _Experimental_
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
#### `win.getBrowserViews()` _Experimental_ _Deprecated_
|
||||
|
||||
Returns `BrowserView[]` - a sorted by z-index array of all BrowserViews that have been attached
|
||||
with `addBrowserView` or `setBrowserView`. The top-most BrowserView is the last element of the array.
|
||||
|
||||
**Note:** The BrowserView API is currently experimental and may change or be
|
||||
removed in future Electron releases.
|
||||
> **Note**
|
||||
> The `BrowserView` class is deprecated, and replaced by the new
|
||||
> [`WebContentsView`](web-contents-view.md) class.
|
||||
|
||||
#### `win.setTitleBarOverlay(options)` _Windows_
|
||||
|
||||
|
|
|
|||
|
|
@ -142,11 +142,6 @@ Setting this variable is the same as passing `--log-file`
|
|||
on the command line. For more info, see `--log-file` in [command-line
|
||||
switches](./command-line-switches.md#--log-filepath).
|
||||
|
||||
### `ELECTRON_DEBUG_DRAG_REGIONS`
|
||||
|
||||
Adds coloration to draggable regions on [`BrowserView`](./browser-view.md)s on macOS - draggable regions will be colored
|
||||
green and non-draggable regions will be colored red to aid debugging.
|
||||
|
||||
### `ELECTRON_DEBUG_NOTIFICATIONS`
|
||||
|
||||
Adds extra logs to [`Notification`](./notification.md) lifecycles on macOS to aid in debugging. Extra logging will be displayed when new Notifications are created or activated. They will also be displayed when common actions are taken: a notification is shown, dismissed, its button is clicked, or it is replied to.
|
||||
|
|
|
|||
152
docs/api/structures/base-window-options.md
Normal file
152
docs/api/structures/base-window-options.md
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
# BaseWindowConstructorOptions Object
|
||||
|
||||
* `width` Integer (optional) - Window's width in pixels. Default is `800`.
|
||||
* `height` Integer (optional) - Window's height in pixels. Default is `600`.
|
||||
* `x` Integer (optional) - (**required** if y is used) Window's left offset from screen.
|
||||
Default is to center the window.
|
||||
* `y` Integer (optional) - (**required** if x is used) Window's top offset from screen.
|
||||
Default is to center the window.
|
||||
* `useContentSize` boolean (optional) - The `width` and `height` would be used as web
|
||||
page's size, which means the actual window's size will include window
|
||||
frame's size and be slightly larger. Default is `false`.
|
||||
* `center` boolean (optional) - Show window in the center of the screen. Default is `false`.
|
||||
* `minWidth` Integer (optional) - Window's minimum width. Default is `0`.
|
||||
* `minHeight` Integer (optional) - Window's minimum height. Default is `0`.
|
||||
* `maxWidth` Integer (optional) - Window's maximum width. Default is no limit.
|
||||
* `maxHeight` Integer (optional) - Window's maximum height. Default is no limit.
|
||||
* `resizable` boolean (optional) - Whether window is resizable. Default is `true`.
|
||||
* `movable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
movable. This is not implemented on Linux. Default is `true`.
|
||||
* `minimizable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
minimizable. This is not implemented on Linux. Default is `true`.
|
||||
* `maximizable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
maximizable. This is not implemented on Linux. Default is `true`.
|
||||
* `closable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
closable. This is not implemented on Linux. Default is `true`.
|
||||
* `focusable` boolean (optional) - Whether the window can be focused. Default is
|
||||
`true`. On Windows setting `focusable: false` also implies setting
|
||||
`skipTaskbar: true`. On Linux setting `focusable: false` makes the window
|
||||
stop interacting with wm, so the window will always stay on top in all
|
||||
workspaces.
|
||||
* `alwaysOnTop` boolean (optional) - Whether the window should always stay on top of
|
||||
other windows. Default is `false`.
|
||||
* `fullscreen` boolean (optional) - Whether the window should show in fullscreen. When
|
||||
explicitly set to `false` the fullscreen button will be hidden or disabled
|
||||
on macOS. Default is `false`.
|
||||
* `fullscreenable` boolean (optional) - Whether the window can be put into fullscreen
|
||||
mode. On macOS, also whether the maximize/zoom button should toggle full
|
||||
screen mode or maximize window. Default is `true`.
|
||||
* `simpleFullscreen` boolean (optional) _macOS_ - Use pre-Lion fullscreen on
|
||||
macOS. Default is `false`.
|
||||
* `skipTaskbar` boolean (optional) _macOS_ _Windows_ - Whether to show the window in taskbar.
|
||||
Default is `false`.
|
||||
* `hiddenInMissionControl` boolean (optional) _macOS_ - Whether window should be hidden when the user toggles into mission control.
|
||||
* `kiosk` boolean (optional) - Whether the window is in kiosk mode. Default is `false`.
|
||||
* `title` string (optional) - Default window title. Default is `"Electron"`. If the HTML tag `<title>` is defined in the HTML file loaded by `loadURL()`, this property will be ignored.
|
||||
* `icon` ([NativeImage](../native-image.md) | string) (optional) - The window icon. On Windows it is
|
||||
recommended to use `ICO` icons to get best visual effects, you can also
|
||||
leave it undefined so the executable's icon will be used.
|
||||
* `show` boolean (optional) - Whether window should be shown when created. Default is
|
||||
`true`.
|
||||
* `frame` boolean (optional) - Specify `false` to create a
|
||||
[frameless window](../../tutorial/window-customization.md#create-frameless-windows). Default is `true`.
|
||||
* `parent` BaseWindow (optional) - Specify parent window. Default is `null`.
|
||||
* `modal` boolean (optional) - Whether this is a modal window. This only works when the
|
||||
window is a child window. Default is `false`.
|
||||
* `acceptFirstMouse` boolean (optional) _macOS_ - Whether clicking an
|
||||
inactive window will also click through to the web contents. Default is
|
||||
`false` on macOS. This option is not configurable on other platforms.
|
||||
* `disableAutoHideCursor` boolean (optional) - Whether to hide cursor when typing.
|
||||
Default is `false`.
|
||||
* `autoHideMenuBar` boolean (optional) - Auto hide the menu bar unless the `Alt`
|
||||
key is pressed. Default is `false`.
|
||||
* `enableLargerThanScreen` boolean (optional) _macOS_ - Enable the window to
|
||||
be resized larger than screen. Only relevant for macOS, as other OSes
|
||||
allow larger-than-screen windows by default. Default is `false`.
|
||||
* `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](../browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
|
||||
* `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
|
||||
* `opacity` number (optional) _macOS_ _Windows_ - Set the initial opacity of
|
||||
the window, between 0.0 (fully transparent) and 1.0 (fully opaque). This
|
||||
is only implemented on Windows and macOS.
|
||||
* `darkTheme` boolean (optional) - Forces using dark theme for the window, only works on
|
||||
some GTK+3 desktop environments. Default is `false`.
|
||||
* `transparent` boolean (optional) - Makes the window [transparent](../../tutorial/window-customization.md#create-transparent-windows).
|
||||
Default is `false`. On Windows, does not work unless the window is frameless.
|
||||
* `type` string (optional) - The type of window, default is normal window. See more about
|
||||
this below.
|
||||
* `visualEffectState` string (optional) _macOS_ - Specify how the material
|
||||
appearance should reflect window activity state on macOS. Must be used
|
||||
with the `vibrancy` property. Possible values are:
|
||||
* `followWindow` - The backdrop should automatically appear active when the window is active, and inactive when it is not. This is the default.
|
||||
* `active` - The backdrop should always appear active.
|
||||
* `inactive` - The backdrop should always appear inactive.
|
||||
* `titleBarStyle` string (optional) _macOS_ _Windows_ - The style of window title bar.
|
||||
Default is `default`. Possible values are:
|
||||
* `default` - Results in the standard title bar for macOS or Windows respectively.
|
||||
* `hidden` - Results in a hidden title bar and a full size content window. On macOS, the window still has the standard window controls (“traffic lights”) in the top left. On Windows, when combined with `titleBarOverlay: true` it will activate the Window Controls Overlay (see `titleBarOverlay` for more information), otherwise no window controls will be shown.
|
||||
* `hiddenInset` _macOS_ - Only on macOS, results in a hidden title bar
|
||||
with an alternative look where the traffic light buttons are slightly
|
||||
more inset from the window edge.
|
||||
* `customButtonsOnHover` _macOS_ - Only on macOS, results in a hidden
|
||||
title bar and a full size content window, the traffic light buttons will
|
||||
display when being hovered over in the top left of the window.
|
||||
**Note:** This option is currently experimental.
|
||||
* `trafficLightPosition` [Point](point.md) (optional) _macOS_ -
|
||||
Set a custom position for the traffic light buttons in frameless windows.
|
||||
* `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
|
||||
should have rounded corners on macOS. Default is `true`. Setting this property
|
||||
to `false` will prevent the window from being fullscreenable.
|
||||
* `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
|
||||
Windows, which adds standard window frame. Setting it to `false` will remove
|
||||
window shadow and window animations. Default is `true`.
|
||||
* `vibrancy` string (optional) _macOS_ - Add a type of vibrancy effect to
|
||||
the window, only on macOS. Can be `appearance-based`, `titlebar`, `selection`,
|
||||
`menu`, `popover`, `sidebar`, `header`, `sheet`, `window`, `hud`, `fullscreen-ui`,
|
||||
`tooltip`, `content`, `under-window`, or `under-page`.
|
||||
* `backgroundMaterial` string (optional) _Windows_ - Set the window's
|
||||
system-drawn background material, including behind the non-client area.
|
||||
Can be `auto`, `none`, `mica`, `acrylic` or `tabbed`. See [win.setBackgroundMaterial](../browser-window.md#winsetbackgroundmaterialmaterial-windows) for more information.
|
||||
* `zoomToPageWidth` boolean (optional) _macOS_ - Controls the behavior on
|
||||
macOS when option-clicking the green stoplight button on the toolbar or by
|
||||
clicking the Window > Zoom menu item. If `true`, the window will grow to
|
||||
the preferred width of the web page when zoomed, `false` will cause it to
|
||||
zoom to the width of the screen. This will also affect the behavior when
|
||||
calling `maximize()` directly. Default is `false`.
|
||||
* `tabbingIdentifier` string (optional) _macOS_ - Tab group name, allows
|
||||
opening the window as a native tab. Windows with the same
|
||||
tabbing identifier will be grouped together. This also adds a native new
|
||||
tab button to your window's tab bar and allows your `app` and window to
|
||||
receive the `new-window-for-tab` event.
|
||||
|
||||
When setting minimum or maximum window size with `minWidth`/`maxWidth`/
|
||||
`minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from
|
||||
passing a size that does not follow size constraints to `setBounds`/`setSize` or
|
||||
to the constructor of `BrowserWindow`.
|
||||
|
||||
The possible values and behaviors of the `type` option are platform dependent.
|
||||
Possible values are:
|
||||
|
||||
* On Linux, possible types are `desktop`, `dock`, `toolbar`, `splash`,
|
||||
`notification`.
|
||||
* The `desktop` type places the window at the desktop background window level
|
||||
(kCGDesktopWindowLevel - 1). However, note that a desktop window will not
|
||||
receive focus, keyboard, or mouse events. You can still use globalShortcut to
|
||||
receive input sparingly.
|
||||
* The `dock` type creates a dock-like window behavior.
|
||||
* The `toolbar` type creates a window with a toolbar appearance.
|
||||
* The `splash` type behaves in a specific way. It is not
|
||||
draggable, even if the CSS styling of the window's body contains
|
||||
-webkit-app-region: drag. This type is commonly used for splash screens.
|
||||
* The `notification` type creates a window that behaves like a system notification.
|
||||
* On macOS, possible types are `desktop`, `textured`, `panel`.
|
||||
* The `textured` type adds metal gradient appearance
|
||||
(`NSWindowStyleMaskTexturedBackground`).
|
||||
* The `desktop` type places the window at the desktop background window level
|
||||
(`kCGDesktopWindowLevel - 1`). Note that desktop window will not receive
|
||||
focus, keyboard or mouse events, but you can use `globalShortcut` to receive
|
||||
input sparingly.
|
||||
* The `panel` type enables the window to float on top of full-screened apps
|
||||
by adding the `NSWindowStyleMaskNonactivatingPanel` style mask,normally
|
||||
reserved for NSPanel, at runtime. Also, the window will appear on all
|
||||
spaces (desktops).
|
||||
* On Windows, possible type is `toolbar`.
|
||||
|
|
@ -1,161 +1,11 @@
|
|||
# BrowserWindowConstructorOptions Object
|
||||
# BrowserWindowConstructorOptions Object extends `BaseWindowConstructorOptions`
|
||||
|
||||
* `width` Integer (optional) - Window's width in pixels. Default is `800`.
|
||||
* `height` Integer (optional) - Window's height in pixels. Default is `600`.
|
||||
* `x` Integer (optional) - (**required** if y is used) Window's left offset from screen.
|
||||
Default is to center the window.
|
||||
* `y` Integer (optional) - (**required** if x is used) Window's top offset from screen.
|
||||
Default is to center the window.
|
||||
* `useContentSize` boolean (optional) - The `width` and `height` would be used as web
|
||||
page's size, which means the actual window's size will include window
|
||||
frame's size and be slightly larger. Default is `false`.
|
||||
* `center` boolean (optional) - Show window in the center of the screen. Default is `false`.
|
||||
* `minWidth` Integer (optional) - Window's minimum width. Default is `0`.
|
||||
* `minHeight` Integer (optional) - Window's minimum height. Default is `0`.
|
||||
* `maxWidth` Integer (optional) - Window's maximum width. Default is no limit.
|
||||
* `maxHeight` Integer (optional) - Window's maximum height. Default is no limit.
|
||||
* `resizable` boolean (optional) - Whether window is resizable. Default is `true`.
|
||||
* `movable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
movable. This is not implemented on Linux. Default is `true`.
|
||||
* `minimizable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
minimizable. This is not implemented on Linux. Default is `true`.
|
||||
* `maximizable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
maximizable. This is not implemented on Linux. Default is `true`.
|
||||
* `closable` boolean (optional) _macOS_ _Windows_ - Whether window is
|
||||
closable. This is not implemented on Linux. Default is `true`.
|
||||
* `focusable` boolean (optional) - Whether the window can be focused. Default is
|
||||
`true`. On Windows setting `focusable: false` also implies setting
|
||||
`skipTaskbar: true`. On Linux setting `focusable: false` makes the window
|
||||
stop interacting with wm, so the window will always stay on top in all
|
||||
workspaces.
|
||||
* `alwaysOnTop` boolean (optional) - Whether the window should always stay on top of
|
||||
other windows. Default is `false`.
|
||||
* `fullscreen` boolean (optional) - Whether the window should show in fullscreen. When
|
||||
explicitly set to `false` the fullscreen button will be hidden or disabled
|
||||
on macOS. Default is `false`.
|
||||
* `fullscreenable` boolean (optional) - Whether the window can be put into fullscreen
|
||||
mode. On macOS, also whether the maximize/zoom button should toggle full
|
||||
screen mode or maximize window. Default is `true`.
|
||||
* `simpleFullscreen` boolean (optional) _macOS_ - Use pre-Lion fullscreen on
|
||||
macOS. Default is `false`.
|
||||
* `skipTaskbar` boolean (optional) _macOS_ _Windows_ - Whether to show the window in taskbar.
|
||||
Default is `false`.
|
||||
* `hiddenInMissionControl` boolean (optional) _macOS_ - Whether window should be hidden when the user toggles into mission control.
|
||||
* `kiosk` boolean (optional) - Whether the window is in kiosk mode. Default is `false`.
|
||||
* `title` string (optional) - Default window title. Default is `"Electron"`. If the HTML tag `<title>` is defined in the HTML file loaded by `loadURL()`, this property will be ignored.
|
||||
* `icon` ([NativeImage](../native-image.md) | string) (optional) - The window icon. On Windows it is
|
||||
recommended to use `ICO` icons to get best visual effects, you can also
|
||||
leave it undefined so the executable's icon will be used.
|
||||
* `show` boolean (optional) - Whether window should be shown when created. Default is
|
||||
`true`.
|
||||
* `paintWhenInitiallyHidden` boolean (optional) - Whether the renderer should be active when `show` is `false` and it has just been created. In order for `document.visibilityState` to work correctly on first load with `show: false` you should set this to `false`. Setting this to `false` will cause the `ready-to-show` event to not fire. Default is `true`.
|
||||
* `frame` boolean (optional) - Specify `false` to create a
|
||||
[frameless window](../../tutorial/window-customization.md#create-frameless-windows). Default is `true`.
|
||||
* `parent` BrowserWindow (optional) - Specify parent window. Default is `null`.
|
||||
* `modal` boolean (optional) - Whether this is a modal window. This only works when the
|
||||
window is a child window. Default is `false`.
|
||||
* `acceptFirstMouse` boolean (optional) _macOS_ - Whether clicking an
|
||||
inactive window will also click through to the web contents. Default is
|
||||
`false` on macOS. This option is not configurable on other platforms.
|
||||
* `disableAutoHideCursor` boolean (optional) - Whether to hide cursor when typing.
|
||||
Default is `false`.
|
||||
* `autoHideMenuBar` boolean (optional) - Auto hide the menu bar unless the `Alt`
|
||||
key is pressed. Default is `false`.
|
||||
* `enableLargerThanScreen` boolean (optional) _macOS_ - Enable the window to
|
||||
be resized larger than screen. Only relevant for macOS, as other OSes
|
||||
allow larger-than-screen windows by default. Default is `false`.
|
||||
* `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](../browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
|
||||
* `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
|
||||
* `opacity` number (optional) _macOS_ _Windows_ - Set the initial opacity of
|
||||
the window, between 0.0 (fully transparent) and 1.0 (fully opaque). This
|
||||
is only implemented on Windows and macOS.
|
||||
* `darkTheme` boolean (optional) - Forces using dark theme for the window, only works on
|
||||
some GTK+3 desktop environments. Default is `false`.
|
||||
* `transparent` boolean (optional) - Makes the window [transparent](../../tutorial/window-customization.md#create-transparent-windows).
|
||||
Default is `false`. On Windows, does not work unless the window is frameless.
|
||||
* `type` string (optional) - The type of window, default is normal window. See more about
|
||||
this below.
|
||||
* `visualEffectState` string (optional) _macOS_ - Specify how the material
|
||||
appearance should reflect window activity state on macOS. Must be used
|
||||
with the `vibrancy` property. Possible values are:
|
||||
* `followWindow` - The backdrop should automatically appear active when the window is active, and inactive when it is not. This is the default.
|
||||
* `active` - The backdrop should always appear active.
|
||||
* `inactive` - The backdrop should always appear inactive.
|
||||
* `titleBarStyle` string (optional) _macOS_ _Windows_ - The style of window title bar.
|
||||
Default is `default`. Possible values are:
|
||||
* `default` - Results in the standard title bar for macOS or Windows respectively.
|
||||
* `hidden` - Results in a hidden title bar and a full size content window. On macOS, the window still has the standard window controls (“traffic lights”) in the top left. On Windows, when combined with `titleBarOverlay: true` it will activate the Window Controls Overlay (see `titleBarOverlay` for more information), otherwise no window controls will be shown.
|
||||
* `hiddenInset` _macOS_ - Only on macOS, results in a hidden title bar
|
||||
with an alternative look where the traffic light buttons are slightly
|
||||
more inset from the window edge.
|
||||
* `customButtonsOnHover` _macOS_ - Only on macOS, results in a hidden
|
||||
title bar and a full size content window, the traffic light buttons will
|
||||
display when being hovered over in the top left of the window.
|
||||
**Note:** This option is currently experimental.
|
||||
* `trafficLightPosition` [Point](point.md) (optional) _macOS_ -
|
||||
Set a custom position for the traffic light buttons in frameless windows.
|
||||
* `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
|
||||
should have rounded corners on macOS. Default is `true`. Setting this property
|
||||
to `false` will prevent the window from being fullscreenable.
|
||||
* `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
|
||||
Windows, which adds standard window frame. Setting it to `false` will remove
|
||||
window shadow and window animations. Default is `true`.
|
||||
* `vibrancy` string (optional) _macOS_ - Add a type of vibrancy effect to
|
||||
the window, only on macOS. Can be `appearance-based`, `titlebar`, `selection`,
|
||||
`menu`, `popover`, `sidebar`, `header`, `sheet`, `window`, `hud`, `fullscreen-ui`,
|
||||
`tooltip`, `content`, `under-window`, or `under-page`.
|
||||
* `backgroundMaterial` string (optional) _Windows_ - Set the window's
|
||||
system-drawn background material, including behind the non-client area.
|
||||
Can be `auto`, `none`, `mica`, `acrylic` or `tabbed`. See [win.setBackgroundMaterial](../browser-window.md#winsetbackgroundmaterialmaterial-windows) for more information.
|
||||
* `zoomToPageWidth` boolean (optional) _macOS_ - Controls the behavior on
|
||||
macOS when option-clicking the green stoplight button on the toolbar or by
|
||||
clicking the Window > Zoom menu item. If `true`, the window will grow to
|
||||
the preferred width of the web page when zoomed, `false` will cause it to
|
||||
zoom to the width of the screen. This will also affect the behavior when
|
||||
calling `maximize()` directly. Default is `false`.
|
||||
* `tabbingIdentifier` string (optional) _macOS_ - Tab group name, allows
|
||||
opening the window as a native tab. Windows with the same
|
||||
tabbing identifier will be grouped together. This also adds a native new
|
||||
tab button to your window's tab bar and allows your `app` and window to
|
||||
receive the `new-window-for-tab` event.
|
||||
* `webPreferences` [WebPreferences](web-preferences.md?inline) (optional) - Settings of web page's features.
|
||||
* `paintWhenInitiallyHidden` boolean (optional) - Whether the renderer should be active when `show` is `false` and it has just been created. In order for `document.visibilityState` to work correctly on first load with `show: false` you should set this to `false`. Setting this to `false` will cause the `ready-to-show` event to not fire. Default is `true`.
|
||||
* `titleBarOverlay` Object | Boolean (optional) - When using a frameless window in conjunction with `win.setWindowButtonVisibility(true)` on macOS or using a `titleBarStyle` so that the standard window controls ("traffic lights" on macOS) are visible, this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. Specifying `true` will result in an overlay with default system colors. Default is `false`.
|
||||
* `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
|
||||
* `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
|
||||
* `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
|
||||
|
||||
When setting minimum or maximum window size with `minWidth`/`maxWidth`/
|
||||
`minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from
|
||||
passing a size that does not follow size constraints to `setBounds`/`setSize` or
|
||||
to the constructor of `BrowserWindow`.
|
||||
|
||||
The possible values and behaviors of the `type` option are platform dependent.
|
||||
Possible values are:
|
||||
|
||||
* On Linux, possible types are `desktop`, `dock`, `toolbar`, `splash`,
|
||||
`notification`.
|
||||
* The `desktop` type places the window at the desktop background window level
|
||||
(kCGDesktopWindowLevel - 1). However, note that a desktop window will not
|
||||
receive focus, keyboard, or mouse events. You can still use globalShortcut to
|
||||
receive input sparingly.
|
||||
* The `dock` type creates a dock-like window behavior.
|
||||
* The `toolbar` type creates a window with a toolbar appearance.
|
||||
* The `splash` type behaves in a specific way. It is not
|
||||
draggable, even if the CSS styling of the window's body contains
|
||||
-webkit-app-region: drag. This type is commonly used for splash screens.
|
||||
* The `notification` type creates a window that behaves like a system notification.
|
||||
* On macOS, possible types are `desktop`, `textured`, `panel`.
|
||||
* The `textured` type adds metal gradient appearance
|
||||
(`NSWindowStyleMaskTexturedBackground`).
|
||||
* The `desktop` type places the window at the desktop background window level
|
||||
(`kCGDesktopWindowLevel - 1`). Note that desktop window will not receive
|
||||
focus, keyboard or mouse events, but you can use `globalShortcut` to receive
|
||||
input sparingly.
|
||||
* The `panel` type enables the window to float on top of full-screened apps
|
||||
by adding the `NSWindowStyleMaskNonactivatingPanel` style mask,normally
|
||||
reserved for NSPanel, at runtime. Also, the window will appear on all
|
||||
spaces (desktops).
|
||||
* On Windows, possible type is `toolbar`.
|
||||
|
||||
[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables
|
||||
[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis
|
||||
|
|
|
|||
106
docs/api/view.md
Normal file
106
docs/api/view.md
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
# View
|
||||
|
||||
> Create and layout native views.
|
||||
|
||||
Process: [Main](../glossary.md#main-process)
|
||||
|
||||
This module cannot be used until the `ready` event of the `app`
|
||||
module is emitted.
|
||||
|
||||
```js
|
||||
const { BaseWindow, View } = require('electron')
|
||||
const win = new BaseWindow()
|
||||
const view = new View()
|
||||
|
||||
view.setBackgroundColor('red')
|
||||
view.setBounds({ x: 0, y: 0, width: 100, height: 100 })
|
||||
win.contentView.addChildView(view)
|
||||
```
|
||||
|
||||
## Class: View
|
||||
|
||||
> A basic native view.
|
||||
|
||||
Process: [Main](../glossary.md#main-process)
|
||||
|
||||
`View` is an [EventEmitter][event-emitter].
|
||||
|
||||
### `new View()`
|
||||
|
||||
Creates a new `View`.
|
||||
|
||||
### Instance Events
|
||||
|
||||
Objects created with `new View` emit the following events:
|
||||
|
||||
#### Event: 'bounds-changed'
|
||||
|
||||
Emitted when the view's bounds have changed in response to being laid out. The
|
||||
new bounds can be retrieved with [`view.getBounds()`](#viewgetbounds).
|
||||
|
||||
### Instance Methods
|
||||
|
||||
Objects created with `new View` have the following instance methods:
|
||||
|
||||
#### `view.addChildView(view[, index])`
|
||||
|
||||
* `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.
|
||||
|
||||
#### `view.removeChildView(view)`
|
||||
|
||||
* `view` View - Child view to remove.
|
||||
|
||||
#### `view.setBounds(bounds)`
|
||||
|
||||
* `bounds` [Rectangle](structures/rectangle.md) - New bounds of the View.
|
||||
|
||||
#### `view.getBounds()`
|
||||
|
||||
Returns [`Rectangle`](structures/rectangle.md) - The bounds of this View, relative to its parent.
|
||||
|
||||
#### `view.setBackgroundColor(color)`
|
||||
|
||||
* `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`.
|
||||
|
||||
#### `view.setVisible(visible)`
|
||||
|
||||
* `visible` boolean - If false, the view will be hidden from display.
|
||||
|
||||
### Instance Properties
|
||||
|
||||
Objects created with `new View` have the following properties:
|
||||
|
||||
#### `view.children` _Readonly_
|
||||
|
||||
A `View[]` property representing the child views of this view.
|
||||
|
||||
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
|
||||
58
docs/api/web-contents-view.md
Normal file
58
docs/api/web-contents-view.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
# WebContentsView
|
||||
|
||||
> A View that displays a WebContents.
|
||||
|
||||
Process: [Main](../glossary.md#main-process)
|
||||
|
||||
This module cannot be used until the `ready` event of the `app`
|
||||
module is emitted.
|
||||
|
||||
```js
|
||||
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](../glossary.md#main-process)
|
||||
|
||||
`WebContentsView` inherits from [`View`](view.md).
|
||||
|
||||
`WebContentsView` is an [EventEmitter][event-emitter].
|
||||
|
||||
### `new WebContentsView([options])`
|
||||
|
||||
* `options` Object (optional)
|
||||
* `webPreferences` [WebPreferences](structures/web-preferences.md) (optional) - Settings of web page's features.
|
||||
|
||||
Creates an empty WebContentsView.
|
||||
|
||||
### Instance Properties
|
||||
|
||||
Objects created with `new WebContentsView` have the following properties, in
|
||||
addition to those inherited from [View](view.md):
|
||||
|
||||
#### `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.
|
||||
|
||||
```js
|
||||
const { WebContentsView } = require('electron')
|
||||
const view = new WebContentsView()
|
||||
view.webContents.loadURL('https://electronjs.org/')
|
||||
```
|
||||
|
||||
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
|
||||
|
|
@ -4,9 +4,10 @@
|
|||
|
||||
Electron's `webview` tag is based on [Chromium's `webview`][chrome-webview], which
|
||||
is undergoing dramatic architectural changes. This impacts the stability of `webviews`,
|
||||
including rendering, navigation, and event routing. We currently recommend to not
|
||||
use the `webview` tag and to consider alternatives, like `iframe`, [Electron's `BrowserView`](browser-view.md),
|
||||
or an architecture that avoids embedded content altogether.
|
||||
including rendering, navigation, and event routing. We currently recommend to
|
||||
not use the `webview` tag and to consider alternatives, like `iframe`, a
|
||||
[`WebContentsView`](web-contents-view.md), or an architecture that avoids
|
||||
embedded content altogether.
|
||||
|
||||
## Enabling
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,18 @@ app.on('gpu-process-crashed', (event, killed) => { /* ... */ })
|
|||
app.on('child-process-gone', (event, details) => { /* ... */ })
|
||||
```
|
||||
|
||||
### Behavior Changed: `BrowserView.setAutoResize` behavior on macOS
|
||||
|
||||
In Electron 29, BrowserView is now a wrapper around the new [WebContentsView](api/web-contents-view.md) API.
|
||||
|
||||
Previously, the `setAutoResize` function of the `BrowserView` API was backed by [autoresizing](https://developer.apple.com/documentation/appkit/nsview/1483281-autoresizingmask?language=objc) on macOS, and by a custom algorithm on Windows and Linux.
|
||||
For simple use cases such as making a BrowserView fill the entire window, the behavior of these two approaches was identical.
|
||||
However, in more advanced cases, BrowserViews would be autoresized differently on macOS than they would be on other platforms, as the custom resizing algorithm for Windows and Linux did not perfectly match the behavior of macOS's autoresizing API.
|
||||
The autoresizing behavior is now standardized across all platforms.
|
||||
|
||||
If your app uses `BrowserView.setAutoResize` to do anything more complex than making a BrowserView fill the entire window, it's likely you already had custom logic in place to handle this difference in behavior on macOS.
|
||||
If so, that logic will no longer be needed in Electron 29 as autoresizing behavior is consistent.
|
||||
|
||||
## Planned Breaking API Changes (28.0)
|
||||
|
||||
### Behavior Changed: `WebContents.backgroundThrottling` set to false affects all `WebContents` in the host `BrowserWindow`
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ will be able to execute native code on the user's machine.
|
|||
Under no circumstances should you load and execute remote code with
|
||||
Node.js integration enabled. Instead, use only local files (packaged together
|
||||
with your application) to execute Node.js code. To display remote content, use
|
||||
the [`<webview>`][webview-tag] tag or [`BrowserView`][browser-view], make sure
|
||||
to disable the `nodeIntegration` and enable `contextIsolation`.
|
||||
the [`<webview>`][webview-tag] tag or a [`WebContentsView`][web-contents-view]
|
||||
and make sure to disable the `nodeIntegration` and enable `contextIsolation`.
|
||||
:::
|
||||
|
||||
:::info Electron security warnings
|
||||
|
|
@ -166,7 +166,7 @@ This recommendation is the default behavior in Electron since 5.0.0.
|
|||
:::
|
||||
|
||||
It is paramount that you do not enable Node.js integration in any renderer
|
||||
([`BrowserWindow`][browser-window], [`BrowserView`][browser-view], or
|
||||
([`BrowserWindow`][browser-window], [`WebContentsView`][web-contents-view], or
|
||||
[`<webview>`][webview-tag]) that loads remote content. The goal is to limit the
|
||||
powers you grant to remote content, thus making it dramatically more difficult
|
||||
for an attacker to harm your users should they gain the ability to execute
|
||||
|
|
@ -306,8 +306,8 @@ This recommendation is Electron's default.
|
|||
|
||||
You may have already guessed that disabling the `webSecurity` property on a
|
||||
renderer process ([`BrowserWindow`][browser-window],
|
||||
[`BrowserView`][browser-view], or [`<webview>`][webview-tag]) disables crucial
|
||||
security features.
|
||||
[`WebContentsView`][web-contents-view], or [`<webview>`][webview-tag]) disables
|
||||
crucial security features.
|
||||
|
||||
Do not disable `webSecurity` in production applications.
|
||||
|
||||
|
|
@ -782,10 +782,10 @@ learn how to serve files / content from a custom protocol.
|
|||
|
||||
[breaking-changes]: ../breaking-changes.md
|
||||
[browser-window]: ../api/browser-window.md
|
||||
[browser-view]: ../api/browser-view.md
|
||||
[webview-tag]: ../api/webview-tag.md
|
||||
[web-contents-view]: ../api/web-contents-view.md
|
||||
[responsible-disclosure]: https://en.wikipedia.org/wiki/Responsible_disclosure
|
||||
[web-contents]: ../api/web-contents.md
|
||||
[window-open-handler]: ../api/web-contents.md#contentssetwindowopenhandlerhandler
|
||||
[will-navigate]: ../api/web-contents.md#event-will-navigate
|
||||
[open-external]: ../api/shell.md#shellopenexternalurl-options
|
||||
[responsible-disclosure]: https://en.wikipedia.org/wiki/Responsible_disclosure
|
||||
|
|
|
|||
|
|
@ -42,16 +42,15 @@ Compared to an `<iframe>`, `<webview>` tends to be slightly slower but offers
|
|||
much greater control in loading and communicating with the third-party content
|
||||
and handling various events.
|
||||
|
||||
### BrowserViews
|
||||
### WebContentsView
|
||||
|
||||
[BrowserViews](../api/browser-view.md) are not a part of the DOM - instead,
|
||||
they are created in and controlled by your Main process. They are simply
|
||||
another layer of web content on top of your existing window. This means
|
||||
that they are completely separate from your own `BrowserWindow` content and
|
||||
their position is not controlled by the DOM or CSS. Instead, it is controlled
|
||||
by setting the bounds in the Main process.
|
||||
[`WebContentsView`](../api/web-contents-view.md)s are not a part of the
|
||||
DOM—instead, they are created, controlled, positioned, and sized by your
|
||||
Main process. Using `WebContentsView`, you can combine and layer many pages
|
||||
together in the same [`BaseWindow`](../api/base-window.md).
|
||||
|
||||
`BrowserViews` offer the greatest control over their contents, since they
|
||||
implement the `webContents` similarly to how the `BrowserWindow` does it.
|
||||
However, as `BrowserViews` are not a part of your DOM, but are rather overlaid
|
||||
on top of them, you will have to manage their position manually.
|
||||
`WebContentsView`s offer the greatest control over their contents, since they
|
||||
implement the `webContents` similarly to how `BrowserWindow` does it. However,
|
||||
as `WebContentsView`s are not elements inside the DOM, positioning them
|
||||
accurately with respect to DOM content requires coordination between the
|
||||
Main and Renderer processes.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue