electron发送消息给webview里的子iframe

electron的renderer和webivew内页面通信可以通过在webview页面内加载preload去实现,官方文档也有给出示例代码:
// 在renderer页 
const webview = document.querySelector('webview') 
webview.addEventListener('ipc-message', (event) => {
    console.log(event.channel) // Prints "pong" 
})
webview.send('ping')
// 在webview内的preload内
const { ipcRenderer } = require('electron') 
ipcRenderer.on('ping', () => { 
    ipcRenderer.sendToHost('pong') 
})

其中如何在webview的iframe内插入preload可以查看
electron webview加载远程preload方法
electron 在webview的iframe内加载preload

preload虽然加载到了webview内的iframe里,webview的preload也可以通过ipcRenderer.sendToHost发送消息给renderer进程,但是在renderer里通过webview.send方法发送消息给webview内preload时会发现只有mainFrame的preload能收到消息,iframe里的preload则不能,官方文档也没有明确说明,搜遍网络资源无果,且实验了3、4个小时后本已打算放弃ipcRenderer,改用postMessage去实现(大体思路是mainFrame收到消息后将不是自己的消息通过postMessage广播下去,子iframe通过监听message去间接获取消息内容);

幸得没有放弃,又把webview的所有API都过了一遍,发现getWebContents()获取的webContents实例内包含有sendToFrame方法,而获取frameId的方法文档也有说明,require('electron').webFrame.routingId,于是再回到ipcRenderer的思路上,由iframe的preload主动发消息给renderer,并携带frameId,renderer缓存frameId, 后续只需要调用sendToFrame(frameId, channel)即可发消息给iframe

你可能感兴趣的:(electron,前端,node.js)