借助跨进程通信，Electron 内嵌 iframe 与主进程数据交互指南

2024-02-22 16:20:03

跨进程通信的必要性

Electron 作为一款强大的跨平台桌面应用程序框架，在构建桌面应用程序时，常需应对数据在不同进程间传递的问题。Electron 使用多进程架构，将主进程和渲染进程分开，这可带来更好的稳定性和安全性，但随之而来的挑战是，主进程和渲染进程之间无法直接进行数据交换。因此，跨进程通信技术便应运而生，使不同进程能够进行安全可靠地通信。

Electron 内嵌 iframe 数据通信方案

在 Electron 中，iframe 是将外部网页或资源嵌入到当前网页中的常见方式。然而，当 iframe 加载的内容位于不同域时，浏览器出于安全考虑，会限制iframe与主进程之间的通信。为此，Electron 提供了跨进程通信 API，可以帮助我们在iframe和主进程之间建立通信桥梁。

方案一：结合 ipcMain 和 ipcRenderer 进行通信

ipcMain 和 ipcRenderer 是 Electron 内置的进程间通信模块，可以轻松实现主进程和渲染进程之间的通信。其工作原理是，主进程使用 ipcMain 来监听事件，而渲染进程使用 ipcRenderer 来触发事件，从而实现数据交换。

使用示例：

// 主进程
const {ipcMain} = require('electron');
ipcMain.on('message-from-iframe', (event, arg) => {
  console.log(arg); // 输出从 iframe 发送的数据
});

// 渲染进程
const {ipcRenderer} = require('electron');
ipcRenderer.send('message-to-main-process', 'Hello from iframe');

方案二：结合 postMessage 实现通信

postMessage 是 HTML5 中定义的跨窗口通信接口，它允许在不同窗口、iframe 或 Worker 之间安全地交换数据。在 Electron 中，我们可以利用 postMessage 在 iframe 和主进程之间进行通信。

使用示例：

// 主进程
const {BrowserWindow} = require('electron');
const win = new BrowserWindow();
win.webContents.on('did-finish-load', () => {
  win.webContents.executeJavaScript(`
    window.addEventListener('message', (event) => {
      window.opener.postMessage(event.data, '*');
    });
  `);
});

// 渲染进程
window.addEventListener('message', (event) => {
  if (event.source !== window.opener) {
    return;
  }
  console.log(event.data); // 输出从主进程发送的数据
});

// 发送数据到主进程
window.opener.postMessage('Hello from iframe', '*');