Communicate with <webview> in Electron

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])

}
})

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>

Tags:

Electron