您的位置:58编程 > electron web Electron webContents 模块

electron web Electron webContents 模块

2023-03-21 08:33 Electron中文文档

electron web Electron webContents 模块

electron web

Electron Web 是一种开源的桌面应用程序开发框架,它使用 JavaScript、HTML 和 CSS 来创建跨平台的桌面应用程序。它是由 GitHub 开发的,旨在帮助开发者快速创建跨平台的原生应用程序。

Electron Web 的核心是 Chromium 和 Node.js,它们共同协作来创建一个运行在本地计算机上的 Web 应用环境。Chromium 是一个开源浏览器,它使得 Electron Web 能够显示 HTML、CSS 和 JavaScript 的内容。Node.js 是一个 JavaScript 运行时,它使得 Electron Web 能够执行本地文件、数据库和其他本地功能。

Electron Web 使得开发者能够利用 web 技术来创建原生应用程序,而不需要学习新的语言或者 API。这意味着开发者可以使用已有的 web 技能来快速创建原生应用程序,而不需要重新学习新的语言或 API。

此外,Electron Web 还允许开发者将 web 内容集成到原生界面中(例如 Windows、macOS 和 Linux 等)。这意味着开发者可以将 web 页面集成到原生界面中(例如 Windows、macOS 和 Linux 等)中;这样就能够将 web 页面与原生界面相互整合。

// 使用 Electron Web 创建一个 Hello World 示例: 
const {app, BrowserWindow} = require('electron') 
let win 
function createWindow () { 
  win = new BrowserWindow({width: 800, height: 600}) 
  win.loadFile('index.html') 
  win.on('closed', () => { win = null }) 
} 
  app.on('ready', createWindow) 
  app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) 
  app.on('activate', () => { if (win === null) { createWindow() } })  

Electron webContents 模块

webContents 是一个 事件发出者.

它负责渲染并控制网页,也是 BrowserWindow 对象的属性.一个使用 webContents 的例子:

const BrowserWindow = require("electron").BrowserWindow;

var win = new BrowserWindow({width: 800, height: 1500});
win.loadURL("https://www..cn");

var webContents = win.webContents;

事件

webContents 对象可发出下列事件:

Event: "did-finish-load"

当导航完成时发出事件,onload 事件也完成.

Event: "did-fail-load"

返回:

  • event Event
  • errorCode Integer
  • errorDescription String
  • validatedURL String

这个事件类似 did-finish-load ,但是是在加载失败或取消加载时发出, 例如, window.stop() 请求结束.错误代码的完整列表和它们的含义都可以在 here 找到.

Event: "did-frame-finish-load"

返回:

  • event Event
  • isMainFrame Boolean

当一个 frame 导航完成的时候发出事件.

Event: "did-start-loading"

当 tab 的spinner 开始 spinning的时候.

Event: "did-stop-loading"

当 tab 的spinner 结束 spinning的时候.

Event: "did-get-response-details"

返回:

  • event Event
  • status Boolean
  • newURL String
  • originalURL String
  • httpResponseCode Integer
  • requestMethod String
  • referrer String
  • headers Object

当有关请求资源的详细信息可用的时候发出事件. status 标识了 socket链接来下载资源.

Event: "did-get-redirect-request"

返回:

  • event Event
  • oldURL String
  • newURL String
  • isMainFrame Boolean
  • httpResponseCode Integer
  • requestMethod String
  • referrer String
  • headers Object

当在请求资源时收到重定向的时候发出事件.

Event: "dom-ready"

返回:

  • event Event

当指定 frame 中的 文档加载完成的时候发出事件.

Event: "page-favicon-updated"

返回:

  • event Event
  • favicons Array - Array of URLs

当 page 收到图标 url 的时候发出事件.

Event: "new-window"

返回:

  • event Event
  • url String
  • frameName String
  • disposition String - 可为 defaultforeground-tabbackground-tabnew-window 和 other.
  • options Object - 创建新的 BrowserWindow时使用的参数.

当 page 请求打开指定 url 窗口的时候发出事件.这可以是通过 window.open 或一个外部连接如 <a target="_blank"> 发出的请求.

默认指定 url 的 BrowserWindow 会被创建.

调用 event.preventDefault() 可以用来阻止打开窗口.

Event: "will-navigate"

返回:

  • event Event
  • url String

当用户或 page 想要开始导航的时候发出事件.它可在当 window.location 对象改变或用户点击 page 中的链接的时候发生.

当使用 api(如 webContents.loadURL 和 webContents.back) 以编程方式来启动导航的时候,这个事件将不会发出.

它也不会在页内跳转发生, 例如点击锚链接或更新 window.location.hash.使用 did-navigate-in-page 事件可以达到目的.

调用 event.preventDefault() 可以阻止导航.

Event: "did-navigate"

返回:

  • event Event
  • url String

当一个导航结束时候发出事件.

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

Event: "did-navigate-in-page"

返回:

  • event Event
  • url String

当页内导航发生的时候发出事件.

当页内导航发生的时候,page 的url 改变,但是不会跳出界面.例如当点击锚链接时或者 DOM 的 hashchange 事件发生.

Event: "crashed"

当渲染进程崩溃的时候发出事件.

Event: "plugin-crashed"

返回:

  • event Event
  • name String
  • version String

当插件进程崩溃时候发出事件.

Event: "destroyed"

当 webContents 被删除的时候发出事件.

Event: "devtools-opened"

当开发者工具栏打开的时候发出事件.

Event: "devtools-closed"

当开发者工具栏关闭时候发出事件.

Event: "devtools-focused"

当开发者工具栏获得焦点或打开的时候发出事件.

Event: "certificate-error"

返回:

  • event Event
  • url URL
  • error String - The error code
  • certificate Object
    • data Buffer - PEM encoded data
    • issuerName String
  • callback Function

当验证证书或 url 失败的时候发出事件.

使用方法类似 app 的 certificate-error 事件.

Event: "select-client-certificate"

返回:

  • event Event
  • url URL
  • certificateList [Objects]
    • data Buffer - PEM encoded data
    • issuerName String - Issuer"s Common Name
  • callback Function

当请求客户端证书的时候发出事件.

使用方法类似 app 的 select-client-certificate 事件.

Event: "login"

返回:

  • event Event
  • request Object
    • method String
    • url URL
    • referrer URL
  • authInfo Object
    • isProxy Boolean
    • scheme String
    • host String
    • port Integer
    • realm String
  • callback Function

当 webContents 想做基本验证的时候发出事件.

使用方法类似 the login event of app.

Event: "found-in-page"

返回:

  • event Event
  • result Object
    • requestId Integer
    • finalUpdate Boolean - 标识是否还有更多的值可以查看.
    • activeMatchOrdinal Integer (可选) - 活动匹配位置
    • matches Integer (可选) - 匹配数量.
    • selectionArea Object (可选) - 协调首个匹配位置.

当使用 webContents.findInPage 进行页内查找并且找到可用值得时候发出事件.

Event: "media-started-playing"

当媒体开始播放的时候发出事件.

Event: "media-paused"

当媒体停止播放的时候发出事件.

Event: "did-change-theme-color"

当page 的主题色时候发出事件.这通常由于引入了一个 meta 标签 :

<meta name="theme-color" content="#ff0000">

Event: "cursor-changed"

返回:

  • event Event
  • type String
  • image NativeImage (可选)
  • scale Float (可选)

当鼠标的类型发生改变的时候发出事件. type 的参数可以是 defaultcrosshairpointertextwaithelpe-resizen-resizene-resizenw-resizes-resizese-resizesw-resizew-resizens-resizeew-resizenesw-resizenwse-resizecol-resizerow-resizem-panninge-panningn-panningne-panningnw-pannings-panningse-panningsw-panningw-panningmovevertical-textcellcontext-menualiasprogressnodropcopynone,not-allowedzoom-inzoom-outgrabgrabbingcustom.

如果 type 参数值为 customimage 参数会在一个NativeImage 中控制自定义鼠标图片, 并且 scale 会控制图片的缩放比例.

实例方法

webContents 对象有如下的实例方法:

webContents.loadURL(url[, options])

  • url URL
  • options Object (可选)
    • httpReferrer String - A HTTP Referrer url.
    • userAgent String - 产生请求的用户代理
    • extraHeaders String - 以 "n" 分隔的额外头

在窗口中加载 url , url 必须包含协议前缀, 比如 http:// 或 file://. 如果加载想要忽略 http 缓存,可以使用 pragma 头来达到目的.

const options = {"extraHeaders" : "pragma: no-cachen"}
webContents.loadURL(url, options)

webContents.downloadURL(url)

  • url URL

初始化一个指定 url 的资源下载,不导航跳转. session 的 will-download 事件会触发.

webContents.getURL()

返回当前page 的 url.

var win = new BrowserWindow({width: 800, height: 600});
win.loadURL("http://github.com");

var currentURL = win.webContents.getURL();

webContents.getTitle()

返回当前page 的 标题.

webContents.isLoading()

返回一个布尔值,标识当前页是否正在加载.

webContents.isWaitingForResponse()

返回一个布尔值,标识当前页是否正在等待主要资源的第一次响应.

webContents.stop()

停止还为开始的导航.

webContents.reload()

重载当前页.

webContents.reloadIgnoringCache()

重载当前页,忽略缓存.

webContents.canGoBack()

返回一个布尔值,标识浏览器是否能回到前一个page.

webContents.canGoForward()

返回一个布尔值,标识浏览器是否能前往下一个page.

webContents.canGoToOffset(offset)

  • offset Integer

返回一个布尔值,标识浏览器是否能前往指定 offset 的page.

webContents.clearHistory()

清除导航历史.

webContents.goBack()

让浏览器回退到前一个page.

webContents.goForward()

让浏览器回前往下一个page.

webContents.goToIndex(index)

  • index Integer

让浏览器回前往指定 index 的page.

webContents.goToOffset(offset)

  • offset Integer

导航到相对于当前页的偏移位置页.

webContents.isCrashed()

渲染进程是否崩溃.

webContents.setUserAgent(userAgent)

  • userAgent String

重写本页用户代理.

webContents.getUserAgent()

返回一个 String ,标识本页用户代理信息.

webContents.insertCSS(css)

  • css String

为当前页插入css.

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

  • code String
  • userGesture Boolean (可选)
  • callback Function (可选) - 脚本执行完成后调用的回调函数.
    • result

评估 page 代码.

浏览器窗口中的一些 HTML API ,例如 requestFullScreen,只能被用户手势请求.设置 userGesture 为 true 可以取消这个限制.

win.webContents.executeJavaScript("
      $(".skey").focus();
");

webContents.setAudioMuted(muted)

  • muted Boolean

减缓当前也的 audio 的播放速度.

webContents.isAudioMuted()

返回一个布尔值,标识当前页是否减缓了 audio 的播放速度.

webContents.undo()

执行网页的编辑命令 undo .

webContents.redo()

执行网页的编辑命令 redo .

webContents.cut()

执行网页的编辑命令 cut .

webContents.copy()

执行网页的编辑命令 copy .

webContents.paste()

执行网页的编辑命令 paste .

webContents.pasteAndMatchStyle()

执行网页的编辑命令 pasteAndMatchStyle .

webContents.delete()

执行网页的编辑命令 delete .

webContents.selectAll()

执行网页的编辑命令 selectAll .

webContents.unselect()

执行网页的编辑命令 unselect .

webContents.replace(text)

  • text String

执行网页的编辑命令 replace .

webContents.replaceMisspelling(text)

  • text String

执行网页的编辑命令 replaceMisspelling .

webContents.insertText(text)

  • text String

插入 text 到获得了焦点的元素.

webContents.findInPage(text[, options])

  • text String - 查找内容, 不能为空.
  • options Object (可选)
    • forward Boolean - 是否向前或向后查找, 默认为 true.
    • findNext Boolean - 当前操作是否是第一次查找或下一次查找, 默认为 false.
    • matchCase Boolean - 查找是否区分大小写, 默认为 false.
    • wordStart Boolean -是否仅以首字母查找. 默认为 false.
    • medialCapitalAsWordStart Boolean - 是否结合 wordStart,如果匹配是大写字母开头,后面接小写字母或无字母,那么就接受这个词中匹配.接受几个其它的合成词匹配, 默认为 false.

发起请求,在网页中查找所有与 text 相匹配的项,并且返回一个 Integer 来表示这个请求用的请求Id.这个请求结果可以通过订阅 found-in-page 事件来取得.

webContents.stopFindInPage(action)

  • action String - 指定一个行为来接替停止 webContents.findInPage 请求.
    • clearSelection - 转变为一个普通的 selection.
    • keepSelection - 清除 selection.
    • activateSelection - 获取焦点并点击 selection node.

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

webContents.on("found-in-page", function(event, result) {
  if (result.finalUpdate)
    webContents.stopFindInPage("clearSelection");
});

const requestId = webContents.findInPage("api");

webContents.hasServiceWorker(callback)

  • callback Function

检查是否有任何 ServiceWorker 注册了,并且返回一个布尔值,来作为 callback响应的标识.

webContents.unregisterServiceWorker(callback)

  • callback Function

如果存在任何 ServiceWorker ,则全部注销,并且当JS承诺执行行或JS拒绝执行而失败的时候,返回一个布尔值,它标识了相应的 callback.

webContents.print([options])

  • options Object (可选)
    • silent Boolean - 不需要请求用户的打印设置. 默认为 false.
    • printBackground Boolean - 打印背景和网页图片. 默认为 false.

打印窗口的网页. 当设置 silent 为 false 的时候,Electron 将使用系统默认的打印机和打印方式来打印.

在网页中调用 window.print() 和 调用 webContents.print({silent: false, printBackground: false})具有相同的作用.

注意: 在 Windows, 打印 API 依赖于 pdf.dll. 如果你的应用不使用任何的打印, 你可以安全删除 pdf.dll来减少二进制文件的size.

webContents.printToPDF(options, callback)

  • options Object
    • marginsType Integer - 指定使用的 margin type. 默认 margin 使用 0, 无 margin 使用 1, 最小化 margin 使用 2.
    • pageSize String - 指定生成的PDF文件的page size. 可以是 A3A4A5LegalLetter 和 Tabloid.
    • printBackground Boolean - 是否打印 css 背景.
    • printSelectionOnly Boolean - 是否只打印选中的部分.
    • landscape Boolean - landscape 为 true, portrait 为 false.
  • callback Function

打印窗口的网页为 pdf ,使用 Chromium 预览打印的自定义设置.

完成时使用 callback(error, data) 调用 callback . data 是一个 Buffer ,包含了生成的 pdf 数据.

默认,空的 options 被视为 :

{
  marginsType: 0,
  printBackground: false,
  printSelectionOnly: false,
  landscape: false
}
const BrowserWindow = require("electron").BrowserWindow;
const fs = require("fs");

var win = new BrowserWindow({width: 800, height: 600});
win.loadURL("https://www..cn");

win.webContents.on("did-finish-load", function() {
  // Use default printing options
  win.webContents.printToPDF({}, function(error, data) {
    if (error) throw error;
    fs.writeFile("/tmp/print.pdf", data, function(error) {
      if (error)
        throw error;
      console.log("Write PDF successfully.");
    })
  })
});

webContents.addWorkSpace(path)

  • path String

添加指定的路径给开发者工具栏的 workspace.必须在 DevTools 创建之后使用它 :

mainWindow.webContents.on("devtools-opened", function() {
  mainWindow.webContents.addWorkSpace(__dirname);
});

webContents.removeWorkSpace(path)

  • path String

从开发者工具栏的 workspace 删除指定的路径.

webContents.openDevTools([options])

  • options Object (可选)
    • detach Boolean - 在一个新窗口打开开发者工具栏

打开开发者工具栏.

webContents.closeDevTools()

关闭开发者工具栏.

webContents.isDevToolsOpened()

返回布尔值,开发者工具栏是否打开.

webContents.isDevToolsFocused()

返回布尔值,开发者工具栏视图是否获得焦点.

webContents.toggleDevTools()

Toggles 开发者工具.

webContents.inspectElement(x, y)

  • x Integer
  • y Integer

在 (xy) 开始检测元素.

webContents.inspectServiceWorker()

为 service worker 上下文打开开发者工具栏.

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

  • channel String
  • arg (可选)

通过 channel 发送异步消息给渲染进程,你也可发送任意的参数.参数应该在 JSON 内部序列化,并且此后没有函数或原形链被包括了.

渲染进程可以通过使用 ipcRenderer 监听 channel 来处理消息.

例子,从主进程向渲染进程发送消息 :

// 主进程.
var window = null;
app.on("ready", function() {
  window = new BrowserWindow({width: 800, height: 600});
  window.loadURL("file://" + __dirname + "/index.html");
  window.webContents.on("did-finish-load", function() {
    window.webContents.send("ping", "whoooooooh!");
  });
});
<!-- index.html -->
<html>
<body>
  <script>
    require("electron").ipcRenderer.on("ping", function(event, message) {
      console.log(message);  // Prints "whoooooooh!"
    });
  </script>
</body>
</html>

webContents.enableDeviceEmulation(parameters)

parameters Object, properties:

  • screenPosition String - 指定需要模拟的屏幕 (默认 : desktop)
    • desktop
    • mobile
  • screenSize Object - 设置模拟屏幕 size (screenPosition == mobile)
    • width Integer - 设置模拟屏幕 width
    • height Integer - 设置模拟屏幕 height
  • viewPosition Object - 在屏幕放置 view (screenPosition == mobile) (默认: {x: 0, y: 0})
    • x Integer - 设置偏移左上角的x轴
    • y Integer - 设置偏移左上角的y轴
  • deviceScaleFactor Integer - 设置设备比例因子 (如果为0,默认为原始屏幕比例) (默认: 0)
  • viewSize Object - 设置模拟视图 size (空表示不覆盖)
    • width Integer - 设置模拟视图 width
    • height Integer - 设置模拟视图 height
  • fitToView Boolean - 如果有必要的话,是否把模拟视图按比例缩放来适应可用空间 (默认: false)
  • offset Object - 可用空间内的模拟视图偏移 (不在适应模式) (默认: {x: 0, y: 0})
    • x Float - 设置相对左上角的x轴偏移值
    • y Float - 设置相对左上角的y轴偏移值
  • scale Float - 可用空间内的模拟视图偏移 (不在适应视图模式) (默认: 1)

使用给定的参数来开启设备模拟.

webContents.disableDeviceEmulation()

使用 webContents.enableDeviceEmulation 关闭设备模拟.

webContents.sendInputEvent(event)

  • event Object
    • type String (必需) - 事件类型,可以是 mouseDownmouseUpmouseEntermouseLeavecontextMenumouseWheelmouseMovekeyDownkeyUpchar.
    • modifiers Array - 事件的 modifiers 数组, 可以是 include shiftcontrolaltmetaisKeypadisAutoRepeatleftButtonDownmiddleButtonDownrightButtonDowncapsLock,numLockleftright.

向 page 发送一个输入 event .

对键盘事件来说,event 对象还有如下属性 :

  • keyCode String (必需) - 特点是将作为键盘事件发送. 可用的 key codes Accelerator.

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

  • x Integer (required)
  • y Integer (required)
  • button String - button 按下, 可以是 leftmiddleright
  • globalX Integer
  • globalY Integer
  • movementX Integer
  • movementY Integer
  • clickCount Integer

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

  • deltaX Integer
  • deltaY Integer
  • wheelTicksX Integer
  • wheelTicksY Integer
  • accelerationRatioX Integer
  • accelerationRatioY Integer
  • hasPreciseScrollingDeltas Boolean
  • canScroll Boolean

webContents.beginFrameSubscription(callback)

  • callback Function

开始订阅 提交 事件和捕获数据帧,当有 提交 事件时,使用 callback(frameBuffer) 调用 callback.

frameBuffer 是一个包含原始像素数据的 Buffer,像素数据是按照 32bit BGRA 格式有效存储的,但是实际情况是取决于处理器的字节顺序的(大多数的处理器是存放小端序的,如果是在大端序的处理器上,数据是 32bit ARGB 格式).

webContents.endFrameSubscription()

停止订阅帧提交事件.

webContents.savePage(fullPath, saveType, callback)

  • fullPath String - 文件的完整路径.
  • saveType String - 指定保存类型.
    • HTMLOnly - 只保存html.
    • HTMLComplete - 保存整个 page 内容.
    • MHTML - 保存完整的 html 为 MHTML.
  • callback Function - function(error) {}.
    • error Error

如果保存界面过程初始化成功,返回 true.

win.loadURL("https://www..cn");

win.webContents.on("did-finish-load", function() {
  win.webContents.savePage("/tmp/test.html", "HTMLComplete", function(error) {
    if (!error)
      console.log("Save page successfully");
  });
});

实例属性

WebContents 对象也有下列属性:

webContents.session

返回这个 webContents 使用的 session 对象.

webContents.hostWebContents

返回这个 webContents 的父 webContents .

webContents.devToolsWebContents

获取这个 WebContents 的开发者工具栏的 WebContents .

注意: 用户不可保存这个对象,因为当开发者工具栏关闭的时候它的值为 null .

webContents.debugger

调试 API 为 remote debugging protocol 提供交替传送.

try {
  win.webContents.debugger.attach("1.1");
} catch(err) {
  console.log("Debugger attach failed : ", err);
};

win.webContents.debugger.on("detach", function(event, reason) {
  console.log("Debugger detached due to : ", reason);
});

win.webContents.debugger.on("message", function(event, method, params) {
  if (method == "Network.requestWillBeSent") {
    if (params.request.url == "https://www..cn")
      win.webContents.debugger.detach();
  }
})

win.webContents.debugger.sendCommand("Network.enable");

webContents.debugger.attach([protocolVersion])

  • protocolVersion String (可选) - 请求调试协议版本.

添加 webContents 调试.

webContents.debugger.isAttached()

返回一个布尔值,标识是否已经给 webContents 添加了调试.

webContents.debugger.detach()

删除 webContents 调试.

webContents.debugger.sendCommand(method[, commandParams, callback])

  • method String - 方法名, 应该是由远程调试协议定义的方法.
  • commandParams Object (可选) - 请求参数为 JSON 对象.
  • callback Function (可选) - Response
    • error Object - 错误消息,标识命令失败.
    • result Object - 回复在远程调试协议中由 "returns"属性定义的命令描述.

发送给定命令给调试目标.

Event: "detach"

  • event Event
  • reason String - 拆分调试器原因.

在调试 session 结束时发出事件.这在 webContents 关闭时或 webContents 请求开发者工具栏时发生.

Event: "message"

  • event Event
  • method String - 方法名.
  • params Object - 在远程调试协议中由 "parameters" 属性定义的事件参数.

每当调试目标发出事件时发出.


阅读全文
以上是58编程为你收集整理的electron web Electron webContents 模块全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 58编程 58biancheng.com 版权所有 联系我们
桂ICP备12005667号-32 Powered by CMS