Electron sends a message to iframe in WebView

Time:2020-6-2
Electronic's renderer and webivew internal page communication can be realized by loading preload in the WebView page. The official document also gives an example code:
//On the renderer page 
const webview = document.querySelector('webview') 
webview.addEventListener('ipc-message', (event) => {
    console.log(event.channel) // Prints "pong" 
})
webview.send('ping')
//In preview in WebView
const { ipcRenderer } = require('electron') 
ipcRenderer.on('ping', () => { 
    ipcRenderer.sendToHost('pong') 
})

How to insert preload in iframe of WebView to view
Electronic WebView load remote Preload Method
Electron loads preload in iframe of WebView

Although preload is loaded into iframe in WebView, WebView’s preload can also be accessed through ipcRenderer.sendToHost Send a message to the renderer process, but in the renderer webview.send Method: when sending a message to preload in WebView, it will be found that only the preload of mainframe can receive the message, while the preload in iframe cannot, and the official document does not specify it. Search the network information The source is fruitless, and after 3 or 4 hours of experiment, I planned to give up the ipcrenderer and use PostMessage to implement it (the general idea is that the mainframe will broadcast the messages that are not its own through PostMessage after receiving the messages, and the iframe will indirectly obtain the message content by listening to the messages);

Fortunately, I didn’t give up. I went through all the APIs of WebView again and found that getwebcontents() got itwebContentsThe instance contains the sendtoframe method, and the method document to get the frameid also has instructions,require('electron').webFrame.routingId, so back to the idea of ipcrenderer, the preload of iframe actively sends a message to the renderer, and carries the frameid and the frameid of the renderer cache. Later, you only need to call sendtoframe (frameid, channel) to send a message to iframe