Communicate with <webview> in Electron

Question

I have a <webview> in my Electron app. I'd like to have safe "foreign" communication, the way I would with an iframe through postMessage. So for example:

webview.executeJavaScript("window.parent.postMessage('all done!')");

Is my only choice for communication with this subwebview to turn on nodeIntegration so that I can use sendToHost? Turning on all of nodeIntegration just for this one feature seems like overkill.

Answer 1

Easiest way
Communication is

Note: (main.js or app.js or background.js or process.js ) no need to pass (directly pass component to component),i succesffully implemented in electron:3.1.10 for print html webview.

Window To Webview

example1.html

    <webview id="paper" style="width:300px;height:800px" src="file:///static/mywebview.html" nodeintegration></webview>

example1.js

 var webview = document.getElementById("paper");
  webview.send("ping",data); 

getting data from mycomponent or window(i send directly form component)

mywebview.html

<!---what data you want show----!>

mywebview.js

    const {
        ipcRenderer
    } = require('electron')                                                                            
  //data from window                                                                   
    ipcRenderer.on('ping', (e, data) => { console.log(data) })

webview to window

Webview to window(direct pass to component)

mywebview.js

 ipcRenderer.sendToHost("readyCompanyInfo",data) 

in my window eg i use vue (mycomponent.vue or mypage)

example1.html

const ipcRenderer = require("electron").ipcRenderer;
webview.addEventListener("ipc-message",(event)=>{

const {args,channel}=event;

if(channel=="readyCompanyInfo")
{
console.log(channel,args)
//here you can see data what u passed from webview to window
console.log(args[0])

}
})

Answer 2

You can access Electron APIs in the webview preload script, including IPC, even when nodeIntegration is disabled. Your preload script can inject functions into the global namespace that will then be accessible within the page loaded in the webview. A simple example:

webview-preload.js:

const { ipcRenderer } = require('electron')    

global.pingHost = () => {
  ipcRenderer.sendToHost('ping')
}

webview-index.html:

<script>
  pingHost()
</script>

window-index.html:

<script>
  const webview = document.getElementById('mywebview')
  webview.addEventListener('ipc-message', event => {
    // prints "ping"
    console.log(event.channel)
  })
</script>