在Electron中與<webview>溝通

Question

我在我的電子應用中有<webview>。我想要有一個安全的「外國」通訊方式，我想用到postMessage。因此，例如：

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

是我對這個subwebview通信的唯一選擇打開nodeIntegration，這樣我可以使用sendToHost？打開所有nodeIntegration只是爲了這一個功能似乎是矯枉過正。

Answer 1

即使禁用了nodeIntegration，您也可以訪問webviewpreload腳本中的Electron API，包括IPC。您的預加載腳本可以將函數注入到全局名稱空間中，然後可以在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>