当前位置: 首页 > 后端技术 > Node.js

electron向webview中的子iframe发送消息

时间:2023-04-03 14:51:37 Node.js

electron的renderer和webivew页面的通信可以通过在webview页面加载preload来实现,官方文档也给出了示例代码://Ontherendererpageconstwebview=document.querySelector('webview')webview.addEventListener('ipc-message',(event)=>{console.log(event.channel)//打印"pong"})webview.send('ping')//在webviewconst中预加载{ipcRenderer}=require('electron')ipcRenderer.on('ping',()=>{ipcRenderer.sendToHost('pong')})如何在webview的iframe中插入preload可以参考electron的webview加载远程preload方法electronloadpreloadpreloadiniframewebview虽然加载到webview中的iframe中,webview的preload也可以通过ipcRenderer.sendToHost向renderer进程发送消息,但是当通过renderer中的webview.send方法向webview中的preload发送消息时,会发现只有mainFrame的preload可以接收到消息,iframe中的preload不能,官方文档也没有明确说明,搜索网络资源无果,实验了3、4个小时,已经打算放弃ipcRenderer,使用postMessage来实现(大体思路是mainFrame收到消息最后通过postMessage广播不属于自己的消息,子iframe通过监听间接获取消息内容信息);还好它没有放弃,遍历了webview的所有API,发现getWebContents()获取的webContents实例中包含sendToFrame方法,获取frameId的方法文档也有说明,require('electron')。webFrame.routingId,所以返回从ipcRenderer的思路来看,iframe的preload主动向renderer发送消息,并携带frameId,renderer缓存frameId,然后只需要调用sendToFrame(frameId,channel)发送消息给内嵌框架