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%">
      <webview
        id="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')

例如:

//获取VUE中定义的webView中的id

const webview: any = document.getElementById('webViewId')

复制代码
onMounted(async () => {
webview?.addEventListener('dom-ready', () => {
  setTimeout(() => {
    // 打开webview devtools
    //webview.openDevTools()
    //注入JS
    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 说明已经通信成功了,后面就可以自己实现自己的逻辑了

相关推荐
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队6 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy6 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端7 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿7 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL7 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉7 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~7 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng7 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript