在 Electron 中与 <webview> 交流

Question

我的 Electron 应用程序中有一个 <webview>。我想要安全的 "foreign" 通信，就像 iframe 到 postMessage 一样。例如：

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

我与此子网页视图通信的唯一选择是打开nodeIntegration以便我可以使用sendToHost吗？只为这一功能打开所有 nodeIntegration 似乎有点矫枉过正。

Answer 1

您可以在 webview preload 脚本中访问 Electron API，包括 IPC，即使 nodeIntegration 被禁用。您的预加载脚本可以将函数注入全局名称空间，然后可以在 webview 中加载的页面中访问这些名称空间。一个简单的例子：

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>

Answer 2

最简单的方法
沟通是

注意： (main.js or app.js or background.js or process.js ) 不需要传递（直接传递组件到组件），我在electron:3.1.10中成功实现用于打印 html webview.

Window 到 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);

从我的组件获取数据或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 到 window

Webview 到 window（直接传递给组件）

mywebview.js

 ipcRenderer.sendToHost("readyCompanyInfo",data)

在我的 window 例如我使用 vue（mycomponent.vue 或我的页面）

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

}
})

在 Electron 中与 <webview> 交流

Communicate with <webview> in Electron

electron