webFrame¶

自定义当前网页的渲染。

[!IMPORTANT] 如果你想在启用上下文隔离的渲染进程中调用此 API，请将 API 调用放在预加载脚本中，并使用 contextBridge API 暴露它。

Electron 模块的 webFrame 导出是 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%。

[!NOTE] Chromium 级别的缩放策略是同源策略，这意味着特定域名的缩放级别会传播到具有相同域名的所有窗口实例。区分窗口 URL 可使缩放按窗口生效。

`webFrame.getZoomLevel()`¶

返回 number - 当前缩放级别。

`webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`¶

minimumLevel number
maximumLevel number

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

[!NOTE] 在 Electron 中，视觉缩放默认禁用。要重新启用它，请调用：
webFrame.setVisualZoomLevelLimits(1, 3)
[!NOTE] 视觉缩放仅适用于捏合缩放行为。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 作为提供程序的示例：

```js @ts-expect-error=[3,8] 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])` {#webframe-insertcss-css-options}

* `css` string
* `options` Object（可选）
  * `cssOrigin` string（可选）- 可以是 'user' 或 'author'。设置插入样式表的[级联源](https://www.w3.org/TR/css3-cascade/#cascade-origin)。默认值为 'author'。

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

将 CSS 注入当前网页，并返回插入样式表的唯一键。

### `webFrame.removeInsertedCSS(key)` {#webframe-removeinsertedcss-key}

* `key` string

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

### `webFrame.insertText(text)` {#webframe-inserttext-text}

* `text` string

将 `text` 插入到聚焦的元素中。

### `webFrame.executeJavaScript(code[, userGesture][, callback])` {#webframe-executejavascript-code-usergesture-callback}

* `code` string
* `userGesture` boolean（可选）- 默认值为 `false`。
* `callback` Function（可选）- 在脚本执行后调用。除非
  帧被挂起（例如显示模态警报），否则执行将是
  同步的，并且回调会在方法返回前调用。为了
  与此方法的旧版本兼容，error 参数是
  第二个。
  * `result` Any
  * `error` Error

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

在页面中求值 `code`。

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

### `webFrame.executeJavaScriptInIsolatedWorld(worldId, scripts[, userGesture][, callback])` {#webframe-executejavascriptinisolatedworld-worldid-scripts-usergesture-callback}

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

返回 `Promise<any>` - 一个 Promise，以已执行代码的结果解析，或者如果执行无法启动则被拒绝。



Works like `executeJavaScript` but evaluates `scripts` in an isolated context.

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

### `webFrame.setIsolatedWorldInfo(worldId, info)` {#webframe-setisolatedworldinfo-worldid-info}

* `worldId` Integer - 用于运行 javascript 的世界的 ID，`0` 是默认世界，`999` 是 Electron 的 `contextIsolation` 功能使用的世界。Chrome 扩展程序保留 `[1 << 20, 1 << 29)` 范围内的 ID。你可以在此提供任何整数。
* `info` Object
  * `securityOrigin` string（可选）- 隔离世界的安全源。
  * `csp` string（可选）- 隔离世界的内容安全策略。
  * `name` string（可选）- 隔离世界的名称。在 DevTools 中很有用。

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

> [!NOTE]
> 如果指定了 `csp`，则还必须指定 `securityOrigin`。

### `webFrame.getIsolatedWorlds()` {#webframe-getisolatedworlds}

<!--
```YAML history
added:
  - pr-url: https://github.com/electron/electron/pull/50633

-->

返回 Integer[] - 当前此 frame 中存在的隔离世界的 ID。这不包括主世界（ID 0）或 Electron 的 preload 世界（ID 999）。

这可用于在调用 webFrame.executeJavaScriptInIsolatedWorld(...) 或 contextBridge.exposeInIsolatedWorld(...) 等 API 之前发现已存在的隔离世界。

`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's 文档中由 selector 选中的 frame 元素。如果 selector 未选中 frame，或者 frame 不在当前渲染器进程中，则返回 null。

`webFrame.findFrameByName(name)`¶

name string

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

`webFrame.findFrameByRoutingId(routingId)` 已弃用¶

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

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

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

`webFrame.findFrameByToken(frameToken)`¶

frameToken string - 表示当前渲染器进程中唯一 frame id 的 string。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[] - 给定单词的建议单词列表。如果单词拼写正确，结果将为空。

事件¶

事件: 'isolated-world-created'¶

返回：

worldId Integer - 刚刚创建的隔离世界的 ID。

当为 webFrame 创建新的隔离世界时发出。此事件不会为主世界（ID 0）或 Electron 的 preload 世界（ID 999）触发。

属性¶

`webFrame.top` 只读¶

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

`webFrame.opener` 只读¶

表示打开 webFrame 的 frame 的 WebFrame | null。如果没有 opener，或者 opener 不在当前渲染器进程中，则该属性为 null。

`webFrame.parent` 只读¶

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

`webFrame.firstChild` 只读¶

表示 webFrame 的第一个子 frame 的 WebFrame | null。如果 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。

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron

webFrame¶

方法¶

webFrame.setZoomFactor(factor)¶

webFrame.getZoomFactor()¶

webFrame.setZoomLevel(level)¶

webFrame.getZoomLevel()¶

webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)¶

webFrame.setSpellCheckProvider(language, provider)¶

webFrame.getResourceUsage()¶

webFrame.clearCache()¶

webFrame.getFrameForSelector(selector)¶

webFrame.findFrameByName(name)¶

webFrame.findFrameByRoutingId(routingId) 已弃用¶

webFrame.findFrameByToken(frameToken)¶

webFrame.isWordMisspelled(word)¶

webFrame.getWordSuggestions(word)¶

事件¶