Electron 中 webview 如何与主进程渲染进程进行事件监听通信 非常实用

webview 调用 加载页 方法通过.executeJavaScript(code[, userGesture, callback])或者webview.send()发送，而在访客页使用ipcRenderer.on()监听

下面分为四个方面：

第一：web页面向客户端如何发送消息（对应如下第1点 -- 1）

第二：客户端如何接收web页面发送过来的消息（对应如下第2点 -- 2）

第三：web页面接收客户端发送过来的消息（对应如下第3点 -- 3）

第四：客户端如何向web页面发送消息 （对应如下第4点 -- 4）

注意、注意、注意：

访客页需要调用webview所在页面的方法，则需要在webview中加上属性  nodeintegration="true"

1、（web页面向客户端发送消息）访客页也就是webview中src指定的页面（浏览器页面）web端需安装electron，

npm install electron --save-dev 通过下面这个方法向客户端发送消息

// electron通讯方法(向客户端发送消息)
sendToElectronPage(sendName, params) {
    if (window.require('electron')) {
         let ipcRenderer = window.require('electron').ipcRenderer
         ipcRenderer && ipcRenderer.sendToHost(sendName, params)
         ipcRenderer.send('close')
    }
},

2、（客户端监听web端发送过来的消息）在客户端页面

let webview = document.getElementById('test');

webview.addEventListener('ipc-message', (event) => { //ipc-message监听，被webview加载页面传来的信息

  console.log(event.channel)//最终收到消息输出   子页面信息

})

如果设置了不生效，请在此确认是否在webview标签上设置了nodeintegration="true"的属性

3、（web端接收客户端发过来的消息）

1、接收客户端传来的信息
this.recieveInfo('aaaaaa', (event, arg) => {
     
    console.log('监听客户端收到的名称为aaaaaa消息', arg)
    //todo
   
})

2、(接收消息)公共方法
recieveInfo(recieveName, callback) {
    if (window.require) {
         const { ipcRenderer } = window.require('electron')
         ipcRenderer.on(recieveName, callback)
    }
},

4、（客户端向webview发送消息）

获取webview标签
let webview = document.querySelector('webview');
webview.send("sendToWebInfo",{id:1,name:'laoli'})

  交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！