Electron BrowserView 的使用
官方文档:
https://www.electronjs.org/docs/api/browser-view
创建和控制视图
进程:主进程
BrowserView
被用来让 BrowserWindow
嵌入更多的 web 内容。 它就像一个子窗口,除了它的位置是相对于父窗口。 这意味着可以替代webview
标签.
示例
// 在主进程中.
const { BrowserView, BrowserWindow } = require('electron')
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')
例:嵌入百度
在主线程中
//为了管理应用程序的生命周期事件以及创建和控制浏览器窗口,您从 electron 包导入了 app 和 BrowserWindow 模块 。
const { app, BrowserWindow,BrowserView } = require('electron')
//在此之后,你定义了一个创建 新的浏览窗口的函数并将 nodeIntegration 设置为 true,将 index.html 文件加载到窗口中(第 12 行,稍后我们将讨论该文件)
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
})
win.loadFile('index.html')
//创建对象
const view = new BrowserView()
//设置到主窗口
win.setBrowserView(view)
//设置在主窗口的位置和view的大小
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('http://www.baidu.com')
}
//你通过调用 createWindow方法,在 electron app 第一次被初始化时创建了一个新的窗口。
app.whenReady().then(createWindow)
//您添加了一个新的侦听器,当应用程序不再有任何打开窗口时试图退出。 由于操作系统的 窗口管理行为 ,此监听器在 macOS 上是禁止操作的
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
//您添加一个新的侦听器,只有当应用程序激活后没有可见窗口时,才能创建新的浏览器窗口。 例如,在首次启动应用程序后或重启运行中的应用程序
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
效果
new BrowserView([可选\])
实验功能
-
options
Object (可选)
webPreferences
Object (可选) - 详情请看 BrowserWindow.
实例属性
使用 new BrowserView
创建的对象具有以下属性:
view.webContents
实验功能
视图的WebContents
对象
实例方法
使用 new BrowserView
创建的对象具有以下实例方法:
view.setAutoResize(options)
实验功能
-
选项
对象
width
Boolean (optional) - Iftrue
, the view's width will grow and shrink together with the window. 默认值为false
height
Boolean (optional) - Iftrue
, the view's height will grow and shrink together with the window. 默认值为false
horizontal
Boolean (optional) - Iftrue
, the view's x position and width will grow and shrink proportionally with the window. 默认值为false
vertical
Boolean (optional) - Iftrue
, the view's y position and height will grow and shrink proportionally with the window. 默认值为false
view.setBounds(bounds)
实验功能
bounds
Rectangle
调整视图的大小,并将它移动到窗口边界
view.getBounds()
实验功能
返回 Rectangle
The bounds
of this BrowserView instance as Object
.
view.setBackgroundColor(color)
实验功能
color
String - Color in#aarrggbb
or#argb
form. The alpha channel is optional.
本文作者:makalo
本文链接:https://www.cnblogs.com/makalochen/p/14371495.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
分类:
node Electron
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用