190 lines
5.3 KiB
Markdown
190 lines
5.3 KiB
Markdown
# webFrame
|
|
|
|
> Customize the rendering of the current web page.
|
|
|
|
Process: [Renderer](../glossary.md#renderer-process)
|
|
|
|
An example of zooming current page to 200%.
|
|
|
|
```javascript
|
|
const {webFrame} = require('electron')
|
|
|
|
webFrame.setZoomFactor(2)
|
|
```
|
|
|
|
## Methods
|
|
|
|
The `webFrame` module has the following methods:
|
|
|
|
### `webFrame.setZoomFactor(factor)`
|
|
|
|
* `factor` Number - Zoom factor.
|
|
|
|
Changes the zoom factor to the specified factor. Zoom factor is
|
|
zoom percent divided by 100, so 300% = 3.0.
|
|
|
|
### `webFrame.getZoomFactor()`
|
|
|
|
Returns `Number` - The current zoom factor.
|
|
|
|
### `webFrame.setZoomLevel(level)`
|
|
|
|
* `level` Number - Zoom level
|
|
|
|
Changes the zoom level to the specified level. The original size is 0 and each
|
|
increment above or below represents zooming 20% larger or smaller to default
|
|
limits of 300% and 50% of original size, respectively.
|
|
|
|
### `webFrame.getZoomLevel()`
|
|
|
|
Returns `Number` - The current zoom level.
|
|
|
|
### `webFrame.setZoomLevelLimits(minimumLevel, maximumLevel)`
|
|
|
|
* `minimumLevel` Number
|
|
* `maximumLevel` Number
|
|
|
|
**Deprecated:** Call `setVisualZoomLevelLimits` instead to set the visual zoom
|
|
level limits. This method will be removed in Electron 2.0.
|
|
|
|
### `webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`
|
|
|
|
* `minimumLevel` Number
|
|
* `maximumLevel` Number
|
|
|
|
Sets the maximum and minimum pinch-to-zoom level.
|
|
|
|
### `webFrame.setLayoutZoomLevelLimits(minimumLevel, maximumLevel)`
|
|
|
|
* `minimumLevel` Number
|
|
* `maximumLevel` Number
|
|
|
|
Sets the maximum and minimum layout-based (i.e. non-visual) zoom level.
|
|
|
|
### `webFrame.setSpellCheckProvider(language, autoCorrectWord, provider)`
|
|
|
|
* `language` String
|
|
* `autoCorrectWord` Boolean
|
|
* `provider` Object
|
|
* `spellCheck` Function - Returns `Boolean`
|
|
* `text` String
|
|
|
|
Sets a provider for spell checking in input fields and text areas.
|
|
|
|
The `provider` must be an object that has a `spellCheck` method that returns
|
|
whether the word passed is correctly spelled.
|
|
|
|
An example of using [node-spellchecker][spellchecker] as provider:
|
|
|
|
```javascript
|
|
const {webFrame} = require('electron')
|
|
webFrame.setSpellCheckProvider('en-US', true, {
|
|
spellCheck (text) {
|
|
return !(require('spellchecker').isMisspelled(text))
|
|
}
|
|
})
|
|
```
|
|
|
|
### `webFrame.registerURLSchemeAsSecure(scheme)`
|
|
|
|
* `scheme` String
|
|
|
|
Registers the `scheme` as secure scheme.
|
|
|
|
Secure schemes do not trigger mixed content warnings. For example, `https` and
|
|
`data` are secure schemes because they cannot be corrupted by active network
|
|
attackers.
|
|
|
|
### `webFrame.registerURLSchemeAsBypassingCSP(scheme)`
|
|
|
|
* `scheme` String
|
|
|
|
Resources will be loaded from this `scheme` regardless of the current page's
|
|
Content Security Policy.
|
|
|
|
### `webFrame.registerURLSchemeAsPrivileged(scheme[, options])`
|
|
|
|
* `scheme` String
|
|
* `options` Object (optional)
|
|
* `secure` Boolean - (optional) Default true.
|
|
* `bypassCSP` Boolean - (optional) Default true.
|
|
* `allowServiceWorkers` Boolean - (optional) Default true.
|
|
* `supportFetchAPI` Boolean - (optional) Default true.
|
|
* `corsEnabled` Boolean - (optional) Default true.
|
|
|
|
Registers the `scheme` as secure, bypasses content security policy for resources,
|
|
allows registering ServiceWorker and supports fetch API.
|
|
|
|
Specify an option with the value of `false` to omit it from the registration.
|
|
An example of registering a privileged scheme, without bypassing Content Security Policy:
|
|
|
|
```javascript
|
|
const {webFrame} = require('electron')
|
|
webFrame.registerURLSchemeAsPrivileged('foo', { bypassCSP: false })
|
|
```
|
|
|
|
### `webFrame.insertText(text)`
|
|
|
|
* `text` String
|
|
|
|
Inserts `text` to the focused element.
|
|
|
|
### `webFrame.executeJavaScript(code[, userGesture, callback])`
|
|
|
|
* `code` String
|
|
* `userGesture` Boolean (optional) - Default is `false`.
|
|
* `callback` Function (optional) - Called after script has been executed.
|
|
* `result` Any
|
|
|
|
Evaluates `code` in page.
|
|
|
|
In the browser window some HTML APIs like `requestFullScreen` can only be
|
|
invoked by a gesture from the user. Setting `userGesture` to `true` will remove
|
|
this limitation.
|
|
|
|
### `webFrame.getResourceUsage()`
|
|
|
|
Returns `Object`:
|
|
|
|
* `images` [MemoryUsageDetails](structures/memory-usage-details.md)
|
|
* `cssStyleSheets` [MemoryUsageDetails](structures/memory-usage-details.md)
|
|
* `xslStyleSheets` [MemoryUsageDetails](structures/memory-usage-details.md)
|
|
* `fonts` [MemoryUsageDetails](structures/memory-usage-details.md)
|
|
* `other` [MemoryUsageDetails](structures/memory-usage-details.md)
|
|
|
|
Returns an object describing usage information of Blink's internal memory
|
|
caches.
|
|
|
|
```javascript
|
|
const {webFrame} = require('electron')
|
|
console.log(webFrame.getResourceUsage())
|
|
```
|
|
|
|
This will generate:
|
|
|
|
```javascript
|
|
{
|
|
images: {
|
|
count: 22,
|
|
size: 2549,
|
|
liveSize: 2542
|
|
},
|
|
cssStyleSheets: { /* same with "images" */ },
|
|
xslStyleSheets: { /* same with "images" */ },
|
|
fonts: { /* same with "images" */ },
|
|
other: { /* same with "images" */ }
|
|
}
|
|
```
|
|
|
|
### `webFrame.clearCache()`
|
|
|
|
Attempts to free memory that is no longer being used (like images from a
|
|
previous navigation).
|
|
|
|
Note that blindly calling this method probably makes Electron slower since it
|
|
will have to refill these emptied caches, you should only call it if an event
|
|
in your app has occurred that makes you think your page is actually using less
|
|
memory (i.e. you have navigated from a super heavy page to a mostly empty one,
|
|
and intend to stay there).
|
|
|
|
[spellchecker]: https://github.com/atom/node-spellchecker
|