electron发送消息给webview里的子iframe

坚壳发布于 2020-05-03

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