网页框架

自定义当前网页的渲染。

进程：渲染器

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 (可选) - 可以是 'user' 或 'author'。设置插入样式表的 级联来源。默认值为 'author'。

返回 string - 插入 CSS 的键，稍后可用于通过 webFrame.removeInsertedCSS(key) 删除 CSS。

将 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 (可选) - 在脚本执行后调用。除非框架被挂起（例如，显示模态警告），否则执行将是同步的，并且回调将在方法返回之前被调用。为了与此方法的旧版本兼容，错误参数是第二个。
  • result Any
  • error Error

返回 Promise<any> - 一个 promise，该 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 (可选) - 在脚本执行后调用。除非框架被挂起（例如，显示模态警告），否则执行将是同步的，并且回调将在方法返回之前被调用。为了与此方法的旧版本兼容，错误参数是第二个。
  • result Any
  • error Error

返回 Promise<any> - 一个 promise，该 promise 在执行的代码的结果解析或在执行无法启动时被拒绝。

与 executeJavaScript 相似，但它在隔离的上下文中评估 scripts。

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

webFrame.setIsolatedWorldInfo(worldId, info)

• worldId Integer - 要在其中运行 javascript 的世界的 ID，0 是默认世界，999 是 Electrons contextIsolation 功能使用的世界。Chrome 扩展程序保留 [1 << 20, 1 << 29) 范围内的 ID。你可以在这里提供任何整数。
• info Object
  • securityOrigin string (可选) - 隔离世界的安全来源。
  • csp string (可选) - 隔离世界的内容安全策略。
  • name string (可选) - 隔离世界的名称。在开发工具中很有用。

设置隔离世界的安全来源、内容安全策略和名称。注意：如果指定了 csp，则也必须指定 securityOrigin。

webFrame.getResourceUsage()

返回 Object

• images MemoryUsageDetails
• scripts MemoryUsageDetails
• cssStyleSheets MemoryUsageDetails
• xslStyleSheets MemoryUsageDetails
• fonts MemoryUsageDetails
• other MemoryUsageDetails

返回一个对象，描述 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 - webFrame 的文档中由 selector 选择的框架元素，如果 selector 没有选择框架或框架不在当前渲染器进程中，则将返回 null。

webFrame.findFrameByName(name)

• name string

返回 WebFrame - webFrame 的子级，具有提供的 name，如果不存在此类框架或框架不在当前渲染器进程中，则将返回 null。

webFrame.findFrameByRoutingId(routingId)

• routingId 整数 - 表示当前渲染进程中唯一帧 ID 的 整数。路由 ID 可以从 WebFrame 实例（webFrame.routingId）中获取，并且在帧特定的 WebContents 导航事件（例如 did-frame-navigate）中也会传递。

返回 WebFrame - 具有提供的 routingId，如果未找到则为 null。

webFrame.isWordMisspelled(word)

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

返回 布尔值 - 如果单词根据内置拼写检查器拼写错误，则为真，否则为假。如果没有加载词典，则始终返回假。

webFrame.getWordSuggestions(word)

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

返回 字符串[] - 给定单词的建议词列表。如果单词拼写正确，则结果将为空。

属性

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 只读

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