BrowserView

BrowserView 被用来让 BrowserWindow 嵌入更多的 web 内容。它就像一个子窗口，除了它的位置是相对于父窗口。这意味着可以替代webview标签.

类: BrowserView

创建和控制视图

在 app 模块 emitted ready 事件之前，您不能使用此模块。

示例

// 在主进程中.
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://electronjs.org')
})

`new BrowserView([可选])` 实验功能

options Object (可选)
- webPreferences WebPreferences (optional) - Settings of web page’s features.
  - devTools boolean (可选) - 是否开启 DevTools. 如果设置为 false, 则无法使用 BrowserWindow.webContents.openDevTools () 打开 DevTools。默认值为 true。
  - nodeIntegration boolean (可选) - 是否启用Node integration. 默认值为 false.
  - nodeIntegrationInWorker boolean (可选) - 是否在Web工作器中启用了Node集成. 默认值为 false. 更多内容参见多线程.
  - nodeIntegrationInSubFrames boolean (可选项)(实验性)，是否允许在子页面(iframe)或子窗口(child window)中集成Node.js；预先加载的脚本会被注入到每一个iframe，你可以用 process.isMainFrame 来判断当前是否处于主框架（main frame）中。
  - preload string (可选) -在页面运行其他脚本之前预先加载指定的脚本无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。当 node integration 关闭时, 预加载的脚本将从全局范围重新引入node的全局引用标志参考示例.
  - sandbox boolean (可选)-如果设置该参数, 沙箱的渲染器将与窗口关联, 使它与Chromium OS-level 的沙箱兼容, 并禁用 Node. js 引擎。它与 nodeIntegration 的选项不同，且预加载脚本的 API 也有限制. 更多详情.
  - session Session (可选) - 设置页面的 session 而不是直接忽略 Session 对象, 也可用 partition 选项来代替，它接受一个 partition 字符串. 同时设置了session 和 partition时, session 的优先级更高. 默认使用默认的 session.
  - partition string (optional) - 通过 session 的 partition 字符串来设置界面session. 如果 partition 以 persist:开头, 该页面将使用持续的 session，并在所有页面生效，且使用同一个partition. 如果没有 persist: 前缀, 页面将使用 in-memory session. 通过分配相同的 partition, 多个页可以共享同一会话。默认使用默认的 session.
  - zoomFactor number (可选) - 页面的默认缩放系数, 3.0 表示 300%。默认值为 1.0.
  - javascript boolean (可选) - 是否启用 JavaScript 支持。默认值为 true。
  - webSecurity boolean (可选) - 当设置为 false, 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的，还会把 allowRunningInsecureContent设置为 true. 默认值为 true。
  - allowRunningInsecureContent boolean (可选) - 允许一个 https 页面运行来自http url的JavaScript, CSS 或 plugins。默认值为 false.
  - images boolean (可选) - 允许加载图片。默认值为 true。
  - imageAnimationPolicy string (可选) - 指定如何运行图像动画 (比如： GIF等). 可以是 animate, animateOnce 或 noAnimation. 默认值为 animate.
  - textAreasAreResizable boolean (可选) - 允许调整 TextArea 元素大小。默认值为 true。
  - webgl boolean (可选) - 启用 WebGL 支持。默认值为 true。
  - plugins boolean (可选) - 是否应该启用插件。默认值为 false.
  - experimentalFeatures boolean (可选) - 启用 Chromium 的实验功能。默认值为 false.
  - scrollBounce boolean (可选) macOS - 启用滚动回弹（橡皮筋）效果。默认值为 false.
  - enableBlinkFeaturesstring(可选) - 以逗号分隔的需要启用的特性列表，譬如CSSVariables,KeyboardEventKey 在 RuntimeEnabledFeatures.json5文件中查看被支持的所有特性.
  - disableBlinkFeatures string (可选) - 以 ,分隔的禁用特性列表, 如 CSSVariables,KeyboardEventKey. 在RuntimeEnabledFeatures.json5 文件中查看被支持的所有特性.
  - defaultFontFamily Object (可选) - 为font-family设置默认字体。
    - standard string (可选) - 默认值为 Times New Roman.
    - serif string (可选) - 默认值为 Times New Roman.
    - sansSerif string (可选) - 默认值为 Arial.
    - monospace string (可选) - 默认值为 Courier New.
    - cursive string (可选) - 默认值为 Script.
    - fantasy string (可选) - 默认值为 Impact.
    - math string (optional) - Defaults to Latin Modern Math.
  - defaultFontSize Integer (可选) - 默认值为 16.
  - defaultMonospaceFontSize Integer (可选) - 默认值为 13.
  - minimumFontSize Integer (可选) - 默认值为 0.
  - defaultEncoding string (可选) - 默认值为 ISO-8859-1.
  - backgroundThrottlingboolean (可选)-是否在页面成为背景时限制动画和计时器。这也会影响到 Page Visibility API. 默认值为 true。
  - offscreen boolean (optional) - 是否绘制和渲染可视区域外的窗口. 默认值为 false. 更多详情, 请参见 offscreen rendering tutorial。
  - contextIsolation boolean (可选) - 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true。 预加载脚本所运行的上下文环境只能访问其自身专用的文档和全局窗口，其自身一系列内置的JavaScript (Array, Object, JSON, 等等) 也是如此，这些对于已加载的内容都是不可见的。 Electron API 将只在预加载脚本中可用，在已加载页面中不可用。这个选项应被用于加载可能不被信任的远程内容时来确保加载的内容无法篡改预加载脚本和任何正在使用的Electron api。该选项使用的是与Chrome内容脚本相同的技术。你可以在开发者工具Console选项卡内顶部组合框中选择 ‘Electron Isolated Context’条目来访问这个上下文。
  - webviewTag boolean (可选) - 是否启用 tag标签. 默认值为 false. 注意: 为 < webview> 配置的 preload 脚本在执行时将启用节点集成, 因此应确保远程或不受信任的内容无法创建恶意的 preload 脚本。可以使用 webContents 上的 will-attach-webview 事件对 preload 脚本进行剥离, 并验证或更改 <webview> 的初始设置。
  - additionalArguments string[] (可选) - 一个将被附加到当前应用程序的渲染器进程中process.argv的字符串列表。可用于将少量的数据传递到渲染器进程预加载脚本中。
  - safeDialogs boolean (可选) - 是否启用浏览器样式的持续对话框保护。默认值为 false.
  - safeDialogsMessage string (可选) - 当持续对话框保护被触发时显示的消息。如果没有定义，那么将使用缺省的消息。注意：当前缺省消息是英文，并没有本地化。
  - disableDialogs boolean (可选) - 是否完全禁用对话框。覆盖 safeDialogs。默认值为 false.
  - navigateOnDragDrop boolean (可选) - 将文件或链接拖放到页面上时是否触发页面跳转。默认值为 false.
  - autoplayPolicy string (可选) - 窗口中内容要使用的自动播放策略，值可以是 no-user-gesture-required, user-gesture-required, document-user-activation-required。默认为 no-user-gesture-required。
  - disableHtmlFullscreenWindowResize boolean (可选) - 是否阻止窗口在进入 HTML 全屏时调整大小。默认值为 false.
  - accessibleTitle string (可选) - 仅提供给如屏幕读取器等辅助工具的替代标题字符串。此字符串不直接对用户可见。
  - spellcheck boolean (可选) - 是否启用内置拼写检查器。默认值为 true。
  - enableWebSQL boolean (可选) - 是否启用 WebSQL api。默认值为 true。
  - v8CacheOptions string (可选) - 强制 blink 使用 v8 代码缓存策略。可接受的值为：
    - none - 禁用代码缓存
    - code - 基于启发式代码缓存
    - bypassHeatCheck - 绕过启发式代码缓存，但使用懒编译。
    - bypassHeatCheckAndEagerCompile - 与上面相同，除了编译是及时的。默认策略是 code。
  - enablePreferredSizeMode boolean (可选) - 是否启用首选大小模式。首选大小是包含文档布局所需的最小大小—无需滚动。启用该属性将导致在首选大小发生变化时，在WebContents 上触发 preferred-size-changed 事件。默认值为 false.

实例属性

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

`view.webContents` 实验功能

视图的WebContents 对象

实例方法

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

`view.setAutoResize(options)` 实验功能

选项 对象
- width boolean（可选） - 如果为true，视图宽度跟随窗口变化。默认值为 false
- height boolean(可选) - 如果 true，视图的高度将增长和缩小与窗口。默认值为 false
- horizontal boolean (可选) - 如果为 true，视图的x轴和宽度将随着窗口的大小变化等比例缩放。默认值为 false
- vertical boolean(可选) - 如果 true，视图的y位置和高度将增长和收缩比例与窗口。默认值为 false

`view.setBounds(bounds)` 实验功能

bounds Rectangle

调整视图的大小，并将它移动到窗口边界

`view.getBounds()` 实验功能

返回 Rectangle

此BrowserView实例的 bounds 为 Object。

`view.setBackgroundColor(color)` 实验功能

color string - 颜色为 Hex，RGB，ARGB，HSL，HSLA 或命名的CSS颜色的格式。 Hex 的透明通道为可选项。

例如这些有效的 color 值：

Hex
- fff (RGB)
- ffff (ARGB)
- ffffff (RRGGBB)
- ffffffff (AARRGGBB)
RGB
- rgb(([\d]+),\s([\d]+),\s([\d]+))
  - e.g. rgb(255, 255, 255)
RGBA
- rgba(([\d]+),\s([\d]+),\s([\d]+),\s*([\d.]+))
  - e.g. rgba(255, 255, 255, 1.0)
HSL
- hsl((-?[\d.]+),\s([\d.]+)%,\s([\d.]+)%)
  - e.g. hsl(200, 20%, 50%)
HSLA
- hsla((-?[\d.]+),\s([\d.]+)%,\s([\d.]+)%,\s*([\d.]+))
  - e.g. hsla(200, 20%, 50%, 0.5)
Color name
- 名称列表在 SkParseColor.cpp
- 类似 CSS Color Module Level 3 关键字，但大小写敏感。
  - 例如 blueviolet 或 red。

注意： Hex 格式带有透明通道需要 AARRGGBB 或 ARGB，不能是 RRGGBBA 或 RGA.

BrowserView

BrowserView

类: BrowserView

示例

new BrowserView([可选]) 实验功能

实例属性

view.webContents 实验功能

实例方法

view.setAutoResize(options) 实验功能

view.setBounds(bounds) 实验功能

view.getBounds() 实验功能

view.setBackgroundColor(color) 实验功能

fff (RGB)

ffff (ARGB)

ffffff (RRGGBB)

ffffffff (AARRGGBB)

`new BrowserView([可选])` 实验功能

`view.webContents` 实验功能

`view.setAutoResize(options)` 实验功能

`view.setBounds(bounds)` 实验功能

`view.getBounds()` 实验功能

`view.setBackgroundColor(color)` 实验功能