跳转到主要内容

webFrame

自定义当前网页的渲染。

进程: 渲染进程

信息

如果要在启用了上下文隔离的渲染进程中调用此 API,请将 API 调用放在你的 preload 脚本中,并使用 expose 它,通过 contextBridge API。

webFrame 是 Electron 模块的导出,代表当前框架的 WebFrame 类实例。可以通过某些属性和方法(例如 webFrame.firstChild)检索子框架。

将当前页面缩放到 200% 的一个示例。

const { webFrame } = require('electron')

webFrame.setZoomFactor(2)

方法

WebFrame 类具有以下实例方法

webFrame.setZoomFactor(factor)

  • factor Double - 缩放比例;默认值为 1.0。

将缩放比例更改为指定的因子。缩放比例是缩放百分比除以 100,因此 300% = 3.0。

该比例必须大于 0.0。

webFrame.getZoomFactor()

返回 number - 当前缩放比例。

webFrame.setZoomLevel(level)

  • level number - 缩放级别。

将缩放级别更改为指定的级别。原始大小为 0,高于或低于原始大小的每个增量表示放大或缩小 20%,默认限制分别为原始大小的 300% 和 50%。

注意

Chromium 级别的缩放策略是同源策略,这意味着特定域的缩放级别会传播到具有相同域的所有窗口实例。区分窗口 URL 将使缩放功能在每个窗口中生效。

webFrame.getZoomLevel()

返回 number - 当前缩放级别。

webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)

  • minimumLevel number
  • maximumLevel number

设置捏合缩放的最大和最小级别。

注意

默认情况下,Electron 中禁用视觉缩放。要重新启用它,请调用

webFrame.setVisualZoomLevelLimits(1, 3)
注意

视觉缩放仅适用于捏合缩放行为。Cmd+/-/0 缩放快捷键由应用程序菜单中的 'zoomIn'、'zoomOut' 和 'resetZoom' MenuItem 角色控制。要禁用快捷键,请手动 定义菜单并从定义中省略缩放角色。

webFrame.setSpellCheckProvider(language, provider)

  • language string
  • provider Object
    • spellCheck Function
      • words string[]
      • callback Function
        • misspeltWords string[]

为输入字段和文本区域设置拼写检查提供程序。

如果您想使用此方法,则必须在构造窗口时禁用内置拼写检查器。

const mainWindow = new BrowserWindow({
webPreferences: {
spellcheck: false
}
})

provider 必须是一个具有 spellCheck 方法的对象,该方法接受一个用于拼写检查的单个单词数组。spellCheck 函数异步运行,并在完成时使用拼写错误的单词数组调用 callback 函数。

使用 node-spellchecker 作为提供程序的示例

const { webFrame } = require('electron')

const spellChecker = require('spellchecker')

webFrame.setSpellCheckProvider('en-US', {
spellCheck (words, callback) {
setTimeout(() => {
const misspelled = words.filter(x => spellchecker.isMisspelled(x))
callback(misspelled)
}, 0)
}
})

webFrame.insertCSS(css[, options])

  • css string
  • options Object (可选)
    • cssOrigin string (optional) - 可以是 'user' 或 'author'。设置插入样式表的 级联源。默认值为 'author'。

返回 string - 插入 CSS 的键,稍后可以使用 webFrame.removeInsertedCSS(key) 删除 CSS。

将 CSS 注入当前网页,并返回一个用于插入的样式的唯一键,该键可以在之后通过 <webview>.removeInsertedCSS(css) 移除。

webFrame.removeInsertedCSS(key)

  • key string

从当前网页中删除插入的 CSS。样式表由其键标识,该键由 webFrame.insertCSS(css) 返回。

webFrame.insertText(text)

  • text string

text 插入到焦点元素中。

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

  • code string
  • userGesture boolean (可选) - 默认为 false
  • callback Function (optional) - 在执行脚本后调用。除非框架被挂起(例如,显示模态警报),否则执行将是同步的,并且在方法返回之前将调用回调函数。为了与此方法的旧版本兼容,错误参数是第二个。
    • result Any
    • error 错误

返回 Promise<any> - 一个 Promise,它使用执行代码的结果解析,或者如果执行引发错误或导致 Promise 被拒绝,则被拒绝。

在页面中执行 code

在浏览器窗口中,某些 HTML API(如 requestFullScreen)只能由用户的手势调用。将 userGesture 设置为 true 将消除此限制。

webFrame.executeJavaScriptInIsolatedWorld(worldId, scripts[, userGesture][, callback])

  • worldId Integer - 在其中运行 javascript 的世界的 ID,0 是默认主世界(内容运行的地方),999 是 Electron 的 contextIsolation 功能使用的世界。接受范围在 1..536870911 中的值。
  • scripts WebSource[]
  • userGesture boolean (可选) - 默认为 false
  • callback Function (optional) - 在执行脚本后调用。除非框架被挂起(例如,显示模态警报),否则执行将是同步的,并且在方法返回之前将调用回调函数。为了与此方法的旧版本兼容,错误参数是第二个。
    • result Any
    • error 错误

返回 Promise<any> - 一个 Promise,它使用执行代码的结果解析,或者如果执行无法启动,则被拒绝。

executeJavaScript 类似,但会在隔离的上下文中评估 scripts

请注意,当脚本执行失败时,返回的 Promise 将不会被拒绝,并且 result 将为 undefined。这是因为 Chromium 不会将隔离世界的错误分派到外部世界。

webFrame.setIsolatedWorldInfo(worldId, info)

  • worldId Integer - 在其中运行 javascript 的世界的 ID,0 是默认世界,999 是 Electron 的 contextIsolation 功能使用的世界。Chrome 扩展程序保留 ID 范围 [1 << 20, 1 << 29)。您可以在此处提供任何整数。
  • info Object
    • securityOrigin string (optional) - 隔离世界的安全来源。
    • csp string (optional) - 隔离世界的 Content Security Policy。
    • name string (optional) - 隔离世界的名称。在 DevTools 中很有用。

设置隔离世界的安全来源、内容安全策略和名称。

注意

如果指定了 csp,则也必须指定 securityOrigin

webFrame.getResourceUsage()

返回 Object

返回一个对象,描述 Blink 内部内存缓存的使用情况。

const { webFrame } = require('electron')

console.log(webFrame.getResourceUsage())

这将生成

{
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()

尝试释放不再使用的内存(例如,来自先前导航的图像)。

请注意,盲目调用此方法可能会使 Electron 变慢,因为它将不得不重新填充这些清空的缓存,您应该仅在应用程序中发生事件时调用它,该事件使您认为您的页面实际上正在使用更少的内存(例如,您从一个超级沉重的页面导航到几乎为空的页面,并打算保持在那里)。

webFrame.getFrameForSelector(selector)

  • selector string - 用于框架元素的 CSS 选择器。

返回 WebFrame | null - 在 webFrame 的文档中由 selector 选择的框架元素,如果 selector 未选择框架或框架不在当前渲染进程中,则返回 null

webFrame.findFrameByName(name)

  • name string

返回 WebFrame | null - 具有指定 namewebFrame 的子项,如果不存在这样的框架或框架不在当前渲染进程中,则返回 null

webFrame.findFrameByRoutingId(routingId) 已弃用

  • routingId Integer - 表示当前渲染进程中唯一框架 ID 的 Integer。可以从 WebFrame 实例(webFrame.routingId)检索路由 ID,并且也由框架特定的 WebContents 导航事件(例如 did-frame-navigate)传递。

返回 WebFrame | null - 具有指定的 routingId,如果未找到则返回 null

已弃用:请使用新的 webFrame.findFrameByToken API。

webFrame.findFrameByToken(frameToken)

  • frameToken 字符串 - 一个 字符串,代表当前渲染进程中的唯一帧 ID。帧令牌可以从 WebFrame 实例(webFrame.frameToken)中检索,也可以使用 webFrameMain.frameTokenWebFrameMain 实例中检索。

返回 WebFrame | null - 具有提供的 frameToken,如果未找到则返回 null

webFrame.isWordMisspelled(word)

  • word 字符串 - 要进行拼写检查的单词。

返回 boolean - 如果内置拼写检查器认为该单词拼写错误,则返回 True,否则返回 False。如果没有加载字典,则始终返回 False。

webFrame.getWordSuggestions(word)

  • word 字符串 - 拼写错误的单词。

返回 string[] - 给定单词的建议单词列表。如果单词拼写正确,则结果为空。

属性

webFrame.top 只读

一个 WebFrame | null,代表 webFrame 所属的帧层次结构中的顶级帧。如果顶级帧不在当前渲染进程中,则该属性将为 null

webFrame.opener 只读

一个 WebFrame | null,代表打开 webFrame 的帧。如果不存在打开者或打开者不在当前渲染进程中,则该属性将为 null

webFrame.parent 只读

一个 WebFrame | null,代表 webFrame 的父帧。如果 webFrame 是顶级帧或父帧不在当前渲染进程中,则该属性将为 null

webFrame.firstChild 只读

一个 WebFrame | null,代表 webFrame 的第一个子帧。如果 webFrame 没有子帧或第一个子帧不在当前渲染进程中,则该属性将为 null

webFrame.nextSibling 只读

一个 WebFrame | null,代表下一个同级帧。如果 webFrame 是其父级的最后一个帧或下一个同级帧不在当前渲染进程中,则该属性将为 null

webFrame.routingId 只读 已弃用

一个 Integer,代表当前渲染进程中的唯一帧 ID。引用相同底层帧的不同 WebFrame 实例将具有相同的 routingId

已弃用: 使用新的 webFrame.frameToken API。

webFrame.frameToken 只读

一个 string,代表当前渲染进程中的唯一帧令牌。引用相同底层帧的不同 WebFrame 实例将具有相同的 frameToken