当前位置： 首页 > news >正文

【electron】webview嵌入页面发送消息给父级页面

news 文章来源：https://blog.csdn.net/mooonyuan/article/details/129057423 2025/1/31 20:59:32

场景需求：

  • 嵌入页面操作时，通知父级页面

涉及知识点：

  • contextBridge 嵌入页面可使用暴露的对象
  • ipc-message 监听嵌入页面发送的消息
  • webview preload 嵌入页面运行加载的脚本

问题（两种方式）

  1. 使用监听ipc-message需要在嵌入页面安装electron，需求不允许
  2. 使用contextBridge创建全局对象，无法接收消息

解决思路

contextBridge暴露ipcRenderer给嵌入页面使用，再用ipc-message监听收到的消息

父级页面

<webview v-if="webviewerUrl" ref="webviewRef" class="webview" src="D://child.html" allowp:preload="webViewerPreload()" nodeintegration plugins disablewebsecurity>
</webview>
<script lang="ts" setup>
const webviewRef = ref()
// 控制第三方页面操作栏
const initWebviewEvent= () => {webviewRef.value.addEventListener('dom-ready', () => {// webviewRef.value.openDevTools() //打开嵌入页面的控制台})// 在此监听事件中接收嵌入页面的消息webviewRef.value.addEventListener('ipc-message', function (event: any) {if (event.channel === 'closeWindow') {// 需要执行的代码}});
}
onMounted(() => {nextTick(() => {initWebviewEvent()})
})
onBeforeUnmount(() => {webviewRef.value.removeEventListener('dom-ready')webviewRef.value.removeEventListener('ipc-message')
})
</script>

preload引入本地文件(file:// 格式)

import path from 'path'
export const webViewerPreload = () => {if (process.env.NODE_ENV === 'production') {return path.join(__dirname, '/preload.js')} else {return path.resolve('./src/entries/webViewer/preload.js')}
}

preload.js 暴露ipcRenderer 到全局

const { contextBridge, ipcRenderer } = require('electron')
// 存储全局方法
contextBridge.exposeInMainWorld('electron', {ipcRenderer: ipcRenderer
})

嵌入页面 child.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>child</title>
</head>
<body><button onclick="closeWindow()">关闭窗口</button><script type="text/javascript">function closeWindow(){const ipcRenderer = window.electron.ipcRendereripcRenderer.sendToHost('closeWindow')}</script>
</body>
</html>

总结：两种方法看了很久都没法实现，后面突然想到可以结合起来，可以将嵌入页面的消息发送给父级，但是嵌入页面不能收消息，不知道怎么解决。

相关文章：

【electron】webview嵌入页面发送消息给父级页面

场景需求&#xff1a; 嵌入页面操作时&#xff0c;通知父级页面 涉及知识点&#xff1a; contextBridge 嵌入页面可使用暴露的对象ipc-message 监听嵌入页面发送的消息webview preload 嵌入页面运行加载的脚本 问题&#xff08;两种方式&#xff09; 使用监听ipc-message需…...

编程日记 2023/2/17 4:05:17

Whids：一款针对Windows操作系统的开源EDR

关于Whids Whids是一款针对Windows操作系统的开源EDR&#xff0c;该工具所实现的检测引擎基于先前的 Gene项目构建&#xff0c;并专门设计可以根据用户定义的规则匹配Windows事件。 功能特性 1、为社区提供一款功能强大且开源的Windows EDR&#xff1b; 2、支持检测规则透明化…...

编程日记 2023/2/17 4:04:10

初级调色转档CameraRaw

一级调色 还原-曝光-色彩-细节-质感 修图的范围 整体&#xff08;掌握基本面板&#xff09;——局部&#xff08;曲线&#xff09;——具象&#xff08;混色器&#xff09; 修片最开始的准备工作 看直方图:明暗跟色彩的数据表 分析图片是否存在以下问题&#xff1a; 1.曝光…...

编程日记 2023/2/17 4:03:02

Mybatis源码(3) - Executor执行过程 | 一级缓存 | 二级缓存

0. 前言&#xff1a;1. CachingExecutor#query&#xff1a;1.1. BoundSql&#xff1a;1.2. CacheKey&#xff1a;1.3. 二级缓存&#xff1a;1.4. 一级缓存&#xff1a;2. JDBC过程执行&#xff1a;3. 结果集处理&#xff1a;4. Mybatis的一级缓存、二级缓存区别&#xff1a;0. …...

编程日记 2023/2/17 4:01:55

成为 Seatunnel 源码贡献者保姆级教程

Apache SeaTunnel 是下一代高性能、分布式、海量数据集成平台&#xff0c;已经在 B 站、腾讯云等 100 家公司生产使用。目前处于 incubator 阶段。作为公司内部使用的 ETL 工具&#xff0c;Seatunnel 可以基于已有的 Spark、Flink 计算平台进行数据交换也可以运行在 k8s 平台上…...

编程日记 2023/2/17 4:00:51

MySQL的索引视图练习题

学生表&#xff1a;Student (Sno, Sname, Ssex , Sage, Sdept) 学号&#xff0c;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;所在系 Sno为主键 课程表&#xff1a;Course (Cno, Cname,) 课程号&#xff0c;课程名 Cno为主键 学生选课表&#xff1a;SC (Sno, Cno, Score)…...

编程日记 2023/2/17 3:59:44

【C++ Primer Plus】第四章：复合类型

文章目录4.1 数组C11数组初始化的方法4.2 字符串**cin是如何确定已完成字符串输入呢&#xff1f;****如何每次读取一行字符串输入&#xff1f;****面向行的输入&#xff1a;getline()****面向行的输入&#xff1a;get( )****为什么推荐使用get( )&#xff0c;而不是getline( )呢…...

编程日记 2023/2/17 3:58:34

做外贸，你不能不懂的外贸流程知识

报关是履行海关进出境手续的必要环节之一&#xff0c;涉及两大类:进出境运输工具、物品和货物。由于性质不同&#xff0c;报关手续也有些不同。今天我就为大家详细介绍一下进出口报关的流程&#xff0c;包括出口货物报关的流程&#xff0c;随报关单提交的运费和商业单据&#x…...

编程日记 2023/2/17 3:57:28

日本机载激光雷达测深进展（一）日本启动测量90%沿岸水深项目

海洋地图项目利用航空测深绘制日本90%沿海20m以浅区域&#xff0c;是日本海道协会&#xff08;JHA&#xff09;和日本财团的一个联合项目。 迄今为止&#xff0c;只有不到2%的日本沿海水域得到了测绘&#xff0c;严重拖累了在海洋事故、防灾减灾、篮碳以及生物多样性保护等领域…...

编程日记 2023/2/17 3:56:20

MySQL数据库调优————创建索引的原则和索引失效及解决方案

创建索引的原则 建议创建索引的场景 select语句&#xff0c;频繁作为where条件的字段update/delete语句的where条件需要分组、排序的字段distinct所使用的字段字段的值有唯一性约束对于多表查询&#xff0c;联接字段应创建索引&#xff0c;且类型无比保持一致 避免隐式转换 …...

编程日记 2023/2/17 3:55:13

设计师都在看的全球设计网站，你居然还不知道！

设计师需要拥有无限的创意和熟练的技巧&#xff0c;并且对行业的前景和客户的心理有一定的了解。要能达到“陌生化”之前&#xff0c;肯定是有知识储备&#xff0c;专业能力的前提要求&#xff0c;以及创新能力。 今天为大家整理了多个优秀全球设计网站&#xff0c;这些博客内…...

编程日记 2023/2/17 3:54:05

c++：缺省参数，函数重载

今天介绍的是cpp中的缺省参数以及函数重载的知识。 首先我们先看看缺省参数&#xff1a; 缺省参数 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时&#xff0c;如果没有指定实 参则采用该形参的缺省值&#xff0c;否则使用指定的实参。 例如&#…...

编程日记 2023/2/17 3:52:58

深度学习算法面试常问问题（二）

X86和ARM架构在深度学习侧的区别&#xff1f; X86和ARM架构分别应用于PC端和低功耗嵌入式设备&#xff0c;X86指令集很复杂&#xff0c;一条很长的指令就可以完成很多功能&#xff1b;而ARM指令集很精简&#xff0c;需要几条精简的短指令完成很多功能。 影响模型推理速度的因…...

编程日记 2023/2/17 3:51:51

美国CPC认证是什么？儿童玩具亚马逊CPC认证审核有哪些问题？

很多卖家都有遭遇listing下架&#xff0c;被要求提供CPC认证报告。这是因为亚马逊有时会加强对儿童产品的审查。本文带大家对CPC认证进行一个全面了解。什么是CPC认证&#xff1f;CPC认证&#xff0c;全称ChildrensProductCertification.是认可实验室&#xff0c;根据产品不同适…...

编程日记 2023/2/17 3:50:45

恭喜！ SelectDB 五位开发者成为 Apache Doris 新晋 PMC 成员和 Committer！

近期&#xff0c;通过 Apache Doris 项目管理委员会的推荐与投票&#xff0c;Apache Doris 社区正式迎来了 2 位新晋 PMC 成员 和 8 位新晋 Committer 的加入。值得关注的是&#xff0c;2 位新晋 PMC 成员均来自 SelectDB&#xff0c;分别是衣国垒&#xff08;yiguolei&#xf…...

编程日记 2023/2/17 3:49:36

数据库面试题

第一范式&#xff08;1NF&#xff09; 第一范式是指数据库的每一列都是不可分割的基本数据项&#xff0c;而下面这样的就存在可分割的情况&#xff1a; 学生&#xff08;姓名&#xff0c;电话号码&#xff09; 电话号码实际上包括了家用座机电话和移动电话&#xff0c;因此它…...

编程日记 2023/2/17 3:48:27

[USACO2022-DEC-Bronze] T2 Feeding the Cows 题解

一、题目描述Farmer John has N (1≤N≤10^5) cows, the breed of each being either a Guernsey or a Holstein. They have lined up horizontally with the cows occupying positions labeled from 1…N.Farmer John 有 N&#xff08;1≤N≤105&#xff09;头奶牛&#xff0c…...

编程日记 2023/2/17 3:47:21

Unity法线贴图原理理解(为什么存在切线空间？存的值是什么？)

Unity法线贴图原理理解(为什么存在切线空间&#xff1f;存的值是什么&#xff1f;&#xff09;写在前面1、为什么用法线贴图&#xff1f;2、用什么存法线&#xff1f;3、法线向量为什么存在切线空间&#xff1f;法线贴图存得是什么&#xff1f;4、法线贴图为什么会偏蓝&#xf…...

编程日记 2023/2/17 3:46:14

【JavaWeb】传输层协议——UDP + TCP

目录 UDP协议 UDP协议结构 UDP的特点 TCP协议 TCP协议结构 TCP的特点 TCP的十个核心机制 确认应答 超时重传 连接管理 滑动窗口 流量控制 阻塞控制 延迟应答 捎带应答 粘包问题 异常处理 UDP协议 UDP协议结构 源端口&#xff1a;存储的是发送方的端口号。 目的…...

编程日记 2023/2/17 3:45:06

C++ 中是用来修饰：内置类型变量、自定义对象、成员函数、返回值、函数参数

const 是 constant 的缩写&#xff0c;本意是不变的&#xff0c;不易改变的意思。在 C 中是用来修饰内置类型变量&#xff0c;自定义对象&#xff0c;成员函数&#xff0c;返回值&#xff0c;函数参数。 一. const修饰 普通类型的变量 const int a 7; int b a; // 正确 …...

编程日记 2023/2/17 3:43:59

av 146 002

61. 一个新的敏捷项目经理正试图确定团队该如何执行一个发布计划的进度。哪种工具可以更深入地了解团队的进展? A. 发布计划系统 B. 产品路线图。 C. 看板。 D. 燃尽图 62. 你的项目发起人找到你&#xff0c;让你知道他正在考虑给你项目中的一位高级工程师颁发1000美元的现…...

编程日记 2023/2/17 3:42:52

小红书用户画像 | 小红书数据平台

小红书的用户画像是小红书品牌营销的必备技能&#xff0c;也是小红书推广种草的一个重要前提。通过对小红书用户画像进行分析&#xff0c;对品牌进行精准营销&#xff0c;实现更高的流量转化。 2022小红书粉丝人群画像 千瓜数据在2022年发布的千瓜活跃用户画像趋势报告中分析了…...

编程日记 2023/2/17 3:41:46

【STM32笔记】低功耗模式下GPIO、外设、时钟省电配置避坑

【STM32笔记】低功耗模式下GPIO、外设、时钟省电配置避坑 前文&#xff1a; blog.csdn.net/weixin_53403301/article/details/128216064 【STM32笔记】HAL库低功耗模式配置&#xff08;ADC唤醒无法使用、低功耗模式无法烧录解决方案&#xff09; blog.csdn.net/weixin_534033…...

编程日记 2023/2/17 3:40:38

Linux内存分区（swap）

目录 1、使用物理分区创建内存交换分区 2、使用文件创建内存交换文件 当硬件的设备资源充足的话&#xff0c;那么swap是不会被我们的系统所使用到的&#xff0c;所以swap会被利用到的时刻通常就是物理内存不足的情况 我们知道CPU所读取的数据都来自于内存&#xff0c;那么当…...

编程日记 2023/2/17 3:39:32

第六章——抽样分布

文章目录1、统计量的定义2、常用的统计量3、经验分布函数4、正态总体常用统计量的分布4.1、卡方分布4.1.1、卡方分布的定义4.1.2、卡方分布的性质4.2、t分布4.2.1、t分布的定义4.2.2、t分布的性质4.3、F分布4.3.1、F分布的定义4.3.2、F分布的性质5、正态总体的样本均值与样本方…...

编程日记 2023/2/17 3:38:26

蓝桥云课-声网编程赛（声网编程竞赛7月专场）题解

比赛题目快速链接&#xff1a;https://www.lanqiao.cn/contests/lqENT02/challenges/ 让时钟转起来&#xff08;考点&#xff1a;css&#xff1a;transform&#xff09; // index.js function main() {// 题解前理解一个东西&#xff1a;// 时针每过一小时&#xff0c;转30 原…...

编程日记 2023/2/17 3:37:18

Java高手速成 | Java web 实训之投票系统

01、投票系统的案例需求 在本篇中，我们将制作一个投票系统，让学生给自己喜爱的老师投票。该系统由1个界面组成，系统运行，出现投票界面，如图所示： ▍显示效果 在这个界面中，标题为：“欢迎给教师投票”；在界面上有一个表格，显示了各位教师的编号、姓名、得票数；其中…...

编程日记 2023/2/17 3:36:09

排序的基本概念

按数据存储介质&#xff1a;内部排序和外部排序按比较器个数&#xff1a;串行排序和并行排序按主要操作&#xff1a;比较排序和基数排序插入排序&#xff1a;基本思想&#xff1a;每步将一个待排序的对象&#xff0c;按其关键码大小&#xff0c;插入到前面已经排好序的一组对象…...

编程日记 2023/2/17 3:34:59

面试笔试资料--Java

这里写自定义目录标题1.同步和异步有何异同&#xff1f;在什么情况下分别使用他们&#xff1f;举例说明1.同步和异步有何异同&#xff1f;在什么情况下分别使用他们&#xff1f;举例说明 1.1概念 Java中交互方式分为同步和异步两种&#xff1a; 　　同步交互&#xff1a;指发送…...

编程日记 2023/2/17 3:33:52

基于TC377的MACL-ADC General配置解读

目录标题一、MACL-ADC General1.Config Variant与AdcConfigSet2. AdcGeneral3.AdcPublishedInformation二、最终对应达芬奇生成内容一、MACL-ADC General 1.Config Variant与AdcConfigSet Config Variant &#xff1a;变体配置&#xff0c;默认选择VariantPostBuild就好了&…...

编程日记 2023/2/17 3:32:45

企业营销型网站策划务/北京seo公司工作

工业行业的发展和创新一直都在随着时代进步而进步&#xff0c;工业也渐渐的融入于互联网智能发展全新智能工业工厂也随之而生。商迪3D运用三维可视化技术、数据可视化、3D建模技术、三维虚拟技术实现数据处理的分析、处理、实时显示、控制等核心功能&#xff0c;通过对现实场景…...

编程日记 2025/1/31 20:34:52

wordpress分权限浏览器/seo工具优化软件

“现在大部分的矿池都是在用我们当初开源的那套代码&#xff0c;包括前10名里也有不少。所以这个决定是很好的。只是后来给我们自己创业造成了一些麻烦&#xff0c;过多的竞争对手&#xff08;笑&#xff09;。”文 | 黄雪姣 运营 | 盖遥 编辑 | Mandy王梦蝶出品 | Odaily星球…...

编程日记 2025/1/31 19:40:02

网站空间可以自己做服务器/关键词挖掘排名

编译过程&#xff0c;很曲折&#xff0c;满脸辛酸泪啊……准备工作 1、要安装cygwin&#xff0c;这个东西装起来很麻烦&#xff0c;我是在cygwin官网上下载的&#xff0c;perl和python这两项必须装&#xff0c;别的default就行&#xff0c;不过我是都安装的&#xff0c;因为以前…...

编程日记 2025/1/31 17:44:00

建设人员变更是哪个网站/网站维护费一年多少钱

大家好&#xff01;欢迎收听&#xff0c;闽南之声佛法与人生&#xff0c;一听就懂的佛法。坚持“定课”贤二、138什么是“定课”1、法师&#xff0c;关于佛教我有很多方面不了解&#xff0c;还请您解惑。贤二师父请讲。2、佛门中的早晚课是什么意思&#xff1f;贤二师父早晚课是…...

编程日记 2025/1/31 15:19:42

织梦做网站教程/seo推广优化

首先在头文件中声明要实现的功能;标头.h#ifndef game_h #define game_h #define MAX_SIZE 10 typedef unsigned int size_t; typedef int DataType;typedef struct SeqList {DataType _array[MAX_SIZE];int _size; // 顺序表中有效元素的个数 }SeqList, *PSeqList; // 初始化…...

编程日记 2025/1/31 15:03:05

自己做图片网站/北京seo学校

https://developer.tizen.org/downloads/sample-web-applications https://01.org/html5webapps/webapps 转载于:https://www.cnblogs.com/androidme/p/3250006.html...

编程日记 2025/1/31 13:25:21