electron - 在 Electron 中与 <webview> 通信

Question

我有一个 <webview>在我的 Electron 应用程序中。我想进行安全的“对外”交流，就像使用 iframe 一样。通过postMessage .例如:
webview.executeJavaScript("window.parent.postMessage('all done!')");
是我与此子webview 通信的唯一选择打开nodeIntegration这样我就可以使用 sendToHost ?开启全部nodeIntegration仅此一项功能似乎有点过头了。

Answer 1

最简单的方法
沟通是

笔记:
(main.js 或 app.js 或 background.js 或 process.js )无需传递(直接将组件传递给组件)，我在 Electron :3.1.10 中成功实现
用于打印 html webview。

窗口到 Web View

示例1.html

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

例子1.js

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

从 mycomponent 或 window 获取数据(我直接发送表单组件)

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 到窗口(直接传递给组件)

mywebview.js

 ipcRenderer.sendToHost("readyCompanyInfo",data) 

在我的窗口中，例如我使用 vue(mycomponent.vue 或 mypage)

示例1.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])

}
})