Electron多窗口间变量传递实现问题求助

这里提供两种可靠的实现方式，直接解决值从主窗口传递到新窗口的问题：

方法一：通过URL查询参数传递值 #

这种方式简单直接，创建新窗口时把选中值拼到gas.html的URL后面，新窗口加载后直接从URL中读取。

1. 主窗口渲染进程（index.js） #

在按钮点击事件里，获取选中值后请求主进程打开带参数的窗口：

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

// 假设按钮id为openGasBtn，选择框id为selectOption
document.getElementById('openGasBtn').addEventListener('click', () => {
  const selectedValue = document.getElementById('selectOption').value;
  ipcRenderer.send('open-gas-window', selectedValue);
});

2. 主进程（app.js） #

监听IPC事件，创建窗口时拼接参数到URL：

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

let gasWindow = null;

function createGasWindow(selectedValue) {
  gasWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 把选中值作为查询参数拼到URL
  gasWindow.loadFile(path.join(__dirname, 'gas.html'), {
    query: { selected: selectedValue }
  });

  gasWindow.on('closed', () => {
    gasWindow = null;
  });
}

// 监听打开窗口的IPC请求
ipcMain.on('open-gas-window', (event, selectedValue) => {
  createGasWindow(selectedValue);
});

// 主窗口创建逻辑（保留原有代码）
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

3. 新窗口渲染进程（gas.js） #

从URL查询参数中读取值并显示：

window.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const selectedValue = params.get('selected');
  // 假设显示值的元素id为displayValue
  document.getElementById('displayValue').textContent = `选中的值：${selectedValue}`;
});

方法二：通过IPC在窗口加载完成后发送值 #

如果不想暴露参数在URL里，可以用这种方式，主进程在新窗口加载完成后主动把值发送过去。

1. 主窗口渲染进程（index.js） #

和方法一的代码完全一致，发送IPC请求给主进程即可。

2. 主进程（app.js） #

修改createGasWindow函数，在窗口加载完成后发送值：

function createGasWindow(selectedValue) {
  gasWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  gasWindow.loadFile(path.join(__dirname, 'gas.html'));

  // 窗口加载完成后发送选中值
  gasWindow.webContents.on('did-finish-load', () => {
    gasWindow.webContents.send('receive-selected-value', selectedValue);
  });

  gasWindow.on('closed', () => {
    gasWindow = null;
  });
}

// 监听IPC请求的代码和方法一一致

3. 新窗口渲染进程（gas.js） #

监听主进程发来的IPC事件，接收值并显示：

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

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.on('receive-selected-value', (event, value) => {
    document.getElementById('displayValue').textContent = `选中的值：${value}`;
  });
});

可选优化（Electron 12+） #

如果你的Electron版本≥12，建议开启contextIsolation: true并使用预加载脚本实现IPC，避免直接开启nodeIntegration：

1. 创建预加载脚本preload.js：

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

contextBridge.exposeInMainWorld('electronAPI', {
  openGasWindow: (value) => ipcRenderer.send('open-gas-window', value),
  onReceiveValue: (callback) => ipcRenderer.on('receive-selected-value', callback)
});

2. 主进程创建窗口时配置preload：

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  contextIsolation: true,
  nodeIntegration: false
}

3. 渲染进程调用时用window.electronAPI代替直接的ipcRenderer。

内容的提问来源于stack exchange，提问作者Nemanja Gavranovic