electron/docs/api/web-contents.md

1056 lines
29 KiB
Markdown
Raw Normal View History

2015-08-20 13:17:53 +00:00
# webContents
2016-04-22 17:30:49 +00:00
> Render and control web pages.
2015-08-20 13:17:53 +00:00
`webContents` is an
[EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter).
2015-08-24 22:41:02 +00:00
It is responsible for rendering and controlling a web page and is a property of
the [`BrowserWindow`](browser-window.md) object. An example of accessing the
`webContents` object:
2015-08-20 13:17:53 +00:00
```javascript
const {BrowserWindow} = require('electron');
2015-08-20 13:17:53 +00:00
let win = new BrowserWindow({width: 800, height: 1500});
win.loadURL('http://github.com');
2015-08-20 13:17:53 +00:00
let webContents = win.webContents;
2015-08-20 13:17:53 +00:00
```
## Events
The `webContents` object emits the following events:
### Event: 'did-finish-load'
Emitted when the navigation is done, i.e. the spinner of the tab has stopped
spinning, and the `onload` event was dispatched.
### Event: 'did-fail-load'
Returns:
* `event` Event
* `errorCode` Integer
* `errorDescription` String
2015-11-13 08:03:40 +00:00
* `validatedURL` String
* `isMainFrame` Boolean
2015-08-20 13:17:53 +00:00
This event is like `did-finish-load` but emitted when the load failed or was
cancelled, e.g. `window.stop()` is invoked.
The full list of error codes and their meaning is available [here](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h).
Note that redirect responses will emit `errorCode` -3; you may want to ignore
that error explicitly.
2015-08-20 13:17:53 +00:00
### Event: 'did-frame-finish-load'
Returns:
* `event` Event
* `isMainFrame` Boolean
Emitted when a frame has done navigation.
### Event: 'did-start-loading'
Corresponds to the points in time when the spinner of the tab started spinning.
### Event: 'did-stop-loading'
Corresponds to the points in time when the spinner of the tab stopped spinning.
### Event: 'did-get-response-details'
Returns:
* `event` Event
* `status` Boolean
2015-11-13 08:03:40 +00:00
* `newURL` String
* `originalURL` String
2015-08-20 13:17:53 +00:00
* `httpResponseCode` Integer
* `requestMethod` String
* `referrer` String
* `headers` Object
* `resourceType` String
2015-08-20 13:17:53 +00:00
Emitted when details regarding a requested resource are available.
2015-08-20 13:17:53 +00:00
`status` indicates the socket connection to download the resource.
### Event: 'did-get-redirect-request'
Returns:
* `event` Event
2015-11-13 08:03:40 +00:00
* `oldURL` String
* `newURL` String
2015-08-20 13:17:53 +00:00
* `isMainFrame` Boolean
* `httpResponseCode` Integer
* `requestMethod` String
* `referrer` String
* `headers` Object
2015-08-20 13:17:53 +00:00
Emitted when a redirect is received while requesting a resource.
2015-08-20 13:17:53 +00:00
### Event: 'dom-ready'
Returns:
* `event` Event
Emitted when the document in the given frame is loaded.
### Event: 'page-favicon-updated'
Returns:
* `event` Event
2015-11-13 08:03:40 +00:00
* `favicons` Array - Array of URLs
2015-08-20 13:17:53 +00:00
Emitted when page receives favicon urls.
### Event: 'new-window'
Returns:
* `event` Event
* `url` String
* `frameName` String
* `disposition` String - Can be `default`, `foreground-tab`, `background-tab`,
`new-window` and `other`.
* `options` Object - The options which will be used for creating the new
`BrowserWindow`.
2015-08-20 13:17:53 +00:00
Emitted when the page requests to open a new window for a `url`. It could be
requested by `window.open` or an external link like `<a target='_blank'>`.
By default a new `BrowserWindow` will be created for the `url`.
Calling `event.preventDefault()` will prevent creating new windows.
2015-08-20 13:17:53 +00:00
### Event: 'will-navigate'
Returns:
* `event` Event
* `url` String
Emitted when a user or the page wants to start navigation. It can happen when
the `window.location` object is changed or a user clicks a link in the page.
2015-08-20 13:17:53 +00:00
2015-08-24 22:41:02 +00:00
This event will not emit when the navigation is started programmatically with
2015-11-13 08:03:40 +00:00
APIs like `webContents.loadURL` and `webContents.back`.
2015-08-20 13:17:53 +00:00
It is also not emitted for in-page navigations, such as clicking anchor links
or updating the `window.location.hash`. Use `did-navigate-in-page` event for
this purpose.
Calling `event.preventDefault()` will prevent the navigation.
2015-08-20 13:17:53 +00:00
### Event: 'did-navigate'
Returns:
* `event` Event
* `url` String
Emitted when a navigation is done.
This event is not emitted for in-page navigations, such as clicking anchor links
or updating the `window.location.hash`. Use `did-navigate-in-page` event for
this purpose.
### Event: 'did-navigate-in-page'
Returns:
* `event` Event
* `url` String
Emitted when an in-page navigation happened.
When in-page navigation happens, the page URL changes but does not cause
navigation outside of the page. Examples of this occurring are when anchor links
are clicked or when the DOM `hashchange` event is triggered.
2015-08-20 13:17:53 +00:00
### Event: 'crashed'
Emitted when the renderer process has crashed.
### Event: 'plugin-crashed'
Returns:
* `event` Event
* `name` String
* `version` String
Emitted when a plugin process has crashed.
### Event: 'destroyed'
Emitted when `webContents` is destroyed.
### Event: 'devtools-opened'
Emitted when DevTools is opened.
### Event: 'devtools-closed'
Emitted when DevTools is closed.
### Event: 'devtools-focused'
Emitted when DevTools is focused / opened.
2015-11-18 03:35:26 +00:00
### Event: 'certificate-error'
Returns:
* `event` Event
* `url` URL
* `error` String - The error code
* `certificate` Object
* `data` Buffer - PEM encoded data
* `issuerName` String
* `callback` Function
Emitted when failed to verify the `certificate` for `url`.
The usage is the same with [the `certificate-error` event of
`app`](app.md#event-certificate-error).
### Event: 'select-client-certificate'
Returns:
* `event` Event
* `url` URL
* `certificateList` [Objects]
* `data` Buffer - PEM encoded data
* `issuerName` String - Issuer's Common Name
* `callback` Function
Emitted when a client certificate is requested.
The usage is the same with [the `select-client-certificate` event of
`app`](app.md#event-select-client-certificate).
2015-10-28 13:14:00 +00:00
### Event: 'login'
Returns:
* `event` Event
* `request` Object
* `method` String
* `url` URL
* `referrer` URL
* `authInfo` Object
* `isProxy` Boolean
* `scheme` String
* `host` String
* `port` Integer
* `realm` String
* `callback` Function
Emitted when `webContents` wants to do basic auth.
The usage is the same with [the `login` event of `app`](app.md#event-login).
2015-12-17 23:10:42 +00:00
### Event: 'found-in-page'
2015-12-17 17:27:56 +00:00
Returns:
* `event` Event
* `result` Object
* `requestId` Integer
* `finalUpdate` Boolean - Indicates if more responses are to follow.
* `activeMatchOrdinal` Integer (optional) - Position of the active match.
2016-02-16 03:54:41 +00:00
* `matches` Integer (optional) - Number of Matches.
* `selectionArea` Object (optional) - Coordinates of first match region.
2015-12-17 17:27:56 +00:00
Emitted when a result is available for
[`webContents.findInPage`](web-contents.md#webcontentsfindinpage) request.
### Event: 'media-started-playing'
Emitted when media starts playing.
### Event: 'media-paused'
Emitted when media is paused or done playing.
### Event: 'did-change-theme-color'
Emitted when a page's theme color changes. This is usually due to encountering
a meta tag:
```html
<meta name='theme-color' content='#ff0000'>
```
2016-06-07 06:56:19 +00:00
### Event: 'update-target-url'
Returns:
* `event` Event
* `url` String
Emitted when mouse moves over a link or the keyboard moves the focus to a link.
### Event: 'cursor-changed'
Returns:
* `event` Event
* `type` String
2016-02-01 06:17:58 +00:00
* `image` NativeImage (optional)
* `scale` Float (optional)
Emitted when the cursor's type changes. The `type` parameter can be `default`,
`crosshair`, `pointer`, `text`, `wait`, `help`, `e-resize`, `n-resize`,
`ne-resize`, `nw-resize`, `s-resize`, `se-resize`, `sw-resize`, `w-resize`,
`ns-resize`, `ew-resize`, `nesw-resize`, `nwse-resize`, `col-resize`,
`row-resize`, `m-panning`, `e-panning`, `n-panning`, `ne-panning`, `nw-panning`,
`s-panning`, `se-panning`, `sw-panning`, `w-panning`, `move`, `vertical-text`,
`cell`, `context-menu`, `alias`, `progress`, `nodrop`, `copy`, `none`,
`not-allowed`, `zoom-in`, `zoom-out`, `grab`, `grabbing`, `custom`.
If the `type` parameter is `custom`, the `image` parameter will hold the custom
cursor image in a `NativeImage`, and the `scale` will hold scaling information
for the image.
2016-05-03 12:48:16 +00:00
### Event: 'context-menu'
Returns:
* `event` Event
* `params` Object
* `x` Integer - x coodinate
* `y` Integer - y coodinate
* `linkURL` String - URL of the link that encloses the node the context menu
was invoked on.
2016-05-03 12:48:16 +00:00
* `linkText` String - Text associated with the link. May be an empty
string if the contents of the link are an image.
2016-05-03 12:48:16 +00:00
* `pageURL` String - URL of the top level page that the context menu was
invoked on.
2016-05-03 12:48:16 +00:00
* `frameURL` String - URL of the subframe that the context menu was invoked
on.
2016-05-03 12:48:16 +00:00
* `srcURL` String - Source URL for the element that the context menu
was invoked on. Elements with source URLs are images, audio and video.
2016-05-03 12:48:16 +00:00
* `mediaType` String - Type of the node the context menu was invoked on. Can
be `none`, `image`, `audio`, `video`, `canvas`, `file` or `plugin`.
2016-05-03 12:48:16 +00:00
* `hasImageContent` Boolean - Wether the context menu was invoked on an image
which has non-empty contents.
2016-05-03 12:48:16 +00:00
* `isEditable` Boolean - Wether the context is editable.
* `selectionText` String - Text of the selection that the context menu was
invoked on.
2016-05-03 12:48:16 +00:00
* `titleText` String - Title or alt text of the selection that the context
was invoked on.
2016-05-03 12:48:16 +00:00
* `misspelledWord` String - The misspelled word under the cursor, if any.
* `frameCharset` String - The character encoding of the frame on which the
menu was invoked.
2016-05-03 12:48:16 +00:00
* `inputFieldType` String - If the context menu was invoked on an input
field, the type of that field. Possible values are `none`, `plainText`,
`password`, `other`.
2016-05-03 12:48:16 +00:00
* `menuSourceType` String - Input source that invoked the context menu.
Can be `none`, `mouse`, `keyboard`, `touch`, `touchMenu`.
* `mediaFlags` Object - The flags for the media element the context menu was
invoked on. See more about this below.
* `editFlags` Object - These flags indicate wether the renderer believes it is
able to perform the corresponding action. See more about this below.
The `mediaFlags` is an object with the following properties:
* `inError` Boolean - Wether the media element has crashed.
* `isPaused` Boolean - Wether the media element is paused.
* `isMuted` Boolean - Wether the media element is muted.
* `hasAudio` Boolean - Wether the media element has audio.
* `isLooping` Boolean - Wether the media element is looping.
* `isControlsVisible` Boolean - Wether the media element's controls are
visible.
* `canToggleControls` Boolean - Wether the media element's controls are
toggleable.
* `canRotate` Boolean - Wether the media element can be rotated.
The `editFlags` is an object with the following properties:
* `canUndo` Boolean - Wether the renderer believes it can undo.
* `canRedo` Boolean - Wether the renderer believes it can redo.
* `canCut` Boolean - Wether the renderer believes it can cut.
* `canCopy` Boolean - Wether the renderer believes it can copy
* `canPaste` Boolean - Wether the renderer believes it can paste.
* `canDelete` Boolean - Wether the renderer believes it can delete.
* `canSelectAll` Boolean - Wether the renderer believes it can select all.
2016-05-03 12:48:16 +00:00
Emitted when there is a new context menu that needs to be handled.
2016-05-31 08:07:45 +00:00
### Event: 'select-bluetooth-device'
Returns:
* `event` Event
* `devices` [Objects]
* `deviceName` String
* `deviceId` String
* `callback` Function
* `deviceId` String
Emitted when bluetooth device needs to be selected on call to
2016-06-01 06:09:14 +00:00
`navigator.bluetooth.requestDevice`. To use `navigator.bluetooth` api
`webBluetooth` should be enabled. If `event.preventDefault` is not called,
first available device will be selected. `callback` should be called with
`deviceId` to be selected, passing empty string to `callback` will
cancel the request.
2016-06-02 16:38:21 +00:00
```javascript
2016-06-01 06:09:14 +00:00
app.commandLine.appendSwitch('enable-web-bluetooth')
app.on('ready', () => {
webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
event.preventDefault()
let result = deviceList.find((device) => {
return device.deviceName === 'test'
})
if (!result) {
callback('')
} else {
callback(result.deviceId)
}
})
})
```
2016-05-31 08:07:45 +00:00
2015-08-20 13:17:53 +00:00
## Instance Methods
The `webContents` object has the following instance methods:
2015-11-13 08:03:40 +00:00
### `webContents.loadURL(url[, options])`
2015-08-20 13:17:53 +00:00
* `url` URL
* `options` Object (optional)
* `httpReferrer` String - A HTTP Referrer url.
* `userAgent` String - A user agent originating the request.
* `extraHeaders` String - Extra headers separated by "\n"
2015-08-20 13:17:53 +00:00
2015-08-20 17:03:53 +00:00
Loads the `url` in the window, the `url` must contain the protocol prefix,
2015-11-14 06:39:18 +00:00
e.g. the `http://` or `file://`. If the load should bypass http cache then
use the `pragma` header to achieve it.
```javascript
const options = {extraHeaders: 'pragma: no-cache\n'};
webContents.loadURL(url, options);
2015-11-14 06:39:18 +00:00
```
2015-08-20 13:17:53 +00:00
2015-12-02 21:49:42 +00:00
### `webContents.downloadURL(url)`
* `url` URL
Initiates a download of the resource at `url` without navigating. The
`will-download` event of `session` will be triggered.
2015-11-13 08:03:40 +00:00
### `webContents.getURL()`
2015-08-20 13:17:53 +00:00
Returns URL of the current web page.
2015-08-20 13:17:53 +00:00
```javascript
let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('http://github.com');
2015-08-20 13:17:53 +00:00
let currentURL = win.webContents.getURL();
2015-08-20 13:17:53 +00:00
```
### `webContents.getTitle()`
2015-08-20 17:03:53 +00:00
Returns the title of the current web page.
2015-08-20 13:17:53 +00:00
### `webContents.isLoading()`
Returns whether web page is still loading resources.
### `webContents.isLoadingMainFrame()`
Returns whether the main frame (and not just iframes or frames within it) is
still loading.
2015-08-20 13:17:53 +00:00
### `webContents.isWaitingForResponse()`
Returns whether the web page is waiting for a first-response from the main
2015-08-24 22:41:02 +00:00
resource of the page.
2015-08-20 13:17:53 +00:00
### `webContents.stop()`
Stops any pending navigation.
### `webContents.reload()`
2015-08-20 17:03:53 +00:00
Reloads the current web page.
2015-08-20 13:17:53 +00:00
### `webContents.reloadIgnoringCache()`
Reloads current page and ignores cache.
### `webContents.canGoBack()`
2015-08-20 17:03:53 +00:00
Returns whether the browser can go back to previous web page.
2015-08-20 13:17:53 +00:00
### `webContents.canGoForward()`
2015-08-20 17:03:53 +00:00
Returns whether the browser can go forward to next web page.
2015-08-20 13:17:53 +00:00
### `webContents.canGoToOffset(offset)`
* `offset` Integer
Returns whether the web page can go to `offset`.
### `webContents.clearHistory()`
Clears the navigation history.
### `webContents.goBack()`
2015-08-20 17:03:53 +00:00
Makes the browser go back a web page.
2015-08-20 13:17:53 +00:00
### `webContents.goForward()`
2015-08-20 17:03:53 +00:00
Makes the browser go forward a web page.
2015-08-20 13:17:53 +00:00
### `webContents.goToIndex(index)`
* `index` Integer
2015-08-20 17:03:53 +00:00
Navigates browser to the specified absolute web page index.
2015-08-20 13:17:53 +00:00
### `webContents.goToOffset(offset)`
* `offset` Integer
Navigates to the specified offset from the "current entry".
### `webContents.isCrashed()`
Whether the renderer process has crashed.
### `webContents.setUserAgent(userAgent)`
* `userAgent` String
Overrides the user agent for this web page.
2015-08-20 13:17:53 +00:00
### `webContents.getUserAgent()`
Returns a `String` representing the user agent for this web page.
2015-08-20 13:17:53 +00:00
### `webContents.insertCSS(css)`
* `css` String
2015-08-20 17:03:53 +00:00
Injects CSS into the current web page.
2015-08-20 13:17:53 +00:00
### `webContents.executeJavaScript(code[, userGesture, callback])`
2015-08-20 13:17:53 +00:00
* `code` String
2015-08-24 22:55:53 +00:00
* `userGesture` Boolean (optional)
* `callback` Function (optional) - Called after script has been executed.
2016-02-22 14:00:21 +00:00
* `result`
2015-08-20 13:17:53 +00:00
Evaluates `code` in page.
2015-08-24 22:41:02 +00:00
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.
2015-08-20 13:17:53 +00:00
### `webContents.setAudioMuted(muted)`
* `muted` Boolean
2015-08-20 13:17:53 +00:00
2015-08-20 17:03:53 +00:00
Mute the audio on the current web page.
2015-08-20 13:17:53 +00:00
### `webContents.isAudioMuted()`
Returns whether this page has been muted.
### `webContents.undo()`
Executes the editing command `undo` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.redo()`
Executes the editing command `redo` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.cut()`
Executes the editing command `cut` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.copy()`
Executes the editing command `copy` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.paste()`
Executes the editing command `paste` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.pasteAndMatchStyle()`
Executes the editing command `pasteAndMatchStyle` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.delete()`
Executes the editing command `delete` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.selectAll()`
Executes the editing command `selectAll` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.unselect()`
Executes the editing command `unselect` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.replace(text)`
* `text` String
Executes the editing command `replace` in web page.
2015-08-20 13:17:53 +00:00
### `webContents.replaceMisspelling(text)`
* `text` String
Executes the editing command `replaceMisspelling` in web page.
2015-08-20 13:17:53 +00:00
2016-01-13 03:55:49 +00:00
### `webContents.insertText(text)`
* `text` String
Inserts `text` to the focused element.
2015-12-17 23:10:42 +00:00
### `webContents.findInPage(text[, options])`
2015-12-17 17:27:56 +00:00
* `text` String - Content to be searched, must not be empty.
2016-02-16 03:54:41 +00:00
* `options` Object (optional)
2015-12-17 23:10:42 +00:00
* `forward` Boolean - Whether to search forward or backward, defaults to `true`.
* `findNext` Boolean - Whether the operation is first request or a follow up,
defaults to `false`.
* `matchCase` Boolean - Whether search should be case-sensitive,
defaults to `false`.
2015-12-17 17:27:56 +00:00
* `wordStart` Boolean - Whether to look only at the start of words.
2015-12-17 23:10:42 +00:00
defaults to `false`.
* `medialCapitalAsWordStart` Boolean - When combined with `wordStart`,
2015-12-17 17:27:56 +00:00
accepts a match in the middle of a word if the match begins with an
uppercase letter followed by a lowercase or non-letter.
2015-12-17 23:10:42 +00:00
Accepts several other intra-word matches, defaults to `false`.
2015-12-17 17:27:56 +00:00
Starts a request to find all matches for the `text` in the web page and returns
an `Integer` representing the request id used for the request. The result of
the request can be obtained by subscribing to
[`found-in-page`](web-contents.md#event-found-in-page) event.
2015-12-17 17:27:56 +00:00
### `webContents.stopFindInPage(action)`
2015-12-17 23:10:42 +00:00
* `action` String - Specifies the action to take place when ending
2015-12-21 12:54:55 +00:00
[`webContents.findInPage`](web-contents.md#webcontentfindinpage) request.
2015-12-17 23:10:42 +00:00
* `clearSelection` - Translate the selection into a normal selection.
* `keepSelection` - Clear the selection.
* `activateSelection` - Focus and click the selection node.
2015-12-17 17:27:56 +00:00
2015-12-17 23:10:42 +00:00
Stops any `findInPage` request for the `webContents` with the provided `action`.
2015-12-17 17:27:56 +00:00
```javascript
webContents.on('found-in-page', (event, result) => {
2015-12-17 17:27:56 +00:00
if (result.finalUpdate)
webContents.stopFindInPage('clearSelection');
2015-12-17 17:27:56 +00:00
});
const requestId = webContents.findInPage('api');
2015-12-17 23:10:42 +00:00
```
2015-12-17 17:27:56 +00:00
2015-08-20 13:17:53 +00:00
### `webContents.hasServiceWorker(callback)`
* `callback` Function
2015-08-20 17:03:53 +00:00
Checks if any ServiceWorker is registered and returns a boolean as
2015-08-20 13:17:53 +00:00
response to `callback`.
### `webContents.unregisterServiceWorker(callback)`
* `callback` Function
2015-08-20 17:03:53 +00:00
Unregisters any ServiceWorker if present and returns a boolean as
response to `callback` when the JS promise is fulfilled or false
2015-08-20 13:17:53 +00:00
when the JS promise is rejected.
### `webContents.print([options])`
* `options` Object (optional)
* `silent` Boolean - Don't ask user for print settings. Default is `false`.
* `printBackground` Boolean - Also prints the background color and image of
the web page. Default is `false`.
2015-08-20 13:17:53 +00:00
Prints window's web page. When `silent` is set to `false`, Electron will pick
up system's default printer and default settings for printing.
Calling `window.print()` in web page is equivalent to calling
2015-08-20 13:17:53 +00:00
`webContents.print({silent: false, printBackground: false})`.
**Note:** On Windows, the print API relies on `pdf.dll`. If your application
2015-08-20 17:03:53 +00:00
doesn't need the print feature, you can safely remove `pdf.dll` to reduce binary
2015-08-20 13:17:53 +00:00
size.
### `webContents.printToPDF(options, callback)`
* `options` Object
* `marginsType` Integer - Specifies the type of margins to use. Uses 0 for
default margin, 1 for no margin, and 2 for minimum margin.
* `pageSize` String - Specify page size of the generated PDF. Can be `A3`,
`A4`, `A5`, `Legal`, `Letter`, `Tabloid` or an Object containing `height`
and `width` in microns.
* `printBackground` Boolean - Whether to print CSS backgrounds.
* `printSelectionOnly` Boolean - Whether to print selection only.
* `landscape` Boolean - `true` for landscape, `false` for portrait.
* `callback` Function
2015-08-20 13:17:53 +00:00
Prints window's web page as PDF with Chromium's preview printing custom
settings.
The `callback` will be called with `callback(error, data)` on completion. The
`data` is a `Buffer` that contains the generated PDF data.
2015-08-20 17:03:53 +00:00
By default, an empty `options` will be regarded as:
```javascript
{
marginsType: 0,
printBackground: false,
printSelectionOnly: false,
landscape: false
2015-08-20 17:03:53 +00:00
}
```
2015-08-20 13:17:53 +00:00
An example of `webContents.printToPDF`:
2015-08-20 13:17:53 +00:00
```javascript
const {BrowserWindow} = require('electron');
const fs = require('fs');
2015-08-20 13:17:53 +00:00
let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('http://github.com');
2015-08-20 13:17:53 +00:00
win.webContents.on('did-finish-load', () => {
2015-08-20 13:17:53 +00:00
// Use default printing options
win.webContents.printToPDF({}, (error, data) => {
2015-08-20 13:17:53 +00:00
if (error) throw error;
fs.writeFile('/tmp/print.pdf', data, (error) => {
2015-09-20 22:28:41 +00:00
if (error)
2015-08-20 13:17:53 +00:00
throw error;
console.log('Write PDF successfully.');
});
});
2015-08-20 13:17:53 +00:00
});
```
### `webContents.addWorkSpace(path)`
* `path` String
Adds the specified path to DevTools workspace. Must be used after DevTools
creation:
```javascript
2016-05-10 17:38:42 +00:00
win.webContents.on('devtools-opened', () => {
win.webContents.addWorkSpace(__dirname);
});
```
2015-08-20 13:17:53 +00:00
### `webContents.removeWorkSpace(path)`
* `path` String
2015-09-09 21:11:06 +00:00
Removes the specified path from DevTools workspace.
2015-08-20 13:17:53 +00:00
### `webContents.openDevTools([options])`
* `options` Object (optional)
* `mode` String - Opens the devtools with specified dock state, can be
`right`, `bottom`, `undocked`, `detach`. Defaults to last used dock state.
In `undocked` mode it's possible to dock back. In `detach` mode it's not.
2016-01-04 02:46:30 +00:00
Opens the devtools.
### `webContents.closeDevTools()`
2016-01-04 02:46:30 +00:00
Closes the devtools.
### `webContents.isDevToolsOpened()`
2016-01-04 02:46:30 +00:00
Returns whether the devtools is opened.
### `webContents.isDevToolsFocused()`
Returns whether the devtools view is focused .
### `webContents.toggleDevTools()`
Toggles the developer tools.
### `webContents.inspectElement(x, y)`
* `x` Integer
* `y` Integer
Starts inspecting element at position (`x`, `y`).
### `webContents.inspectServiceWorker()`
Opens the developer tools for the service worker context.
2015-11-10 08:48:24 +00:00
### `webContents.send(channel[, arg1][, arg2][, ...])`
2015-08-20 13:17:53 +00:00
* `channel` String
2015-11-10 08:48:24 +00:00
* `arg` (optional)
2015-08-20 13:17:53 +00:00
2015-11-10 08:48:24 +00:00
Send an asynchronous message to renderer process via `channel`, you can also
2016-02-16 03:34:39 +00:00
send arbitrary arguments. Arguments will be serialized in JSON internally and
hence no functions or prototype chain will be included.
The renderer process can handle the message by listening to `channel` with the
`ipcRenderer` module.
2015-08-20 13:17:53 +00:00
An example of sending messages from the main process to the renderer process:
```javascript
2015-09-04 20:44:40 +00:00
// In the main process.
2016-05-10 17:38:42 +00:00
let win = null;
app.on('ready', () => {
2016-05-10 17:38:42 +00:00
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(`file://${__dirname}/index.html`);
win.webContents.on('did-finish-load', () => {
win.webContents.send('ping', 'whoooooooh!');
2015-08-20 13:17:53 +00:00
});
});
```
```html
<!-- index.html -->
<html>
<body>
<script>
require('electron').ipcRenderer.on('ping', (event, message) => {
2015-08-20 13:17:53 +00:00
console.log(message); // Prints "whoooooooh!"
});
</script>
</body>
</html>
```
2015-08-31 09:19:19 +00:00
### `webContents.enableDeviceEmulation(parameters)`
`parameters` Object, properties:
* `screenPosition` String - Specify the screen type to emulate
(default: `desktop`)
* `desktop`
* `mobile`
* `screenSize` Object - Set the emulated screen size (screenPosition == mobile)
* `width` Integer - Set the emulated screen width
* `height` Integer - Set the emulated screen height
* `viewPosition` Object - Position the view on the screen
(screenPosition == mobile) (default: `{x: 0, y: 0}`)
* `x` Integer - Set the x axis offset from top left corner
* `y` Integer - Set the y axis offset from top left corner
* `deviceScaleFactor` Integer - Set the device scale factor (if zero defaults to
original device scale factor) (default: `0`)
* `viewSize` Object - Set the emulated view size (empty means no override)
* `width` Integer - Set the emulated view width
* `height` Integer - Set the emulated view height
* `fitToView` Boolean - Whether emulated view should be scaled down if
necessary to fit into available space (default: `false`)
* `offset` Object - Offset of the emulated view inside available space (not in
fit to view mode) (default: `{x: 0, y: 0}`)
* `x` Float - Set the x axis offset from top left corner
* `y` Float - Set the y axis offset from top left corner
* `scale` Float - Scale of emulated view inside available space (not in fit to
view mode) (default: `1`)
Enable device emulation with the given parameters.
### `webContents.disableDeviceEmulation()`
Disable device emulation enabled by `webContents.enableDeviceEmulation`.
2015-09-18 09:44:11 +00:00
### `webContents.sendInputEvent(event)`
* `event` Object
* `type` String (**required**) - The type of the event, can be `mouseDown`,
`mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`, `mouseWheel`,
`mouseMove`, `keyDown`, `keyUp`, `char`.
2015-09-18 09:44:11 +00:00
* `modifiers` Array - An array of modifiers of the event, can
include `shift`, `control`, `alt`, `meta`, `isKeypad`, `isAutoRepeat`,
`leftButtonDown`, `middleButtonDown`, `rightButtonDown`, `capsLock`,
`numLock`, `left`, `right`.
Sends an input `event` to the page.
For keyboard events, the `event` object also have following properties:
2016-03-06 06:12:04 +00:00
* `keyCode` String (**required**) - The character that will be sent
as the keyboard event. Should only use the valid key codes in
[Accelerator](accelerator.md).
2015-09-18 09:44:11 +00:00
For mouse events, the `event` object also have following properties:
* `x` Integer (**required**)
* `y` Integer (**required**)
2015-09-28 00:52:16 +00:00
* `button` String - The button pressed, can be `left`, `middle`, `right`
2015-09-18 09:44:11 +00:00
* `globalX` Integer
* `globalY` Integer
* `movementX` Integer
* `movementY` Integer
* `clickCount` Integer
For the `mouseWheel` event, the `event` object also have following properties:
* `deltaX` Integer
* `deltaY` Integer
* `wheelTicksX` Integer
* `wheelTicksY` Integer
* `accelerationRatioX` Integer
* `accelerationRatioY` Integer
* `hasPreciseScrollingDeltas` Boolean
* `canScroll` Boolean
### `webContents.beginFrameSubscription(callback)`
* `callback` Function
Begin subscribing for presentation events and captured frames, the `callback`
will be called with `callback(frameBuffer)` when there is a presentation event.
The `frameBuffer` is a `Buffer` that contains raw pixel data. On most machines,
the pixel data is effectively stored in 32bit BGRA format, but the actual
representation depends on the endianness of the processor (most modern
processors are little-endian, on machines with big-endian processors the data
is in 32bit ARGB format).
### `webContents.endFrameSubscription()`
End subscribing for frame presentation events.
2015-10-14 04:41:31 +00:00
### `webContents.savePage(fullPath, saveType, callback)`
* `fullPath` String - The full file path.
* `saveType` String - Specify the save type.
* `HTMLOnly` - Save only the HTML of the page.
* `HTMLComplete` - Save complete-html page.
* `MHTML` - Save complete-html page as MHTML.
* `callback` Function - `(error) => {}`.
2015-10-14 04:41:31 +00:00
* `error` Error
Returns true if the process of saving page has been initiated successfully.
```javascript
2015-11-13 08:03:40 +00:00
win.loadURL('https://github.com');
2015-10-14 04:41:31 +00:00
win.webContents.on('did-finish-load', () => {
win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => {
2015-10-14 04:41:31 +00:00
if (!error)
console.log('Save page successfully');
2015-10-14 04:41:31 +00:00
});
});
```
### `webContents.showDefinitionForSelection()` _OS X_
Shows pop-up dictionary that searches the selected word on the page.
## Instance Properties
`WebContents` objects also have the following properties:
2016-05-17 12:56:47 +00:00
### `webContents.id`
The unique ID of this WebContents.
### `webContents.session`
Returns the [session](session.md) object used by this webContents.
### `webContents.hostWebContents`
Returns the `WebContents` that might own this `WebContents`.
### `webContents.devToolsWebContents`
Get the `WebContents` of DevTools for this `WebContents`.
**Note:** Users should never store this object because it may become `null`
when the DevTools has been closed.
2016-01-21 18:22:23 +00:00
### `webContents.debugger`
2016-01-22 04:57:25 +00:00
Debugger API serves as an alternate transport for [remote debugging protocol][rdp].
2016-01-21 18:22:23 +00:00
```javascript
try {
win.webContents.debugger.attach('1.1');
2016-01-21 18:22:23 +00:00
} catch(err) {
console.log('Debugger attach failed : ', err);
2016-01-21 18:22:23 +00:00
};
win.webContents.debugger.on('detach', (event, reason) => {
console.log('Debugger detached due to : ', reason);
2016-01-21 18:22:23 +00:00
});
win.webContents.debugger.on('message', (event, method, params) => {
if (method === 'Network.requestWillBeSent') {
if (params.request.url === 'https://www.github.com')
2016-01-21 18:22:23 +00:00
win.webContents.debugger.detach();
}
});
2016-01-21 18:22:23 +00:00
win.webContents.debugger.sendCommand('Network.enable');
2016-01-21 18:22:23 +00:00
```
#### `webContents.debugger.attach([protocolVersion])`
2016-01-22 08:47:23 +00:00
* `protocolVersion` String (optional) - Requested debugging protocol version.
2016-01-21 18:22:23 +00:00
Attaches the debugger to the `webContents`.
2016-01-22 08:47:23 +00:00
#### `webContents.debugger.isAttached()`
Returns a boolean indicating whether a debugger is attached to the `webContents`.
2016-01-21 18:22:23 +00:00
#### `webContents.debugger.detach()`
Detaches the debugger from the `webContents`.
#### `webContents.debugger.sendCommand(method[, commandParams, callback])`
* `method` String - Method name, should be one of the methods defined by the
remote debugging protocol.
2016-01-22 08:47:23 +00:00
* `commandParams` Object (optional) - JSON object with request parameters.
* `callback` Function (optional) - Response
* `error` Object - Error message indicating the failure of the command.
2016-01-21 18:22:23 +00:00
* `result` Object - Response defined by the 'returns' attribute of
the command description in the remote debugging protocol.
Send given command to the debugging target.
2016-01-22 04:57:25 +00:00
#### Event: 'detach'
2016-01-21 18:22:23 +00:00
2016-01-22 04:57:25 +00:00
* `event` Event
* `reason` String - Reason for detaching debugger.
2016-01-21 18:22:23 +00:00
2016-01-22 04:57:25 +00:00
Emitted when debugging session is terminated. This happens either when
2016-01-21 18:22:23 +00:00
`webContents` is closed or devtools is invoked for the attached `webContents`.
2016-01-22 04:57:25 +00:00
#### Event: 'message'
2016-01-21 18:22:23 +00:00
2016-01-22 04:57:25 +00:00
* `event` Event
* `method` String - Method name.
* `params` Object - Event parameters defined by the 'parameters'
attribute in the remote debugging protocol.
Emitted whenever debugging target issues instrumentation event.
2016-01-21 18:22:23 +00:00
2016-01-22 04:57:25 +00:00
[rdp]: https://developer.chrome.com/devtools/docs/debugger-protocol