1、在webview标签所在的html页面,代码如下:
2、在被webview加载的页面,代码如下:
3、在webview标签所在的html页面的控制台输出:
4、在被webview加载的页面的控制台输出:
上面的代码
// 在页面 const webview = document.querySelector('webview') webview.addEventListener('ipc-message', (event) => { console.log(event.channel) // Prints "pong" }) webview.send('ping') // 在webview const {ipcRenderer} = require('electron') ipcRenderer.on('ping', () => { ipcRenderer.sendToHost('pong') })
webview src是第三方的网站 那么如何传参数呢 通信呢?
1. 标签这样写: <webview id="smdh" src="www.baidu.com" :preload="preloadUrl" style=" 100%; height:100%"></webview> // src: 这就是你的第三方链接 // 2. electron端上webview 所在页面这样写 const webview = document.querySelector('#smdh') // webview页面加载完毕 webview.addEventListener('did-finish-load', (e) => { console.log('加载完毕') }) // 接受webview页面打印的值 webview.addEventListener('console-message', (e) => { console.log('webview桌面端打印的访客端控制台信息:', e.message) }) // 接受webview页面的值 webview.addEventListener('ipc-message', ({channel, args}) => { console.log(channel, '我是webview传递的值', args) }) webview.addEventListener('dom-ready', (e) => { webview.openDevTools() // 给webview传值代表是桌面端使用 webview.send('smdh-electron', 'smdh-desktop') }) // preload: https://www.electronjs.org/docs/api/webview-tag#preload // 非常重要 他就是执行在iwebview上的脚本,他是个JS文件,他的js代码会注入在,webview的src的网址上,你不需要关心 // 那么问题来了 很多人想问,那我直接吧 preload引入的JS 文件代码写在我第三方项目网址上不一样吗? // 我可以明确告诉你。如果你吧preload.js文件的代码 写在第三上方的网址项目上会包错,具体错误就是你引入,const {ipcRenderer} = require('electron') 这个导致的一些列错误。反正就是node环境等问题! 报一写fs错误。 // preloadUrl 是个js文件的路径 指向一个JS 文件, 如: “./preload.js” // 3 .preload.js 代码:如下 无非就是通过window方式解决通信 因为下面的代码运行在electron端说面。不是运行在web浏览器上所以不报错,有node环境,web项目会是运行在浏览器上,无node。但是共同点就是有window const {ipcRenderer} = require('electron') window._smenv = 'electron' ipcRenderer.on('smdh-electron', (e, message) => { window.smdhDesktop = message }) window._electron_event = { "PING": (data) => { ipcRenderer.sendToHost('PING',data) } } 4. 在你的第三方网站的项目里面这样写:如我们是vue项目就这样接受 在app.vue入口文件,一定是异步接收,如果值存在,你就可以保持到vuex啦。具体自己操作! created () { // 接受桌面端传递的值 if (window._smenv === 'electron') { let timer = setInterval(() => { if (window.smdhDesktop) { console.log(window.smdhDesktop, 'electron的值2') clearInterval(timer) } }, 100) } } // 通过某个按钮点击触发下面事件,然后进行往桌面端传值通信 setData () { window._electron_event.PING({name: '我是商盟订货传递的值'}) }
// 如何接受webview src是第三方的网站页面控制台 打印的值
const webview = document.querySelector('#smdh') webview.addEventListener('console-message', (e) => { console.log('Guest page logged a message:', e.message) })