webFrame

自定义当前网页的渲染。

进程： 渲染器

信息

如果您想在启用了上下文隔离的渲染进程中调用此 API，请将 API 调用放在您的预加载脚本中，并使用 contextBridge API 将其公开。

Electron 模块的 webFrame 导出是 WebFrame 类的一个实例，代表当前 frame。子 frame 可以通过某些属性和方法（例如 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% 或缩小 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) - 脚本执行后调用。除非 frame 被挂起（例如，显示模态警报），否则执行将是同步的，并且将在方法返回之前调用 callback。为了兼容此方法的旧版本，错误参数是第二个。
  • result Any
  • error 错误

返回 Promise<any> - 一个 Promise，它将以执行代码的结果解析，或者如果执行抛出或导致 Promise 被拒绝，则被拒绝。

在页面中执行 code。

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

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

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

返回 Promise<any> - 一个 Promise，它将以执行代码的结果解析，或者如果执行失败，则被拒绝。

工作方式类似于 executeJavaScript，但在隔离的上下文中评估 scripts。

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

webFrame.setIsolatedWorldInfo(worldId, info)

• worldId Integer - 要运行 javascript 的 world 的 ID，0 是默认 world，999 是 Electron 的 contextIsolation 功能使用的 world。Chrome 扩展保留了 [1 << 20, 1 << 29) 范围内的 ID。您可以在此处提供任何整数。
• info Object
  • securityOrigin string (optional) - 隔离 world 的安全源。
  • csp string (optional) - 隔离 world 的内容安全策略。
  • name string (optional) - 隔离 world 的名称。在开发者工具中有用。

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

注意

如果指定了 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 - frame 元素的 CSS 选择器。

返回 WebFrame | null - webFrame 文档中由 selector 选择的 frame 元素，如果 selector 未选择到 frame 或 frame 不在当前渲染器进程中，则返回 null。

webFrame.findFrameByName(name)

• name string

返回 WebFrame | null - webFrame 的子项，具有提供的 name，如果不存在该 frame 或 frame 不在当前渲染器进程中，则返回 null。

webFrame.findFrameByRoutingId(routingId) 已弃用

• routingId Integer - 一个 Integer，代表当前渲染器进程中的唯一 frame ID。Routing ID 可以从 WebFrame 实例（webFrame.routingId）检索，也可以通过特定于 frame 的 WebContents 导航事件（例如 did-frame-navigate）传递。

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

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

webFrame.findFrameByToken(frameToken)

• frameToken string - 一个 string，代表当前渲染器进程中的唯一 frame ID。Frame token 可以从 WebFrame 实例（webFrame.frameToken）检索，也可以使用 webFrameMain.frameToken 从 WebFrameMain 实例检索。

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

webFrame.isWordMisspelled(word)

• word string - 要进行拼写检查的单词。

返回 boolean - 如果单词根据内置拼写检查器被认为是拼写错误的，则为 true，否则为 false。如果没有加载字典，则始终返回 false。

webFrame.getWordSuggestions(word)

• word string - 拼写错误的单词。

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

属性

webFrame.top 只读

一个 WebFrame | null，代表 webFrame 所属的 frame 层级中的顶级 frame，如果顶级 frame 不在当前渲染器进程中，则该属性为 null。

webFrame.opener 只读

一个 WebFrame | null，代表打开 webFrame 的 frame，如果不存在 opener 或 opener 不在当前渲染器进程中，则该属性为 null。

webFrame.parent 只读

一个 WebFrame | null，代表 webFrame 的父 frame，如果 webFrame 是顶层 frame 或父 frame 不在当前渲染器进程中，则该属性为 null。

webFrame.firstChild 只读

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

webFrame.nextSibling 只读

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

webFrame.routingId 只读 已弃用

一个 Integer，代表当前渲染器进程中的唯一 frame ID。指向同一底层 frame 的不同 WebFrame 实例将具有相同的 routingId。

已弃用：请使用新的 webFrame.frameToken API。

webFrame.frameToken 只读

一个 string，代表当前渲染器进程中的唯一 frame token。指向同一底层 frame 的不同 WebFrame 实例将具有相同的 frameToken。