首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一文搞懂Electron的四种视图容器和它们之间的IPC通信机制

对于更复杂的项目,如果需要在窗口内部嵌入第三方业务的页面,则有BrowserView、webView Tag和Iframe三种方案可供选择。...原理上来说,创建一个BrowserView相当于在Chrome浏览器里增加一个Tab。一个窗口可以内嵌多个BrowserView,创建时可以指定相对宿主窗口的偏移坐标。...在需要给业务窗口嵌入第三方子页面的时候,使用BrowserView可以保证子页面的独立性,避免影响到宿主页面的运行。...BrowserView和主进程通信因为BrowserView有独立的webcontents,并且可以挂载proload脚本,所以它在ipc通信层面的地位和BrowserWindow完全一样,我们可以通过同样的方式...不同的BrowserView之间也可以通过sendTo来互相通信。2. BrowserView和宿主页面通信正因为BrowserView的上下文是完全独立的,所以无法直接和宿主页面互通。

10K75
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浅谈electron

    一个 Electron 应用有且只有一个主进程。并且创建窗口等所有系统事件都要在主进程中进行。...使用Electron的API Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序, 在主进程和渲染进程中,可以通过require() 方法将其包含在模块中,以此获取 Electron...引入 electron: const electron = require('electron'); 所有 Electron 的 API 都被指派给一种进程类型。...Electron 中的窗口是使用 BrowserWindow 类型创建的一个实例, 它只能在主进程中使用,如下所示: const { BrowserWindow } = require('electron...这个帮助函数可以使你获得指向系统目录的文件路径,如用户的桌面、系统临时文件 等等 electron - vue https://simulatedgreg.gitbooks.io/electron-vue

    2.2K20

    Electron 介绍

    # 快速入门 本指南将会通过使用Electron创建一个极简的 Hello World 应用一步步的带你了解,该应用与electron/electron-quick-start (opens new...npm Yarn mkdir my-electron-app && cd my-electron-app yarn init init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的,有几条规则需要遵循...npm Yarn yarn add --dev electron 注意:如果您在安装 Electron 时遇到任何问题,请 参见 高级安装 (opens new window) 指南。...command 注意:此脚本将告诉 Electron 在您项目根目录运行 此时,您的应用将立即抛出一个错误提示您它无法找到要运行的应用 # 运行主进程 任何 Electron 应用程序的入口都是 main...electron -g 使用cnpm安装electron-packager cnpm install electron-packager -g

    2.4K10

    Web 嵌入 | Electron 安全

    "> Electron 是支持该语法的,在之前的 Electron 与你我息息相关的文章中其实就已经介绍了这个熟悉实现 RCE 等利用的内容 这里面的 JavaScript...考虑切换到其他选择,如 iframe 和ElectronBrowserView,或避免嵌入式内容 设计的架构。...30.0 中添加,用来废弃并替换 BrowserView,它们是主进程模块,也就是说比 webview 更高级一层,不是渲染进程的一部分,而是由主进程直接进行管理 WebContentsView 可以加载一个页面...小结 从 Electron 30.0 开始 WebContentsView 替换了 BrowserView ,配合 BaseWindow 可以有效进行集成管理,WebContentsView 创建实例对象时...主进程中管理的模块,从 Electron 30.0 开始,它替代了 BrowserView ,与 BaseWindow 组合,达到 web 嵌入的效果 WebContentsView 创建实例对象时,

    69110

    uniCloud+uni-admin+electron实现 electron应用更新

    uniCloud+uni-admin+electron实现 electron应用更新 搭建视频地址 https://www.bilibili.com/video/BV1u3411p7Qd?...spm_id_from=333.999.0.0 从 https://gitee.com/dmhsq/react-ts-vite-electron 的仓库代码开始搭建 两种更新方式 1.资源替换 (还可以更换成其它框架开发打包的...关闭应用时 替换资源包 再次打开为新的 安装包模式 为下载安装包并弹出资源管理器标记安装包 资源替换效果如下 原本react-ts开发的我们替换成了 vue开发的 其实只是替换了asar资源包 可以用 纯electron...项目 无论你用的什么框架开发的electron的web业务 都可以使用 只和 package.json和electron node 相关 以我的项目为示例 checkVersion.js和 main.js...'); const path = require('path'); const isDev = require('electron-is-dev'); const { checkVersion, getFile

    1.6K50
    领券