Question

我在博客发布后的回购后花了大约一个小时阅读要点，但似乎无法弄清楚如何做到这一点。

我有BrowserWindow个实例加载了一个网址（我控制的），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') // 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();


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

Answer 2

使用预加载脚本应该有效。您可以使用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以获取更多信息。

电子：在BrowserWindow和渲染的URL之间进行通信（nodeIntegration：false）

2 个答案: