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
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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue