electron+VUE Browserwindow与webview通信

仅做记录

前言:

electron+VUE+VITE框架,用的是VUE3.0

主进程定义:用于接收webview发送的消息

ipcMain.on('MyWebviewMessage', (event, message) => {logger.info('收到webmsg=' + message)//转发给渲染进程})

porelaod/webPreload.js定义

const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('electronAPI', {send: (channel, data) => {ipcRenderer.send(channel, data)},
})

VUE文件中定义

<template><div class="XXX"><el-scrollbar height="98%"><webviewid="webViewId"allowpopups:preload="preloadPath":src="url"></webview></el-scrollbar></div>
</template>

最关键的preloadpath

我在script中如下定义

const preloadPath = ref<string>('')
const filePath = await window.api.GetWebViewPreloadPath()
console.log('filePath=' + filePath)
preloadPath.value = `file:///${filePath}`

其中preloadPath需要以file:///开头的绝对路径 

例如:file:///C:/porelaod/webPreload.js

可以使用注入JS方式来实现调用window.electronAPI.send('MyWebviewMessage')

例如:

const webview: any = document.getElementById('webViewId')
onMounted(async () => {
webview?.addEventListener('dom-ready', () => {setTimeout(() => {// 打开webview devtools//webview.openDevTools()webViewExecuteJS(webview)}, 500)
})
function webViewExecuteJS(webview: any) {
window.electronAPI.send('MyWebviewMessage', '测试')}
const injectScript = `document.addEventListener('click', ${handleClick.toString()});
`
// 在webview中注入脚本
webview.executeJavaScript(injectScript)

需要注意的地方

1,porelaod注入的路径需要以file:///开头的绝对路径,如果不能保证 可以直接在vue中如下写法来进行测试

<template> <div class="XXX"> <el-scrollbar height="98%"> <webview id="webViewId" allowpopups :preload="file:///C:/porelaod/webPreload.js" :src="url" ></webview> </el-scrollbar> </div> </template>

2,通过

webview.openDevTools()打开webview的控制台

附图

如果能看到webview控制台里面的命令:window.electronAPI 说明已经通信成功了,后面就可以自己实现自己的逻辑了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/577820.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深圳区块链交易所app系统开发,撮合交易系统开发

随着区块链技术的迅速发展和数字资产市场的蓬勃发展&#xff0c;区块链交易所成为了数字资产交易的核心场所之一。在这个快速发展的领域中&#xff0c;区块链交易所App系统的开发和撮合交易系统的建设至关重要。本文将探讨区块链交易所App系统开发及撮合交易系统的重要性&#…

【Spring源码】WebSocket做推送动作的底层实例

一、前瞻 Ok&#xff0c;开始我们今天的对Spring的【模块阅读】。 那就挑Web里的WebSocket模块&#xff0c;先思考下本次阅读的阅读线索&#xff1a; WebSocket在Spring里起到什么作用这个模块采用了什么设计模式我们都知道WebSocket可以主动推送消息给用户&#xff0c;那做推…

大家快来听,分享一个寄快递省钱赚钱的方法哦!

大家再寄快递的时候&#xff0c;会有很多种方法来供我们选择&#xff0c;可以直接去驿站寄快递&#xff0c;但是这样是不是想的略微麻烦了&#xff0c;可以在官网上下单&#xff0c;快递员上门取件&#xff0c;但是价格也是不便宜的吧&#xff0c;如果是公司一下子大批量的寄件…

Linux系统常用命令

Linux系统常用命令 文章目录 Linux系统常用命令一、系统管理类二、文件与目录管理类|三、文件与目录管理类||四、网络管理类五、磁盘管理类六、Oracle常用命令七、QData常用命令 一、系统管理类 二、文件与目录管理类| 三、文件与目录管理类|| 四、网络管理类 五、磁盘管理类 六…

量化交易入门(二十八)什么是布林带,量化中怎么使用

什么叫布林带 布林带&#xff08;Bollinger Bands&#xff09;是一种常用的技术分析指标&#xff0c;由约翰布林&#xff08;John Bollinger&#xff09;于20世纪80年代开发。它由三条线组成&#xff1a;中轨&#xff08;通常为20日移动平均线&#xff09;、上轨&#xff08;中…

类的成员之三:构造器(Constructor)

类的成员之一&#xff1a;成员变量 (field) 类的成员之二&#xff1a;方法 (method) 我们 new 完对象时&#xff0c;所有成员变量都是默认值&#xff0c;如果我们需要赋别的值&#xff0c;需要挨个为它们再赋值&#xff0c;太麻 烦了。我们能不能在new 对象时&#xff0c;直接…

二维随机变量的条件分布-已知X概率密度,X条件下的Y概率密度求解y的概率密度

问题&#xff1a;设数X在区间(0,1)上随机地取值,当观察到Xx(0<x<1)时,数Y在区间(x,1)上随机地取值.求Y的概率密度f(y)&#xff1f; 求解&#xff1a; 首先&#xff0c;数X在区间(0,1)上均匀分布&#xff0c;因此其概率密度函数fX​(x)为&#xff1a; fX​(x)1 0<…

【探索Linux】—— 强大的命令行工具 P.31(守护进程)

阅读导航 引言一、守护进程简介1. 概念2. 特点 二、用C创建守护进程⭕代码✅主要步骤 温馨提示 引言 当谈到计算机系统中运行的特殊进程时&#xff0c;守护进程&#xff08;daemon&#xff09;无疑是一个备受关注的话题。作为在后台默默运行并提供各种服务的进程&#xff0c;守…

【产品经理】华为IPD需求管理全思路分享!

作为一名产品经理&#xff0c;会在日常工作中接收到各种需求&#xff0c;而解决需求要提供对应的解决方案。本篇文章以华为的IPD需求管理流程为例&#xff0c;探讨其需求管理思路&#xff0c;帮助产品岗位的你快速做好需求管理并解决方案。 一、理清什么是产品需求 说到这个话…

Matlab|电动汽车充放电V2G模型

目录 1 主要内容 1.1 模型背景 1.2 目标函数 1.3 约束条件 2 部分代码 3 效果图 4 下载链接 1 主要内容 本程序主要建立电动汽车充放电V2G模型&#xff0c;采用粒子群算法&#xff0c;在保证电动汽车用户出行需求的前提下&#xff0c;为了使工作区域电动汽车尽可能多的消…

httpx+nuclei实战 | 大华智慧园区综合管理平台任意密码读取漏洞

漏洞成因 没有对接口进行严格的权限管理&#xff0c;导致可以通过访问user_getUserInfoByUserName.action获取system用户的MD5加密后的密码 hunter语法 web.icon"4644f2d45601037b8423d45e13194c93"&&web.title"智慧园区综合管理平台" POC GET…

【计算机择校】“西电“和“西交“那个更好?

那肯定还是建议去西交&#xff0c;两个学校还是有一定差距的&#xff0c;985高校的资源不容小觑... 本人双非科班出身备考408成功上岸&#xff0c;在这里也想给想考408的学弟学妹们一些很中肯的&#xff0c;学习建议。 我是科班水过408的四门课 说实话&#xff0c;大部分准备…