跳到主要内容

BrowserView

历史

注意 BrowserView 类已弃用,并被新的 WebContentsView 类替换。

BrowserView 可用于将额外的网页内容嵌入到 BrowserWindow 中。它就像一个子窗口,只是它相对于其拥有窗口的位置。它旨在作为 webview 标签的替代方案。

类: BrowserView

历史

创建和控制视图。

注意 BrowserView 类已弃用,并被新的 WebContentsView 类替换。

进程:

app 模块的 ready 事件发出之前,无法使用此模块。

示例

// In the main process.
const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600 })

const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://www.electron.js.cn')
})

new BrowserView([options]) 实验性 已弃用

历史
  • options 对象 (可选)
    • webPreferences WebPreferences (可选) - 网页功能设置。
      • devTools 布尔值 (可选) - 是否启用开发者工具。如果设置为 false,则无法使用 BrowserWindow.webContents.openDevTools() 打开开发者工具。默认值为 true
      • nodeIntegration 布尔值 (可选) - 是否启用 Node 集成。默认值为 false
      • nodeIntegrationInWorker 布尔值 (可选) - 是否在 Web 工作线程中启用 Node 集成。默认值为 false。有关更多信息,请参见 多线程
      • nodeIntegrationInSubFrames 布尔值 (可选) - 用于在子框架(如 iframe 和子窗口)中启用 Node.js 支持的实验性选项。所有预加载脚本都将为每个 iframe 加载,可以使用 process.isMainFrame 确定当前是在主框架还是子框架中。
      • preload 字符串 (可选) - 指定在页面中运行其他脚本之前加载的脚本。无论 Node 集成是否启用,此脚本始终可以访问 Node API。该值应该是脚本的绝对文件路径。当 Node 集成关闭时,预加载脚本可以将 Node 全局符号重新引入全局作用域。请参见示例 此处
      • sandbox 布尔值 (可选) - 如果设置,将对与窗口关联的渲染器进行沙盒化,使其与 Chromium OS 级沙盒兼容,并禁用 Node.js 引擎。这与 nodeIntegration 选项不同,预加载脚本可用的 API 更加有限。详细了解此选项,请参见 此处
      • session Session (可选) - 设置页面使用的会话。除了直接传递 Session 对象外,也可以选择使用 partition 选项,它接受一个分区字符串。当同时提供 sessionpartition 时,将优先使用 session。默认值为默认会话。
      • partition 字符串 (可选) - 根据会话的分区字符串设置页面使用的会话。如果 partitionpersist: 开头,页面将使用一个持久性会话,该会话可供应用程序中使用相同 partition 的所有页面访问。如果没有 persist: 前缀,页面将使用一个内存中的会话。通过分配相同的 partition,多个页面可以共享相同的会话。默认值为默认会话。
      • zoomFactor 数字 (可选) - 页面的默认缩放系数,3.0 表示 300%。默认值为 1.0
      • javascript 布尔值 (可选) - 启用 JavaScript 支持。默认值为 true
      • webSecurity 布尔值 (可选) - 当为 false 时,将禁用同源策略(通常用于测试网站),如果用户未设置此选项,则会将 allowRunningInsecureContent 设置为 true。默认值为 true
      • allowRunningInsecureContent 布尔值 (可选) - 允许 https 页面运行来自 http URL 的 JavaScript、CSS 或插件。默认值为 false
      • images 布尔值 (可选) - 启用图像支持。默认值为 true
      • imageAnimationPolicy 字符串 (可选) - 指定如何运行图像动画(例如 GIF)。可以是 animateanimateOncenoAnimation。默认值为 animate
      • textAreasAreResizable 布尔值 (可选) - 使 TextArea 元素可调整大小。默认值为 true
      • webgl 布尔值 (可选) - 启用 WebGL 支持。默认值为 true
      • plugins 布尔值 (可选) - 是否应启用插件。默认值为 false
      • experimentalFeatures 布尔值 (可选) - 启用 Chromium 的实验性功能。默认值为 false
      • scrollBounce 布尔值 (可选) macOS - 在 macOS 上启用滚动反弹(橡皮筋效果)。默认值为 false
      • enableBlinkFeatures 字符串 (可选) - 以 , 分隔的功能字符串列表,例如 CSSVariables,KeyboardEventKey。支持的功能字符串的完整列表可以在 RuntimeEnabledFeatures.json5 文件中找到。
      • disableBlinkFeatures 字符串 (可选) - 以 , 分隔的功能字符串列表,例如 CSSVariables,KeyboardEventKey。支持的功能字符串的完整列表可以在 RuntimeEnabledFeatures.json5 文件中找到。
      • defaultFontFamily 对象 (可选) - 设置字体家族的默认字体。
        • standard 字符串 (可选) - 默认值为 Times New Roman
        • serif 字符串 (可选) - 默认值为 Times New Roman
        • sansSerif 字符串 (可选) - 默认值为 Arial
        • monospace 字符串 (可选) - 默认值为 Courier New
        • cursive 字符串 (可选) - 默认值为 Script
        • fantasy 字符串 (可选) - 默认值为 Impact
        • math 字符串 (可选) - 默认值为 Latin Modern Math
      • defaultFontSize 整数 (可选) - 默认值为 16
      • defaultMonospaceFontSize 整数 (可选) - 默认值为 13
      • minimumFontSize 整数 (可选) - 默认值为 0
      • defaultEncoding 字符串 (可选) - 默认值为 ISO-8859-1
      • backgroundThrottling 布尔值 (可选) - 页面转为后台时,是否应抑制动画和计时器。这也会影响 页面可见性 API。当单个 browserWindow 中显示的至少一个 webContents 禁用了 backgroundThrottling 时,将为整个窗口和其他 webContents 绘制并交换帧。默认值为 true
      • offscreen 布尔值 (可选) - 是否应为浏览器窗口启用离屏渲染。默认值为 false。有关更多详细信息,请参见 离屏渲染教程
      • contextIsolation 布尔值 (可选) - 是否应在单独的 JavaScript 上下文中运行 Electron API 和指定的 preload 脚本。默认值为 truepreload 脚本运行的上下文将只能访问其自己的专用 documentwindow 全局变量,以及其自己的 JavaScript 内建函数集(ArrayObjectJSON 等),这些都是对已加载内容不可见的。Electron API 将仅在 preload 脚本中可用,而不在已加载的页面中可用。加载可能不可信的远程内容时,应使用此选项以确保已加载的内容无法篡改 preload 脚本和正在使用的任何 Electron API。此选项使用与 Chrome 内容脚本 相同的技术。通过在“控制台”选项卡顶部的组合框中选择“Electron Isolated Context”条目,可以在开发者工具中访问此上下文。
      • webviewTag 布尔值 (可选) - 是否启用 <webview> 标签。默认值为 false注意:<webview> 配置的 preload 脚本将在执行时启用 Node 集成,因此应确保远程/不可信的内容无法使用可能存在恶意 preload 脚本的 <webview> 标签。可以使用 webContents 上的 will-attach-webview 事件来去除 preload 脚本并验证或修改 <webview> 的初始设置。
      • additionalArguments 字符串数组 (可选) - 将追加到应用程序渲染器进程的 process.argv 中的字符串列表。对于将少量数据传递到渲染器进程预加载脚本很有用。
      • safeDialogs 布尔值 (可选) - 是否启用浏览器样式的连续对话框保护。默认值为 false
      • safeDialogsMessage 字符串 (可选) - 触发连续对话框保护时显示的消息。如果未定义,将使用默认消息,请注意,当前默认消息为英文,没有本地化。
      • disableDialogs 布尔值 (可选) - 是否应完全禁用对话框。覆盖 safeDialogs。默认值为 false
      • navigateOnDragDrop 布尔值 (可选) - 将文件或链接拖放到页面上是否会导致导航。默认值为 false
      • autoplayPolicy 字符串(可选) - 应用于窗口中内容的自动播放策略,可以是 no-user-gesture-requireduser-gesture-requireddocument-user-activation-required。默认值为 no-user-gesture-required
      • disableHtmlFullscreenWindowResize 布尔值(可选) - 是否阻止窗口在进入 HTML 全屏时调整大小。默认值为 false
      • accessibleTitle 字符串(可选) - 仅提供给辅助工具(如屏幕阅读器)的替代标题字符串。此字符串对用户不可见。
      • spellcheck 布尔值(可选) - 是否启用内置拼写检查器。默认值为 true
      • enableWebSQL 布尔值(可选) - 是否启用 WebSQL API。默认值为 true
      • v8CacheOptions 字符串(可选) - 强制 blink 使用的 v8 代码缓存策略。接受的值是
        • none - 禁用代码缓存
        • code - 基于启发式的代码缓存
        • bypassHeatCheck - 绕过代码缓存启发式,但使用延迟编译
        • bypassHeatCheckAndEagerCompile - 与上面相同,但编译是立即的。默认策略是 code
      • enablePreferredSizeMode 布尔值(可选) - 是否启用首选大小模式。首选大小是包含文档布局所需的最小子大小,无需滚动。启用此选项将导致在 WebContents 上发出 preferred-size-changed 事件,以指示首选大小发生变化。默认值为 false
      • transparent 布尔值(可选) - 是否为访客页面启用背景透明度。默认值为 true注意:访客页面的文本和背景颜色源自其根元素的 颜色方案。当启用透明度时,文本颜色将仍然相应地更改,但背景将保持透明。

实例属性

使用 new BrowserView 创建的对象具有以下属性

view.webContents 实验性 已弃用

历史

此视图拥有的 WebContents 对象。

实例方法

使用 new BrowserView 创建的对象具有以下实例方法

view.setAutoResize(options) 实验性 已弃用

历史
  • options 对象
    • width 布尔值(可选) - 如果为 true,视图的宽度将与窗口一起增长和缩小。默认值为 false
    • height 布尔值(可选) - 如果为 true,视图的高度将与窗口一起增长和缩小。默认值为 false
    • horizontal 布尔值(可选) - 如果为 true,视图的 x 位置和宽度将与窗口成比例地增长和缩小。默认值为 false
    • vertical 布尔值(可选) - 如果为 true,视图的 y 位置和高度将与窗口成比例地增长和缩小。默认值为 false

view.setBounds(bounds) 实验性 已弃用

历史

将视图调整大小并移动到相对于窗口的指定边界。

view.getBounds() 实验性 已弃用

历史

返回 矩形

此 BrowserView 实例的 bounds 作为 Object

view.setBackgroundColor(color) 实验性 已弃用

历史
  • color 字符串 - 十六进制、RGB、ARGB、HSL、HSLA 或命名 CSS 颜色格式的颜色。对于十六进制类型,alpha 通道是可选的。

有效 color 值的示例

  • 十六进制
    • #fff(RGB)
    • #ffff(ARGB)
    • #ffffff(RRGGBB)
    • #ffffffff(AARRGGBB)
  • RGB
    • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
      • 例如 rgb(255, 255, 255)
  • RGBA
    • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
      • 例如 rgba(255, 255, 255, 1.0)
  • HSL
    • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
      • 例如 hsl(200, 20%, 50%)
  • HSLA
    • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
      • 例如 hsla(200, 20%, 50%, 0.5)
  • 颜色名称
    • 选项列在 SkParseColor.cpp 中。
    • 类似于 CSS 颜色模块级别 3 关键字,但区分大小写。
      • 例如 bluevioletred

注意:带有 alpha 的十六进制格式采用 AARRGGBBARGB而不是 RRGGBBAARGB