Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总
Electron 嵌入的页面中注入的是 preload.js
通过在标签中给 prelaod赋值,这里提到了 file://前缀,以及静态目录 static 怎么获取

实际代码,其中__static就是我们存放静态文件的地方,这个 static 是 electron 源代码根目录下的文件,最终打完包后会放在 dist/electron/ 根目录下

而__static 是在index.html 中进行赋值的
这里看,因为渲染进程会直接启动 index.html 这个文件,同时渲染进程又能调用 node.js 库,因此这里拿到的__static就是安装目录下的 static,因为这个 static 在asar压缩包里,所以这里就必须使用 file://{__static},否则读不到asar 的虚拟目录路径

ChatGPT 虚拟目录概念:asar 可以进行解压,具体执行命令即可,后面详细研究后,再发文章
虚拟目录是一种将文件和文件夹组织成虚拟结构的方式,这些文件和文件夹在物理存储介质上(如硬盘)可能并不按照实际目录结构存储。在计算机科学和软件开发中,虚拟目录的概念是指一种将文件或数据组织成层次结构,使其看起来像是存储在目录结构中,但实际上可以是物理存储介质上的一个单一文件或数据库。在 Electron 中,asar 存档就是一种虚拟目录的实现方式。asar 存档将应用程序的文件和文件夹组织成虚拟目录结构,这些文件和文件夹存储在一个单一的存档文件中,而不是以普通的文件和目录的形式存在于文件系统中。这种虚拟目录结构的优点是:减小应用程序的体积:asar 存档允许将所有文件打包成一个文件,减小了应用程序的体积,使得分发和部署更加方便。加速文件访问:由于文件被打包成一个存档文件,文件的加载速度更快,因为它们可以被一次性加载到内存中,而不需要多次访问物理存储介质。组织和保护文件:asar 存档允许将文件和文件夹组织成有层次结构的虚拟目录,这有助于更好地组织和保护应用程序的文件。虚拟目录的概念使得开发者能够以更灵活的方式管理文件和数据,同时提高应用程序的性能和可维护性。在 Electron 中,asar 存档用于将应用程序文件组织成虚拟目录结构,以提高应用程序的性能和效率。
webview 与被嵌入的渲染进程通信
preload.js 就像插件的 content script 与网页的原生的环境还是隔离的,两个环境的变量互不影响,比如在 preload.js给 window 追加一个函数A,在原生网页中window.A 是 undefined,所以 preload.js 是沙盒环境。
但 preload.js(被注入网页中)中可以与其嵌入的 webview 容器进行通信,具体就是监听 ipc-message,接收渲染进程的消息,同时 webview还能通过 webview.send('ping') 给preload.js环境发送消息,这样就实现了 webview 容器中的网页与 webview 之间的通信过程
// In embedder page.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {console.log(event.channel)// Prints "pong"
})
webview.send('ping')
preload.js 所在的页面叫 guest page(访客页)
// In guest page.
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {ipcRenderer.sendToHost('pong')
})
webview 容器内页面 与 preload.js 通信
如果在 guest page 中用 `webview.executeJavaScript(js代码)` 这样在 window.A下就可以访问到,但是两个环境之间有怎么进行通信呢?
参考插件的content script 和 inject 的通信方式:
1. 一是通过 window.postMessage 和 window.addEventListener("message", callback),这一种要把所有的事件都在一个 message 函数中处理,比较麻烦,如果不使用反射机制,就会将代码写得很长,有很多 if 判断;
2. 二是通过事件 window.dispatchEvent(new CustomEvent('INJECT_READY')) 和 window.addEventListener("INJECT_READY", callback) 这种方式就好一些,可以将监听事件封装成具体的函数,引入处理,代码比较隔离
3. electron 还给出了一种可以直接从 preload.js暴露函数给 window 的方式,这种非常方便:

通过这样进行调用
await window.electron.getAttachment(local_path, attachment.oss_path)
webview 和主进程通信
1. 借助被嵌入的渲染进程与主进程通信,这个就不细说了。
// 主进程代码
ipcMain.on("win-auto-update", (event, arg) => {})// 渲染进程代码
ipcRenderer.send("win-auto-update")// 渲染进程与渲染进程通信
ipcRenderer.sendTo(wid, "win-auto-update", {...})// 渲染进程监听消息
ipcRenderer.on("win-auto-update", (event, args) => {})// event 对象中能够获得消息的来源是从哪个渲染进程发过来的
解决一切苦厄的终极通信
1. 在主进程中启动 Websocket 、Http 服务,Http 服务可以帮助用来从主进程访问本地数据库,Websocket 可以用来直接接收 webview preload 还是executeJavaScript,都可以通过 websocket 客户端直连主进程,主进程收到后,可以进行转发操作,过程中可以使用 Promise实现 await wsRequest 方式。这样整个链路就缩短为只需要直连任何一个进程的概念,就不用转来转去了,同时还能用 await 保证逻辑执行顺序,不因为通信延时无法控制 UI 表现层问题。
具体我后面整理OK 后,再发一个代码 Demo 吧,有提前需要的也可以私信我。
相关文章:
Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总
Electron 嵌入的页面中注入的是 preload.js 通过在标签中给 prelaod赋值,这里提到了 file://前缀,以及静态目录 static 怎么获取 实际代码,其中__static就是我们存放静态文件的地方,这个 static 是 electron 源代码根目录下的文件…...
AI人工训练师,提升外呼机器人的运营效果
外呼机器人是企业客服和营销的重要工具,外呼机器人可以通过语音识别和语音合成技术,自动拨打电话并进行客户服务和营销推广等工作。由于外呼机器人错误识别和理解偏差容易影响外呼效果,许多外呼机器人厂商选择通过AI人工训练师的技术手段来提…...
nginx正向代理、反向代理、负载均衡(重中之重)
nginx中有两种代理方式: 七层代理(http协议) 四层代理(基于tcp或udp的流量转发) 一、七层代理 原理:客户端请求代理服务器,由代理服务器转发客户端的http请求,转发到内部的服务器…...
MySQl_2
目录 函数 一.字符串函数 二.数值函数 三.日期函数 四.流程控制函数 约束 多表查询 多表关系 一.内连接 二.外连接 三.自连接 四.联合查询 五.子查询 标量子查询 列子查询 行子查询 表子查询 函数 一.字符串函数 二.数值函数 SELECT LPAD(FLOOR(RAND()*1000000),…...
使用Filter AND Interceptor校验等录(全网独一份,机不可失)
说明:基于spring boot进行的校验 1.熟悉如何使用jwt令牌。(不会的看这里:带你领略JWTl令牌的魅力!!!-CSDN博客) Filter和Interceptor共用文件:(可以仿照,根据…...
ubuntu20.04安装FTP服务
安装 sudo apt-get install vsftpd# 设置开机启动并启动ftp服务 systemctl enable vsftpd systemctl start vsftpd#查看其运行状态 systemctl status vsftpd #重启服务 systemctl restart vsftpdftp用户 sudo useradd -d /home/ftp/ftptest -m ftptest sudo passwd ftptest…...
MyBatisPlus(二十)防全表更新与删除
说明 针对 update 和 delete 语句,阻止恶意的全表更新和全表删除。 实现方式 配置BlockAttackInnerInterceptor拦截器 代码 package com.example.core.config;import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.p…...
14.9 Socket 高效文件传输
网络上的文件传输功能也是很有必要实现一下的,网络传输文件的过程通常分为客户端和服务器端两部分。客户端可以选择上传或下载文件,将文件分块并逐块发送到服务器,或者从服务器分块地接收文件。服务器端接收来自客户端的请求,根据…...
第二节 threejs简单案例
1. 创建3D场景 // 创建3D场景对象Scene const scene new THREE.Scene();// 更改场景背景颜色 scene.background new THREE.Color(#F5F5F5);2. 创建透视投影相机 // 实例化一个透视投影相机对象 const camera new THREE.PerspectiveCamera();相机位置 // 根据需要设置相机…...
PowerShell批量修改DNS域名解析
批量添加DNS A记录 $dnsServerName"" # DNS服务器的服务器名称,如果是在DNS服务器本机执行则可留空 $containerName"test.com" # 域名的后缀也就是DNS Zone Name $mydns[WMIClass]"ROOT\MicrosoftDNS:MicrosoftDNS_resourceRecord"…...
uniapp(uncloud) 使用生态开发接口详情3(新增产品分类,产品列表,新闻列表)
我的想法是有产品分类,产品列表,新闻咨询,新闻列表 项目中, uniCloud > database 目录下新建 sy_product_nav.schema.json // 代码如下 {"bsonType": "object","required": ["classname"],"permission": {"read&…...
XTU-OJ 1339-Interprime
题目描述 n是两个连续的奇素数的平均值,且n不是素数,那么我们称这样的数是"内部素数"。求区间[a,b]内"内部素数"的个数。比如,前5个"内部素数"是4,6,9,12,15。 输入 第一行是样例数T(1≤T≤1000)。 每个样例一…...
FPGA中的LUT查找表工作原理。
在RAM中填入1110,后续的不同AB组合选通对应RAM,Y输出对应RAM存储的值,实现上面逻辑表达式的功能。...
Python爬虫:制作一个属于自己的IP代理模块
前言 在Python爬虫过程中,为了避免被网站的反爬虫机制干扰,我们需要使用IP代理。所谓IP代理,就是通过修改网络请求中的IP地址,来达到隐藏真实IP地址的效果。本文将教你如何制作一个自己的IP代理模块,让你的爬虫更加稳…...
解决QT中文乱码
选中文本带有中文字符的文件,然后按如下点击 弹出对话框,选择当前操作系统的编码格式,选择Save with Encoding 中文字符前用u8进行标识...
GPIO基本原理
名词解释 高低电平:GPIO引脚电平范围:0V~3.3V(部分引脚可容忍5V)数据0就是0V,代表低电平;数据1就是3.3V,代表高电平; STM32是32位的单片机,所以内部寄存器也都是32位的…...
算法通过村第十五关-超大规模|青铜笔记|海量找数
文章目录 前言用4KB内存寻找重复数总结 前言 提示:并不是所有黑暗的地方,都需要光明。 --珍妮特温特森《句子不是唯一的水果》 在大部分算法中,默认给点给的数据量都是很小的,例如只有几个或者十几个元素,但是如果遇到…...
TCP、IP和HTTP的区别和联系
TCP(Transmission Control Protocol) TCP是一种面向连接的协议,负责数据的可靠性传输。它提供了错误检测和纠正、数据分段和重新组装、流量控制和拥塞控制等功能,最终确保数据可靠滴从一个端点传输到另一个端点。 TCP建立连接、传…...
【4】c++11新特性(稳定性和兼容性)—>final关键字
c中增加了final关键字来限制某个类不能被继承,或者某个虚函数不能被重写。如果使用final修饰函数,只能修饰虚函数,并且放在类或者函数的后面。 修饰函数 #include <iostream> using namespace std;class Base { public:virtual void t…...
23基于MATLAB的小波降噪,默认阈值消噪,强制消噪,给定软阈值消噪方法,数据直接替换后就可以跑。
基于MATLAB的小波降噪,默认阈值消噪,强制消噪,给定软阈值消噪方法,数据直接替换后就可以跑。 https://www.xiaohongshu.com/explore/652d57c600000...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
