渲染并控制网页

进程: 主进程​
webContents是个专门负责渲染和控制页面的EventEmitter,它也是BrowserWindow 对象的属性,
访问webContents对象的示例:
1
const {BrowserWindow} = require('electron')
2
​
3
let win = new BrowserWindow({width: 800, height: 1500})
4
win.loadURL('http://github.com')
5
​
6
let contents = win.webContents
7
console.log(contents)
Copied!

方法

webContents 对象有下列方法:
1
const {webContents} = require('electron')
2
console.log(webContents)
Copied!

webContents.getAllWebContents()

用途:获取所有 WebContents实例组成的数组( WebContents[])

实例包含了全部窗口,网页视图,打开的开发者工具栏和开发者工具栏背景页面的所有web内容。

webContents.getFocusedWebContents()

用途:获取应用程序里已聚焦的Web内容( WebContents或 null)

webContents.fromId(id)

用途:获取具有给定ID的WebContents实例( WebContents)

• id Integer

实例事件

WebContents具有以下实例事件:

事件: 'did-finish-load'

触发:导航完成时(即选项卡中的微调框(spinner)已停止旋转,并且已分派 onload事件)

事件: 'did-fail-load'

触发:加载失败或者是被取消(比如调用了 window.stop())时

返回:

• event Event

• errorCode Integer

• errorDescription String

• validatedURL String

• isMainFrame Boolean

​错误代码列表.

事件: 'did-frame-finish-load'

触发:frame窗口 完成导航时

返回:

• event Event

• isMainFrame Boolean

事件: 'did-start-loading'

触发:选项卡中的微调框(spinner)开始旋转(loading)时

事件: 'did-stop-loading'

触发:选项卡中的微调框(spinner)结束了旋转(loading)时

事件: 'did-get-response-details'

触发:所请求资源的相关详细信息可用时

返回:

• event Event

• status Boolean 下载资源的套接字连接

• newURL String

• originalURL String

• httpResponseCode Integer

• requestMethod String

• referrer String

• headers Object

• resourceType String

事件: 'did-get-redirect-request'

触发:发起的请求资源被重定向时

返回:

• event Event

• oldURL String

• newURL String

• isMainFrame Boolean

• httpResponseCode Integer

• requestMethod String

• referrer String

• headers Object

事件: 'dom-ready'

触发:指定 frame 中的文档 加载完成时

返回:

• event Event

事件: 'page-favicon-updated'

触发:网页接收到(图标的url)favicon url时

返回:

• event Event

• favicons String[] - 网址数组

事件: 'new-window'

触发:页面请求为url打开一个新窗口时

返回:

• event Event

• url String

• frameName String

• disposition String - 可为 default, foreground-tab, background-tab, new-window, save-to-disk 和 other.

• options Object - 创建新 BrowserWindow时使用的参数.

• additionalFeatures String[] - 给予window.open()的非标准句柄(不是由Chromium或Electron处理的句柄)。

当页面通过 window.open或外部链接(如 <a target='_blank'>)来请求 url打开一个新窗口(默认创建一个新的 BrowserWindow)时触发。
如果调用 event.preventDefault(),阻止创建新 BrowserWindow,你必须设置 event.newGuest来引用新的 BrowserWindow实例，否则可能会导致意外的行为.
1
myBrowserWindow.webContents.on('new-window', (event, url) => {
2
event.preventDefault()
3
const win = new BrowserWindow({show: false})
4
win.once('ready-to-show', () => win.show())
5
win.loadURL(url)
6
event.newGuest = win
7
})
Copied!

事件: 'will-navigate'

触发:用户或页面想要开始导航(比如更改window.location对象或用户单击页面中的链接)时

返回:

• event Event

• url String

如果是 以webContents.loadURL和 webContents.back之类的API以编程方式启动导航,以及在页内跳转如点击了锚链接或更新 window.location.hash时,该事件不会触发,这时您可以使用 did-navigate-in-page事件达到目的。
需要阻止导航,请调用 event.preventDefault()。

事件: 'did-navigate'

触发:导航完成时

返回:

• event Event

• url String

在页内跳转如点击了锚链接或更新 window.location.hash,时,该事件不会触发,这时您可以使用 did-navigate-in-page事件达到目的。

事件: 'did-navigate-in-page'

触发:页内跳转时

返回:

• event Event

• url String

• isMainFrame Boolean

如点击了锚链接 或 DOM的hashchange事件被触发时.虽然页面的url已改变但它不会跳出界面

Event: 'will-prevent-unload'

触发:当 beforeunload尝试取消卸载页面时

返回:

• event Event

调用 event.preventDefault() 可忽略 beforeunload并允许卸载页面.
1
const {BrowserWindow, dialog} = require('electron')
2
const win = new BrowserWindow({width: 800, height: 600})
3
win.webContents.on('will-prevent-unload', (event) => {
4
const choice = dialog.showMessageBox(win, {
5
type: 'question',
6
buttons: ['离开', '保留'],
7
title: '你要离开本站吗?',
8
message: '您所做过的更改可能无法保存哦!',
9
defaultId: 0,
10
cancelId: 1
11
})
12
const leave = (choice === 0)
13
if (leave) {
14
event.preventDefault()
15
}
16
})
Copied!

事件: 'crashed'

触发:渲染进程崩溃或被中断时

返回:

• event Event

• killed Boolean

事件: 'plugin-crashed'

触发:插件进程崩溃时

返回:

• event Event

• name String

• version String

事件: 'destroyed'

触发: webContents被销毁时

事件: 'before-input-event'

触发:进行分派 keydown和 keyup事件之前

返回:

• event Event

• input Object -输入属性
  • type String - 如 keyUp 或 keyDown

  • key String - 相当于 [KeyboardEvent.key][keyboardevent]

  • isAutoRepeat Boolean - 相当于 [KeyboardEvent.repeat][keyboardevent]

  • shift Boolean - 相当于 [KeyboardEvent.shiftKey][keyboardevent]

  • control Boolean - 相当于 [KeyboardEvent.controlKey][keyboardevent]

  • alt Boolean - 相当于 [KeyboardEvent.altKey][keyboardevent]

  • meta Boolean - 相当于 [KeyboardEvent.metaKey][keyboardevent]

调用 event.preventDefault则禁止页面调用 keydown或 keyup事件。

事件: 'devtools-opened'

触发:开发调试工具打开时

事件: 'devtools-closed'

触发:开发调试工具关闭时

事件: 'devtools-focused'

触发:开发调试工具被聚焦或打开时

事件: 'certificate-error'

触发:验证 url的证书( certificate) 失败或错误时

返回:

• event Event

• url String

• error String - 错误代码

• certificate Certificate​

• callback Function
  • isTrusted Boolean -证书是否受信任

该事件使用方法类似 app模块的 certificate-error事件​

事件: 'select-client-certificate'

触发:请求客户端证书时

返回:

• event Event

• url URL

• certificateList Certificate[]​

• callback Function
  • certificate Certificate - 必须是来自给定列表的证书

该事件使用方法类似 app模块的 select-client-certificate事件​

事件: 'login'

触发: webContents进行基本验证时

返回:

• event Event

• request Object
  • method String

  • url URL

  • referrer URL
• authInfo Object
  • isProxy Boolean

  • scheme String

  • host String

  • port Integer

  • realm String
• callback Function
  • username String

  • password String

该事件使用方法类似 app模块的 login 事件.

事件: 'found-in-page'

触发:[webContents.findInPage]进行页内查找并且找到可用值时

返回:

• event Event

• result Object
  • requestId Integer

  • activeMatchOrdinal Integer - 活动匹配位置

  • matches Integer -匹配数

  • selectionArea Object -第一个匹配区域的坐标。

  • finalUpdate Boolean

事件: 'media-started-playing'

触发:媒体开始播放时

事件: 'media-paused'

触发:媒体暂停或播放完毕时

事件: 'did-change-theme-color'

触发:页面的主题颜色被更改时

通常是因为使用了元标记如theme-color引起:
1
<meta name='theme-color' content='#ff0000'>
Copied!

事件: 'update-target-url'

触发:鼠标移动到链接或键盘将焦点移动到链接时

返回:

• event Event

• url String

事件: 'cursor-changed'

触发:更改光标类型时

返回:

• event Event

• type String 可选值有 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,如果参数为 custom, image参数会在 NativeImage中保存自定义光标图像.而如果为 scale时, size和 hotspot则保存关于自定义光标的相关信息。

• image NativeImage (可选)

• scale Float (可选) - 光标缩放系数

• size Object (可选) - image的尺寸
  • width Integer

  • height Integer
• hotspot Object (可选) - 光标的hotspot坐标
  • x Integer - x 坐标

  • y Integer - y 坐标

事件: 'context-menu'

触发:有一个新的上下文菜单需要处理时

返回:

• event Event

• params Object
  • x Integer - x 坐标

  • y Integer - y 坐标

  • linkURL String - 如果链接的内容是图像，则包含上下文菜单被调用节点的链接.

  • pageURL String - 调用上下文菜单的顶级页面链接

  • frameURL String - 调用上下文菜单的子框架的URL

  • srcURL String - 调用上下文菜单的元素的源URL,如图片,音频或视频等链接

  • mediaType String - 上下文菜单被调用的节点类型,如 none, image, audio, video, canvas, file 或 plugin.

  • hasImageContents Boolean - 是否在具有非空内容的图像上调用上下文菜单。

  • isEditable Boolean - 上下文是否可编辑。

  • selectionText String - 调用上下文菜单的选择文本。

  • titleText String -调用上下文菜单的标题或替代文本。

  • misspelledWord String - 光标下的拼写错误的单词(如果有)。

  • frameCharset String -调用上下文菜单的框架的字符编码。

  • inputFieldType String -该字段的类型(如果在输入字段上调用了上下文菜单)。可选值为 none, plainText, password, other.

  • menuSourceType String - 调用上下文菜单的输入源。可选值为 none, mouse, keyboard, touch, touchMenu.

  • mediaFlags Object - 调用上下文菜单的媒体元素标志
    • inError Boolean - 媒体元素是否已崩溃

    • isPaused Boolean - 媒体元素是否已暂停。

    • isMuted Boolean - 媒体元素是否静音。

    • hasAudio Boolean - 媒体元素是否具有音频。

    • isLooping Boolean - 媒体元素是否循环。

    • isControlsVisible Boolean - 媒体元素的控件是否可见。

    • canToggleControls Boolean - 媒体元素的控件是否可以切换。

    • canRotate Boolean - 是否可以旋转媒体元素。
  • editFlags Object -渲染器是否相信它能够执行相应的操作。
    • canUndo Boolean - 渲染器是否相信它可以撤消。

    • canRedo Boolean - 渲染器是否相信它可以重做。

    • canCut Boolean - 渲染器是否相信它可以裁剪。

    • canCopy Boolean - 渲染器是否相信它可以复制

    • canPaste Boolean - 渲染器是否相信它可以粘贴。

    • canDelete Boolean - 渲染器是否相信它可以删除。

    • canSelectAll Boolean - 渲染器是否相信它可以全选。

事件: 'select-bluetooth-device'

触发:调用 navigator.bluetooth.requestDevice 后进行蓝牙设备的选择时

返回:

• event Event

• devices BluetoothDevice[]​

• callback Function
  • deviceId String

必须先启用 webBluetooth,才能调用 navigator.bluetooth .
如果没有调用 event.preventDefault,则默认选择第一个可用的设备。
callback应该用 deviceId来调用被选择,如果传递空的字符串到 callback则意味着取消请求。
1
const {app, webContents} = require('electron')
2
app.commandLine.appendSwitch('enable-web-bluetooth')
3
​
4
app.on('ready', () => {
5
webContents.on('select-bluetooth-device', (event, deviceList, callback) => {
6
event.preventDefault()
7
let result = deviceList.find((device) => {
8
return device.deviceName === 'test'
9
})
10
if (!result) {
11
callback('')
12
} else {
13
callback(result.deviceId)
14
}
15
})
16
})
Copied!

事件: 'paint'

触发:生成新frame时

返回:

• event Event

• dirtyRect Rectangle​

• image NativeImage - 整个 frame 的图像数据

只有脏区(dirty area)可传递至缓冲区。
1
const {BrowserWindow} = require('electron')
2
​
3
let win = new BrowserWindow({webPreferences: {offscreen: true}})
4
win.webContents.on('paint', (event, dirty, image) => {
5
// updateBitmap(dirty, image.getBitmap())
6
})
7
win.loadURL('http://github.com')
Copied!

事件: 'devtools-reload-page'

触发:开发者调试工具栏中重新加载webContents时

实例方法

contents.loadURL(url[, options])

用途:加载 url到窗口中

• url String

• options Object (可选)
  • httpReferrer String (可选) - 来源网址

  • userAgent String (可选) - 发起请求的userAgent.

  • extraHeaders String (可选) - 用\ n分隔的额外头

  • postData (UploadRawData | UploadFile | UploadFileSystem | UploadBlob)[] - (可选)

url 必须包含协议前缀,比如 http:// 或 file://. 如果想要忽略 http 缓存的加载,请使用 pragma 头实现.
1
const {webContents} = require('electron')
2
const options = {extraHeaders: 'pragma: no-cache\n'}
3
webContents.loadURL('https://github.com', options)
Copied!

contents.downloadURL(url)

用途:点击url进行直接下载而无需在标签页中打开

• url String

此时 session 的 will-download 事件会被触发.

contents.getURL()

用途:获取当前页面的链接( String)

1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow({width: 800, height: 600})
3
win.loadURL('http://github.com')
4
​
5
let currentURL = win.webContents.getURL()
6
console.log(currentURL)
Copied!

contents.getTitle()

用途:当前网页的标题( String)

contents.isDestroyed()

用途:判断网页是否被销毁( Boolean)

contents.isFocused()

用途:判断网页是否已聚焦( Boolean)

contents.isLoading()

用途:判断网页是否仍在加载资源( Boolean)

contents.isLoadingMainFrame()

用途:判断主框架(而不仅仅是其中的iframe或框架)是否仍在加载( Boolean)

contents.isWaitingForResponse()

用途:网页是否等待来自页面的主资源的第一次响应(而不仅仅是其中的iframe或框架)是否仍在加载( Boolean)

content.stop()

用途:停止任何待处理的导航

contents.reload()

用途:重新加载当前网页

contents.reloadIgnoringCache()

用途:忽略缓存的重新加载当前网页

content.canGoBack()

用途:判断浏览器是否可以可后退至上个网页( Boolean)

contents.canGoForward()

用途:判断浏览器是否可以前进到下一个网页( Boolean)

contents.canGoToOffset(offset)

用途:判断网页是否可以转到 offset这个页面( Boolean)

• offsetString

contents.clearHistory()

用途:清除历史记录

contents.goBack()

用途:使浏览器后退往上一页

contents.goForward()

用途:使浏览器前进往下一页

contents.goToIndex(index)

用途:将浏览器导航到指定索引 index 的网页

• indexString

contents.goToOffset(offset)

用途:从当前页到导航指定 offset

• offsetString

contents.isCrashed()

用途:判断渲染器进程是否崩溃( Boolean)

contents.setUserAgent(userAgent)

用途:重定义网页的userAgent( Boolean)

• userAgent String

contents.getUserAgent()

用途:获取网页的userAgent( String)

contents.insertCSS(css)

用途:将CSS插入到当前网页中

• css String

contents.executeJavaScript(code[, userGesture, callback])

用途:判断是否可解析(eval)执行代码code并返回执行 promise解析结果( Promise)

• code String

• userGesture Boolean (可选) - 是否支持用户手势 默认为 false.

• callback Function (可选) - 脚本执行后调用
  • result Any

将 userGesture 设置为 true,可对去除 某些HTML API 只能通过 手势 进行调用 的限制,比如 requestFullScreen。
例子,返回一个代码解析结果:
1
contents.executeJavaScript('fetch(`https://jsonplaceholder.typicode.com/users/1`).then(resp => resp.json())', true)
2
.then((result) => {
3
console.log(result) // 来自fetch调用的JSON对象
4
})
Copied!

contents.setAudioMuted(muted)

用途:使当前网页上的音频静音

• muted Boolean

contents.isAudioMuted()

用途:判断网页是否已静音( Boolean)

contents.setZoomFactor(factor)

用途:设置页面的缩放系数

• factor Number - 缩放系数

注意:缩放系数是百分制的,如3.0=300％。

contents.getZoomFactor(callback)

用途:获得当前缩放系数并调用 callback

• callback Function
  • zoomFactor Number

contents.setZoomLevel(level)

用途:将缩放级别更改为指定级别

• level Number - 缩放级别

原始大小为0,每个增量表示放大或缩小20％,默认限制为原始大小的300％至50％。

contents.getZoomLevel(callback)

用途:获得当前缩放级别并调用 callback

• callback Function
  • zoomLevel Number

contents.setVisualZoomLevelLimits(minimumLevel, maximumLevel)

用途:设置缩放级别的最大值和最小值

• minimumLevel Number

• maximumLevel Number

contents.setLayoutZoomLevelLimits(minimumLevel, maximumLevel)

用途:设置基于布局(即非视觉)的缩放级别的最大值和最小值

• minimumLevel Number

• maximumLevel Number

contents.undo()

用途:在网页中执行撤销( undo)

contents.redo()

用途:在网页中执行重做( redo)

contents.cut()

用途:在网页中执行剪切( cut)

contents.copy()

用途:在网页中执行复制( copy)

contents.copyImageAt(x, y)

用途:将指定位置的图像复制到剪贴板

• x Integer

• y Integer

contents.paste()

用途:在网页中执行粘贴( paste)

contents.pasteAndMatchStyle()

用途:在网页中执行粘贴并清除样式( pasteAndMatchStyle)

contents.delete()

用途:在网页中执行删除( delete)

contents.selectAll()

用途:在网页中执行全选( selectAll)

contents.unselect()

用途:在网页中执行取消选择( unselect)

contents.replace(text)

用途:在网页中执行替换( replace)文本( text)

• text String

contents.replaceMisspelling(text)

用途:在网页中执行校正( replaceMisspelling)错别字( text)

• text String

contents.insertText(text)

用途:插入text到焦点元素

• text String

contents.findInPage(text[, options])

用途:在页面中发起一个请求进行查找 text 并返回一个 Integer 当做请求id

• text String - 查找的内容, 不能为空.

• options Object (可选)
  • forward Boolean - (可选) 是否向前或向后查找, 默认为 true.

  • findNext Boolean - (可选) 是否连续查找, 默认为 false.

  • matchCase Boolean - (可选) 查找是否区分大小写,, 默认为 false.

  • wordStart Boolean - (可选) 是否仅以首字母查找.. 默认为 false.

  • medialCapitalAsWordStart Boolean - (可选) 如果按大写字母开头匹配,那么后面的小写字母或无字母或多词合成等都视为匹配,默认为 false.

  您可以通过found-in-page 事件获取相应的请求结果.

contents.stopFindInPage(action)

用途:使用给定的 action 来为 webContents 停止任何 findInPage 请求

• action String - 指派[webContents.findInPage]请求结束时要执行的操作。
  • clearSelection - 清除选择。

  • keepSelection - 转为没有任何action的普通选择

  • activateSelection - 聚焦并单击该选择

1
const {webContents} = require('electron')
2
webContents.on('found-in-page', (event, result) => {
3
if (result.finalUpdate) webContents.stopFindInPage('clearSelection')
4
})
5
​
6
const requestId = webContents.findInPage('api')
7
console.log(requestId)
Copied!

contents.capturePage([rect, ]callback)

用途:截图 rect区域并调用 callback

• rect Rectangle (可选) -截图的 rect区域, 如果为空,意味着截图整个页面.

• callback Function
  • image NativeImage - NativeImage 实例,用于存储截图.

contents.hasServiceWorker(callback)

用途:检查是否有已注册的ServiceWorker并调用 callback

• callback Function
  • hasWorker Boolean

contents.unregisterServiceWorker(callback)

用途:注销所有ServiceWorker并调用 callback

• callback Function
  • success Boolean

contents.getPrinters()

用途:获取系统打印机列表(PrinterInfo[])

例子:
1
name: 'Zebra_LP2844',
2
description: 'Zebra LP2844',
3
status: 3,
4
isDefault: false,
5
options: {
6
copies: '1',
7
'device-uri': 'usb://Zebra/LP2844?location=14200000',
8
finishings: '3',
9
'job-cancel-after': '10800',
10
'job-hold-until': 'no-hold',
11
'job-priority': '50',
12
'job-sheets': 'none,none',
13
'marker-change-time': '0',
14
'number-up': '1',
15
'printer-commands': 'none',
16
'printer-info': 'Zebra LP2844',
17
'printer-is-accepting-jobs': 'true',
18
'printer-is-shared': 'true',
19
'printer-location': '',
20
'printer-make-and-model': 'Zebra EPL2 Label Printer',
21
'printer-state': '3',
22
'printer-state-change-time': '1484872644',
23
'printer-state-reasons': 'offline-report',
24
'printer-type': '36932',
25
'printer-uri-supported': 'ipp://localhost/printers/Zebra_LP2844',
26
system_driverinfo: 'Z'
27
}
28
}]
Copied!

contents.print([options])

用途:打印窗口页面

• options Object (可选)
  • silent Boolean - true表示静默打印即将选择系统的默认打印机和默认设置进行打印.一般默认为 false.

  • printBackground Boolean - 同时打印网页的背景颜色和图像,默认为 false.

在网页中调用 window.print() 即等同于 webContents.print({silent: false, printBackground: false}).
您可以使用 page-break-before: always; CSS样式强制打印到新页面中.

contents.printToPDF(options, callback)

用途:打印预览中将网页打印为PDF并调用 callback

• options Object
  • marginsType Integer - (可选) 边距类型, 0为默认边距, 1为无边距, and 2为中等边距.

  • pageSize String - (可选) 大小类型, 可选 A3, A4, A5, Legal, Letter, Tabloid 或包含有 height和 width属性的对象

  • printBackground Boolean - (可选) 是否打印CSS背景

  • printSelectionOnly Boolean - (可选) 是否只打印选择的内容

  • landscape Boolean - (可选) true为横向, false为纵向,如果css样式中强制定义了 @page , landscape会被忽略.
• callback Function
  • error Error

  • data Buffer - 一个包含生成的PDF数据的 Buffer.

默认情况下,options为空时将被视为:
1
{
2
marginsType: 0,
3
printBackground: false,
4
printSelectionOnly: false,
5
landscape: false
6
}
Copied!

您可以使用 page-break-before: always; CSS样式强制打印到新页面中.
1
const {BrowserWindow} = require('electron')
2
const fs = require('fs')
3
​
4
let win = new BrowserWindow({width: 800, height: 600})
5
win.loadURL('http://github.com')
6
​
7
win.webContents.on('did-finish-load', () => {
8
//使用默认打印选项
9
win.webContents.printToPDF({}, (error, data) => {
10
if (error) throw error
11
fs.writeFile('/tmp/print.pdf', data, (error) => {
12
if (error) throw error
13
console.log('Write PDF successfully.')
14
})
15
})
16
})
Copied!

contents.addWorkSpace(path)

用途:把指定路径添加到开发者工具栏的 工作区.但必须在 开发者工具栏 创建之后才能使用它

• path String

1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow()
3
win.webContents.on('devtools-opened', () => {
4
win.webContents.addWorkSpace(__dirname)
5
})
Copied!

contents.removeWorkSpace(path)

用途:从开发者工具栏的工作区中移除指定的路径

• path String

contents.openDevTools([options])

用途:打开开发者工具栏

• options Object (可选)
  • mode String - 停靠方向类型, 可选 right(右侧), bottom(下方), undocked(窗口与工具栏分离), detach(新窗口打开工具栏). 默认为上次(最后一次)的方向

contents.closeDevTools()

用途:关闭开发者工具栏

contents.isDevToolsOpened()

用途:判断开发者工具栏是否已打开( Boolean)

contents.isDevToolsFocused()

用途:判断开发者工具栏是否已聚焦( Boolean)

contents.toggleDevTools()

用途:切换开发者工具栏

contents.inspectElement(x, y)

用途:在 ( x, y) 开始检查元素

• x Integer

• y Integer

contents.inspectServiceWorker()

用途:打开用于服务工作者上下文的开发者工具栏

contents.send(channel[, arg1][, arg2][, ...])

用途:通过 channel 向渲染进程异步发送消息或任意参数

• channel String

• ...args any[]

参数将在JSON内部序列化，因此不会包含函数或原型链。渲染进程通过用 ipcRenderer 模块侦听 channel来处理它。
如从主进程向渲染进程发送消息 :
1
// 主进程.
2
const {app, BrowserWindow} = require('electron')
3
let win = null
4
​
5
app.on('ready', () => {
6
win = new BrowserWindow({width: 800, height: 600})
7
win.loadURL(`file://${__dirname}/index.html`)
8
win.webContents.on('did-finish-load', () => {
9
win.webContents.send('ping', 'whoooooooh!')
10
})
11
})
Copied!

1
<!-- index.html -->
2
<html>
3
<body>
4
<script>
5
require('electron').ipcRenderer.on('ping', (event, message) => {
6
console.log(message) // Prints 'whoooooooh!'
7
})
8
</script>
9
</body>
10
</html>
Copied!

contents.enableDeviceEmulation(parameters)

用途:开启设备模拟

• parameters Object
  • screenPosition String - 指定要模拟的屏幕类型(默认: desktop)
    • desktop - 桌面屏幕类型

    • mobile - 移动屏幕类型
  • screenSize Object - 屏幕大小(screenPosition == mobile)
    • width Integer - 模拟屏幕宽度

    • height Integer - 模拟屏幕高度
  • viewPosition Object - 在屏幕上定位视图(screenPosition == mobile) (默认: {x: 0, y: 0})
    • x Integer -从左上角的x偏移

    • y Integer - 从左上角的y偏移
  • deviceScaleFactor Integer - 设备缩放系数 (默认: 0即设备原始缩放系数)

  • viewSize Object - 模拟视图大小 (空表示不覆盖)
    • width Integer - 模拟视图宽度

    • height Integer - 模拟视图高度
  • fitToView Boolean - 是否需要缩小模拟视图以适应可用空间(默认:false)

  • offset Object - 可用空间内的模拟视图偏移 (不适合视图模式)(默认: {x: 0, y: 0})

  • x Float - 从左上角的x偏移

  • y Float - 从左上角的y偏移
• scale Float - 可用空间内的模拟视图的比例 (不适合视图模式) (默认: 1)

contents.disableDeviceEmulation()

用途:禁止 webContents.enableDeviceEmulation 启用设备模拟

contents.sendInputEvent(event)

用途:向页面发送输入 event

• event Object
  • type String (必填) - 事件类型,可选 mouseDown, mouseUp, mouseEnter, mouseLeave, contextMenu, mouseWheel, mouseMove, keyDown, keyUp, char.

  • modifiers String[] -事件的修饰符数组, 可选 shift, control, alt, meta, isKeypad, isAutoRepeat, leftButtonDown, middleButtonDown, rightButtonDown, capsLock, numLock, left, right.

对键盘事件而言, event 对象有如下属性 :

• keyCode String (必需) - 将作为键盘事件发送的字符. 参考有效键代码列表

对鼠标事件而言, event 对象有如下属性 :

• x Integer (必填)

• y Integer (必填)

• button String - 被按下的按钮,可选 left, middle, right

• globalX Integer

• globalY Integer

• movementX Integer

• movementY Integer

• clickCount Integer

对鼠标滚轮事件 mouseWheel来说, event 对象还有如下属性 :

• deltaX Integer

• deltaY Integer

• wheelTicksX Integer

• wheelTicksY Integer

• accelerationRatioX Integer

• accelerationRatioY Integer

• hasPreciseScrollingDeltas Boolean

• canScroll Boolean

contents.beginFrameSubscription([onlyDirty ,]callback)

用途:开始订阅演示事件和捕获的帧，当有一个演示事件时调用 callback

• onlyDirty Boolean (可选) - 默认为 false

• callback Function
  • frameBuffer Buffer 一个包含原始像素数据的 Buffer

  • dirtyRect Rectangle​

  frameBuffer 的数据在大多数机器上，像素数据有效地以32位BGRA格式存储,但是实际情况是取决于处理器的字节顺序的(大多数的处理器是存放小端序的,如果是在大端序的处理器上, 数据是32位ARGB格式） 。

contents.endFrameSubscription()

用途:结束订阅帧展示事件

contents.startDrag(item)

用途:开始对 item拖放操作

• item Object
  • file String 或 files Array 被拖动文件的绝对路径

  • icon NativeImage 被拖动时显示在光标下的图像,MacOS上必须是非空的图标。

contents.savePage(fullPath, saveType, callback)

用途:尝试保存页面并返回是否成功的布尔( Boolean)

• fullPath String - 完整的文件路径

• saveType String - 指定保存类型.
  • HTMLOnly - 只保存页面的HTML

  • HTMLComplete - 保存完整的html页面

  • MHTML - 将完整的HTML页面保存为MHTML
• callback Function - function(error) {}.
  • error Error

1
const {BrowserWindow} = require('electron')
2
let win = new BrowserWindow()
3
​
4
win.loadURL('https://github.com')
5
​
6
win.webContents.on('did-finish-load', () => {
7
win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => {
8
if (!error) console.log('Save page successfully')
9
})
10
})
Copied!

contents.showDefinitionForSelection() macOS

用途:在页面上搜索所选字词时弹出字典

contents.setSize(options)

用途:设置页面 <webview>访客内容的页面尺寸

• options Object
  • normal Object (可选) - 页面的正常大小. 结合 disableguestresize属性可手动重新调整 <webview>内容尺寸
    • width Integer

    • height Integer

contents.isOffscreen()

用途:是否启用了离屏渲染( Boolean)

contents.startPainting()

用途:如果启用离屏渲染但未绘制则开始绘制

contents.stopPainting()

用途:如果启用和正在绘制离屏渲染则停止绘制

contents.isPainting()

用途: 判断如果离屏渲染被启用,它当前是否正在绘制( Boolean)

contents.setFrameRate(fps)

用途: 如果离屏渲染被启用,则将帧率设置为1-60之间的值

• fps Integer

contents.getFrameRate()

用途: 如果离屏渲染被启用,则返回当前帧速率( Integer)

contents.invalidate()

用途:完整重绘此网页内容所在窗口

如果屏幕渲染启用，则使框架无效并通过 'paint'事件生成一个新的。

contents.getWebRTCIPHandlingPolicy()

用途:获取WebRTC IP处理策略( String)

contents.setWebRTCIPHandlingPolicy(policy)

用途:完整重绘此网页内容所在窗口

• policy String - 指定WebRTC IP处理策略
  • default - 暴露用户的公共和本地IP。使用此策略时，WebRTC将并有权枚举所有接口并绑定它们以发现公共接口.

  • default_public_interface_only -暴露用户的公共IP但不公开用户的本地IP。使用此策略时，WebRTC仅使用http默认路由并不会公开任何本地地址。

  • default_public_and_private_interfaces - 暴露用户的公共和本地IP。使用此策略时，WebRTC仅使用http由OS在多宿主端点上选择的默认路由。此项将会也暴露相关联的默认私人地址。

  • disable_non_proxied_udp - 不公开公共或本地IP。使用此策略时，WebRTC仅使用TCP联系对等体或服务器，除非代理服务器支持UDP。

设置WebRTC IP处理策略允许您控制通过WebRTC公开哪些IP。有关详细信息，请参阅BrowserLeaks​

实例属性

contents.id

属性: WebContents的唯一ID

contents.session

属性: WebContents使用的一个Session对象(session)

contents.hostWebContents

属性:可能拥有 WebContents的WebContents 实例

contents.devToolsWebContents

属性: WebContents的开发调试工具栏

注意: 用户不应存储此对象,因为当DevTools已关闭时,它可能变为 null.

contents.debugger

WebContents的Debugger实例。
[keyboardevent]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent​