页面渲染

优质

小牛编辑

131浏览

2023-12-01

web-frame 模块可自定义渲染当前网页

进程: 渲染进程
例如放大当前页至 200%.
1
const {webFrame} = require('electron')
2
webFrame.setZoomFactor(2)
Copied!

方法

`webFrame.setZoomFactor(factor)`

用途:设置页面的缩放系数

factor Number - 缩放系数

注意:缩放系数是百分制的,如3.0=300％。

`webFrame.getZoomFactor()`

用途:获得当前缩放系数( Number)

`webFrame.setZoomLevel(level)`

用途:将缩放级别更改为指定级别

level Number - 缩放级别

原始大小为0,每个增量表示放大或缩小20％,默认限制为原始大小的300％至50％。

`webFrame.getZoomLevel()`

用途:获得当前缩放级别( Number)

`webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`

用途:设置缩放级别的最大值和最小值

minimumLevel Number
maximumLevel Number

`webFrame.setLayoutZoomLevelLimits(minimumLevel, maximumLevel)`

用途:设置基于布局(即非视觉)的缩放级别的最大值和最小值

minimumLevel Number
maximumLevel Number

`webFrame.setSpellCheckProvider(language, autoCorrectWord, provider)`

用途:为输入框或文本域设置拼写检查的提供程序

language String
autoCorrectWord Boolean
provider Object
- spellCheck Function - 返回 Boolean
  - text String
provider必须是具有 spellCheck方法的对象,该方法返回扫过的单词是否拼写正确。

把[node-spellchecker][spellchecker]作为提供程序的示例:
1
const {webFrame} = require('electron')
2
webFrame.setSpellCheckProvider('en-US', true, {
3
spellCheck (text) {
4
return !(require('spellchecker').isMisspelled(text))
5
}
6
})
Copied!

`webFrame.registerURLSchemeAsSecure(scheme)`

用途:将 scheme 注册为安全协议

scheme String

例如, https和 data是安全的协议,它不能轻易的被黑客破坏。

`webFrame.registerURLSchemeAsBypassingCSP(scheme)`

用途:忽略当前页面的内容安全策略,资源全部从此 scheme 加载

scheme String

`webFrame.registerURLSchemeAsPrivileged(scheme[, options])`

用途:忽略内容安全策略,将 scheme 注册为安全协议且允许注册ServiceWorker和支持fetch API

scheme String
options Object (可选)
- secure Boolean - (可选) 默认为 true
- bypassCSP Boolean - (可选) 默认为 true
- allowServiceWorkers Boolean - (可选) 默认为 true
- supportFetchAPI Boolean - (可选) 默认为 true
- corsEnabled Boolean - (可选) 默认为 true

以上选项值如指定 false则表示从注册中忽视该选项。
在不绕过内容安全策略的情况下注册特权方案的示例:
1
const {webFrame} = require('electron')
2
webFrame.registerURLSchemeAsPrivileged('foo', { bypassCSP: false })
Copied!

`webFrame.insertText(text)`

用途:插入 text 到焦点元素

text String

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

用途:在页面中评估(eval) code( Promise)

code String
userGesture Boolean (可选) - 默认为 false,设置为 true时可使某些HTML API(如 requestFullScreen)手势去除由用户手势进行调用的限制。
callback Function (可选) - 在脚本执行后调用
- result Any

返回 Promise - 如果被正确执行则返回可用的承诺，否则将被拒绝。
在浏览器窗口中，一些HTML API（如requestFullScreen)只能由用户的手势调用。需要将 userGesture设置为 true进行消除这个限制。

`webFrame.getResourceUsage()`

用途:获取描述Blink内存缓存信息的对象( Object)

images MemoryUsageDetails
cssStyleSheets MemoryUsageDetails
xslStyleSheets MemoryUsageDetails
fonts MemoryUsageDetails
other MemoryUsageDetails

1
const {webFrame} = require('electron')
2
console.log(webFrame.getResourceUsage())
Copied!

这将生成:
1
{
2
images: {
3
count: 22,
4
size: 2549,
5
liveSize: 2542,
6
},
7
cssStyleSheets: { /* 类同上行的 `images` */ },
8
xslStyleSheets: { /* 类同上行的 `images` */ },
9
fonts: { /* 类同上行的 `images` */ },
10
other: { /* 类同上行的 `images` */ }
11
}
Copied!

`webFrame.clearCache()`

用途:释放无用内存(如如来自上一个导航的图像)

如果盲调用此方法,可能会使Electron运行比较卡,因为它将不得不重新填充这些空的缓存!
建议在某些比较消耗内存的应用事件时才进行调用,比如加载了个很冗长复杂且需长时间停留使用的页面.
[spellchecker]: https://github.com/atom/node-spellchecker