Electron：在 BrowserWindow 和呈现的 URL 之间进行通信（nodeIntegration：false）

Question

在博文之后的 repo 之后，我花了大约一个小时阅读 gist，但似乎无法弄清楚如何做到这一点。

我有一个 BrowserWindow 实例加载一个 URL（我控制），nodeIntegration: false。

在主进程中，我想与呈现的 URL 进行通信。我对 preload 脚本、BrowserWindow.send 和 executeJavascript 范式感到困惑。

我要发送的数据非常大（例如上传的文件在 50kb 到 10mb 之间）。

最好的方法是什么？您可能知道的任何示例/教程都会有所帮助。谢谢！

Answer 1

main.js

const path = require('path')
const electron = require('electron')
const { app, BrowserWindow, ipcMain } = electron

const window = new BrowserWindow({
  minWidth: 1200,
  minHeight: 700,
  autoHideMenuBar: true,
  resizable: true,
  show: false,
  scrollBounce: true,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
  }
})
window.webContents.loadURL('https://xxx.xxx.com') // load your web page
ipcMain.on('ping', (event, msg) => {
  console.log(msg) // msg from web page
  window.webContents.send('pong', 'hi web page') // send to web page
})

preload.js

const { ipcRenderer } = require('electron');
function init() {
  // add global variables to your web page
  window.isElectron = true
  window.ipcRenderer = ipcRenderer
}

init();

你的网页

<script>
  if (window.isElectron) {
    window.ipcRenderer.send('ping', 'hello main')
    window.ipcRenderer.on('pong', (event, msg) => console.log(msg))
  }
</script>

Answer 2

使用 preload 脚本应该可以工作。您可以使用ipcRenderer 与主进程通信，并通过简单的 API 将其公开给渲染器窗口。最简单的preload.js 可以是这样的：

const { ipcRenderer } = require('electron');

let listener;
const bridge = {
   send: data => ipcRenderer.send('from-renderer', data),
   onMessage: callback => listener = callback 
}

ipcRenderer.on('to-renderer', (event, arg) => {
  if (listener) {
     listener(arg);
  } else {
     console.warn('No listener');
  }
});

window.bridge = bridge;

在渲染器中

window.bridge.send('Data to main process');
window.bridge.onMessage(payload => console.log('Data received', payload)) 

也请查看this discussion 以获取更多信息。