Allow webview guests to be resized manually
This adds the `disableguestresize` property for webviews to prevent the webview guest from reacting to size changes of the webview element. This also partially documents the `webContents.setSize` function in order to manually control the webview guest size. These two features can be combined to improve resize performance for e.g. webviews that span the entire window. This greatly reduces the lag described in #6905.
This commit is contained in:
parent
89feefac2c
commit
2986b7bc4a
9 changed files with 212 additions and 3 deletions
|
@ -1131,6 +1131,15 @@ win.webContents.on('did-finish-load', () => {
|
|||
|
||||
Shows pop-up dictionary that searches the selected word on the page.
|
||||
|
||||
#### `contents.setSize(options)`
|
||||
|
||||
Controls the bounds of the [`<webview>`](web-view-tag.md) guest.
|
||||
|
||||
* `options` Object
|
||||
* `normal` Object (optional) - New size of the webview guest. This is can be used in combination with the [`disableguestresize`](web-view-tag.md#disableguestresize) attribute to manually resize the webview guest.
|
||||
* `width` Integer
|
||||
* `height` Integer
|
||||
|
||||
#### `contents.isOffscreen()`
|
||||
|
||||
Returns `Boolean` - Indicates whether *offscreen rendering* is enabled.
|
||||
|
|
|
@ -243,6 +243,44 @@ webview.
|
|||
The existing webview will see the `destroy` event and will then create a new
|
||||
webContents when a new url is loaded.
|
||||
|
||||
### `disableguestresize`
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" disableguestresize></webview>
|
||||
```
|
||||
|
||||
Prevents the webview contents from resizing when the webview element itself is
|
||||
resized.
|
||||
|
||||
This can be used in combination with
|
||||
[`webContents.setSize`](web-view-tag.md#contentssetsize) to manually
|
||||
resize the webview contents in reaction to e.g. window size changes. This can
|
||||
make resizing faster compared to relying on the webview element bounds to
|
||||
automatically resize the contents.
|
||||
|
||||
```javascript
|
||||
const {webContents} = require('electron')
|
||||
|
||||
// We assume that `win` points to a `BrowserWindow` instance containing a
|
||||
// `<webview>` with `disableguestresize`.
|
||||
|
||||
win.on('resize', () => {
|
||||
const [width, height] = win.getContentSize()
|
||||
for (let wc of webContents.getAllWebContents()) {
|
||||
// Check if `wc` belongs to a webview in the `win` window.
|
||||
if (wc.hostWebContents &&
|
||||
wc.hostWebContents.id === win.webContents.id) {
|
||||
wc.setSize({
|
||||
normal: {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
The `webview` tag has the following methods:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue