Skip to main content

webFrame

Customize the rendering of the current web page.自定义当前网页的呈现方式。

Process:进程:Renderer

webFrame export of the Electron module is an instance of the webFrame class representing the current frame. Electron模块的webFrame导出是表示当前帧的webFrame类的一个实例。Sub-frames can be retrieved by certain properties and methods (e.g. webFrame.firstChild).子帧可以通过某些属性和方法(例如webFrame.firstChild)检索。

An example of zooming current page to 200%.将当前页面缩放到200%的示例。

const { webFrame } = require('electron')

webFrame.setZoomFactor(2)

Methods方法

The webFrame class has the following instance methods:webFrame类具有以下实例方法:

webFrame.setZoomFactor(factor)

  • factor Double - Zoom factor; default is 1.0.缩放因子;默认值为1.0。

Changes the zoom factor to the specified factor. Zoom factor is zoom percent divided by 100, so 300% = 3.0.将缩放因子更改为指定的因子。缩放因子是缩放百分比除以100,因此300%=3.0。

The factor must be greater than 0.0.该系数必须大于0.0。

webFrame.getZoomFactor()

Returns返回number - The current zoom factor.当前缩放因子。

webFrame.setZoomLevel(level)

  • level number - Zoom level.缩放级别。

Changes the zoom level to the specified level. 将缩放级别更改为指定级别。The original size is 0 and each increment above or below represents zooming 20% larger or smaller to default limits of 300% and 50% of original size, respectively.原始大小为0,每个高于或低于的增量表示放大或缩小20%,分别达到原始大小的300%和50%的默认限制。

NOTE: The zoom policy at the Chromium level is same-origin, meaning that the zoom level for a specific domain propagates across all instances of windows with the same domain. :Chromium级别的缩放策略是同源的,这意味着特定域的缩放级别在具有相同域的所有窗口实例中传播。Differentiating the window URLs will make zoom work per-window.区分窗口URL将使每个窗口都能进行缩放。

webFrame.getZoomLevel()

Returns返回number - The current zoom level.当前缩放级别。

webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel)

  • minimumLevel number
  • maximumLevel number

Sets the maximum and minimum pinch-to-zoom level.将最大和最小夹点设置为缩放级别。

NOTE: Visual zoom is disabled by default in Electron. To re-enable it, call::Electron中默认禁用视觉缩放。要重新启用它,请调用:

webFrame.setVisualZoomLevelLimits(1, 3)

NOTE: Visual zoom only applies to pinch-to-zoom behavior. :视觉缩放仅适用于缩放行为。Cmd+/-/0 zoom shortcuts are controlled by the 'zoomIn', 'zoomOut', and 'resetZoom' MenuItem roles in the application Menu. Cmd+/-/0缩放快捷方式由应用程序菜单中的“zoomIn”、“zoomOut”和“resetZoom”MenuItem角色控制。To disable shortcuts, manually define the Menu and omit zoom roles from the definition.要禁用快捷方式,请手动定义“菜单”,并从定义中省略缩放角色。

webFrame.setSpellCheckProvider(language, provider)

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

Sets a provider for spell checking in input fields and text areas.设置用于在输入字段和文本区域中进行拼写检查的提供程序。

If you want to use this method you must disable the builtin spellchecker when you construct the window.如果要使用此方法,则在构建窗口时必须禁用内置拼写检查器。

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

The provider must be an object that has a spellCheck method that accepts an array of individual words for spellchecking. provider必须是具有接受单个单词数组进行拼写检查的spellCheck方法的对象。The spellCheck function runs asynchronously and calls the callback function with an array of misspelt words when complete.spellCheck函数异步运行,并在完成时使用拼写错误的单词数组调用callback

An example of using node-spellchecker as provider:使用node-spellchecker作为提供程序的示例:

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

webFrame.insertCSS(css[, options])

  • css string
  • options Object (optional)
    • cssOrigin string (optional) - Can be either 'user' or 'author'. 可以是“user”或“author”。Sets the cascade origin of the inserted stylesheet. 设置插入样式表的级联原点Default is 'author'.默认值为“author”。

Returns返回string - A key for the inserted CSS that can later be used to remove the CSS via webFrame.removeInsertedCSS(key).插入的CSS的一个键,以后可以通过webFrame.removeInsertedCSS(key)删除CSS。

Injects CSS into the current web page and returns a unique key for the inserted stylesheet.将CSS注入当前网页,并为插入的样式表返回一个唯一的键。

webFrame.removeInsertedCSS(key)

  • key string

Removes the inserted CSS from the current web page. 从当前网页中删除插入的CSS。The stylesheet is identified by its key, which is returned from webFrame.insertCSS(css).样式表由其关键字标识,该关键字是从webFrame.insertCSS(css)返回的。

webFrame.insertText(text)

  • text string

Inserts text to the focused element.在焦点元素中插入text

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

  • code string
  • userGesture boolean (optional) - Default is false.默认值为false
  • callback Function (optional) - Called after script has been executed. 在脚本执行后调用。Unless the frame is suspended (e.g. showing a modal alert), execution will be synchronous and the callback will be invoked before the method returns. 除非帧被挂起(例如显示模式警报),否则执行将是同步的,并且回调将在方法返回之前被调用。For compatibility with an older version of this method, the error parameter is second.为了与此方法的旧版本兼容,错误参数为第二个。
    • result Any
    • error Error

Returns返回Promise<any> - A promise that resolves with the result of the executed code or is rejected if execution throws or results in a rejected promise.一种承诺,通过执行代码的结果来解析,或者如果执行抛出或导致被拒绝的承诺,则被拒绝。

Evaluates code in page.评估页面中的code

In the browser window some HTML APIs like requestFullScreen can only be invoked by a gesture from the user. 在浏览器窗口中,一些HTML API(如requestFullScreen)只能通过用户的手势调用。Setting userGesture to true will remove this limitation.userGesture设置为true将删除此限制。

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

  • worldId Integer - The ID of the world to run the javascript in, 0 is the default main world (where content runs), 999 is the world used by Electron's contextIsolation feature. 要在其中运行javascript的世界的ID,0是默认的主世界(内容运行的地方),999是Electron的contextIsolation功能使用的世界。Accepts values in the range 1..536870911.接受范围为1..536870911的值。
  • scripts WebSource[]
  • userGesture boolean (optional) - Default is false.默认值为false
  • callback Function (optional) - Called after script has been executed. 在脚本执行后调用。Unless the frame is suspended (e.g. showing a modal alert), execution will be synchronous and the callback will be invoked before the method returns. 除非帧被挂起(例如显示模式警报),否则执行将是同步的,并且回调将在方法返回之前被调用。For compatibility with an older version of this method, the error parameter is second.为了与此方法的旧版本兼容,错误参数为第二个。
    • result Any
    • error Error

Returns返回Promise<any> - A promise that resolves with the result of the executed code or is rejected if execution could not start.一种承诺,它通过执行代码的结果来解析,或者在无法开始执行时被拒绝。

Works like executeJavaScript but evaluates scripts in an isolated context.executeJavaScript类似,但在孤立的上下文中评估scripts

Note that when the execution of script fails, the returned promise will not reject and the result would be undefined. 请注意,当脚本执行失败时,返回的promise不会被拒绝,并且result将是undefinedThis is because Chromium does not dispatch errors of isolated worlds to foreign worlds.这是因为Chromium不会将孤立世界的错误发送到外部世界。

webFrame.setIsolatedWorldInfo(worldId, info)

  • worldId Integer - The ID of the world to run the javascript in, 0 is the default world, 999 is the world used by Electrons contextIsolation feature. 要在其中运行javascript的世界的ID,0是默认世界,999是Electrons contextIsolation功能使用的世界。Chrome extensions reserve the range of IDs in [1 << 20, 1 << 29). Chrome扩展保留了[1 << 20, 1 << 29)中的ID范围。You can provide any integer here.您可以在此处提供任何整数。
  • info Object
    • securityOrigin string (optional) - Security origin for the isolated world.孤立世界的安全起源。
    • csp string (optional) - Content Security Policy for the isolated world.针对孤立世界的内容安全策略。
    • name string (optional) - Name for isolated world. Useful in devtools.孤立世界的名称。在开发工具中很有用。

Set the security origin, content security policy and name of the isolated world. 设置隔离世界的安全来源、内容安全策略和名称。Note: If the csp is specified, then the securityOrigin also has to be specified.注意:如果指定了csp,那么还必须指定securityOrigin

webFrame.getResourceUsage()

Returns返回Object:

Returns an object describing usage information of Blink's internal memory caches.返回一个对象,该对象描述Blink的内部内存缓存的使用情况信息。

const { webFrame } = require('electron')
console.log(webFrame.getResourceUsage())

This will generate:这将产生:

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

Attempts to free memory that is no longer being used (like images from a previous navigation).尝试释放不再使用的内存(如以前导航中的图像)。

Note that blindly calling this method probably makes Electron slower since it will have to refill these emptied caches, you should only call it if an event in your app has occurred that makes you think your page is actually using less memory (i.e. you have navigated from a super heavy page to a mostly empty one, and intend to stay there).请注意,盲目调用此方法可能会使Electron的速度变慢,因为它将不得不重新填充这些清空的缓存。只有当应用程序中发生事件,使您认为页面实际上使用的内存较少时(即,您已经从一个超重的页面导航到一个大部分为空的页面,并打算留在那里),您才应该调用它。

webFrame.getFrameForSelector(selector)

  • selector string - CSS selector for a frame element.框架元素的CSS选择器。

Returns返回webFrame - The frame element in webFrame's document selected by selector, null would be returned if selector does not select a frame or if the frame is not in the current renderer process.selector选择的webFrame文档中的框架元素,如果selector没有选择框架或框架不在当前渲染器进程中,则返回null

webFrame.findFrameByName(name)

  • name string

Returns返回webFrame - A child of webFrame with the supplied name, null would be returned if there's no such frame or if the frame is not in the current renderer process.如果没有提供namenullwebFrame的子帧,或者该帧不在当前渲染器进程中,则会返回该子帧。

webFrame.findFrameByRoutingId(routingId)

  • routingId Integer - An Integer representing the unique frame id in the current renderer process. 一个Integer,表示当前渲染器进程中唯一的帧id。Routing IDs can be retrieved from webFrame instances (webFrame.routingId) and are also passed by frame specific WebContents navigation events (e.g. did-frame-navigate)路由ID可以从webFrame实例(webFrame.routingId)中检索,也可以由特定于帧的WebContents导航事件传递(例如,did-frame-navigate

Returns返回webFrame - that has the supplied routingId, null if not found.具有提供的routingId,如果未找到,则为null

webFrame.isWordMisspelled(word)

  • word string - The word to be spellchecked.要拼写检查的单词。

Returns返回boolean - True if the word is misspelled according to the built in spellchecker, false otherwise. 如果根据内置的拼写检查器拼写错误,则为True,否则为falseIf no dictionary is loaded, always return false.如果没有加载字典,则始终返回false

webFrame.getWordSuggestions(word)

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

Returns返回string[] - A list of suggested words for a given word. 一个给定单词的建议单词列表。If the word is spelled correctly, the result will be empty.如果单词拼写正确,结果将为空。

Properties属性

webFrame.top Readonly

A WebFrame | null representing top frame in frame hierarchy to which webFrame belongs, the property would be null if top frame is not in the current renderer process.一个WebFrame | null,表示webFrame所属的帧层次结构中的顶部帧,如果顶部帧不在当前渲染器进程中,则该属性将为null

webFrame.opener Readonly

A WebFrame | null representing the frame which opened webFrame, the property would be null if there's no opener or opener is not in the current renderer process.一个WebFrame|null,表示打开webFrame的帧,如果没有开场白或开场白不在当前渲染器进程中,则属性将为null

webFrame.parent Readonly

A WebFrame | null representing parent frame of webFrame, the property would be null if webFrame is top or parent is not in the current renderer process.一个WebFrame | null表示WebFrame的父帧,如果webFrame位于顶部或父帧不在当前渲染器进程中,则该属性将为null

webFrame.firstChild Readonly

A WebFrame | null representing the first child frame of webFrame, the property would be null if webFrame has no children or if first child is not in the current renderer process.一个WebFrame | null表示webFrame的第一个子帧,如果webFrame没有子帧或第一个子帧不在当前渲染器进程中,则该属性将为null

webFrame.nextSibling Readonly

A WebFrame | null representing next sibling frame, the property would be null if webFrame is the last frame in its parent or if the next sibling is not in the current renderer process.一个webFrame|null表示下一个同级帧,如果webFrame是其父帧中的最后一个帧,或者下一个同类帧不在当前渲染器进程中,则该属性将为null

webFrame.routingId Readonly

An Integer representing the unique frame id in the current renderer process. 一个Integer,表示当前渲染器进程中唯一的帧id。Distinct WebFrame instances that refer to the same underlying frame will have the same routingId.引用相同基础框架的不同WebFrame实例将具有相同的routingId