Electron JS中如何从渲染进程向新模态窗口发送数据？

问题概述 #

在Electron项目中创建了模态子窗口，无法从主窗口向该模态窗口发送数据，但反向（子窗口到主窗口）通信正常。

你尝试过的代码 #

主窗口代码（view.js） #

function openPrint() {
    let win2 = new remote.BrowserWindow({
        parent: remote.getCurrentWindow(),
        modal: true,
        webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true
        }
    })

    var theUrl = 'file://' + __dirname + '/printer.html'

    win2.loadURL(theUrl);
    const remoteMain = remote.require("@electron/remote/main");
    remoteMain.enable(win2.webContents);
    ipcRenderer.send('print-data',"test data")
}

var myprint = document.getElementById('print-file'); 
myprint.addEventListener('click',openPrint)

模态窗口代码（printer.html关联脚本） #

const remote = require('@electron/remote');

document.querySelector('#test').addEventListener('click', test)

remote.getCurrentWindow().getParentWindow().on('print-data',(evt,arg)=>{
    console.log(arg)
});

你尝试过的修改（仍无效） #

win2.loadURL(theUrl);
const remoteMain = remote.require("@electron/remote/main");
remoteMain.enable(win2.webContents);

win2.once("ready-to-show", () => {
    ipcRenderer.send('print-data','test data')
});

问题原因 #

当前实现存在两个核心问题：

1. 主窗口用ipcRenderer.send发送的消息会被发送到主进程，而非直接到子窗口，子窗口监听父窗口的事件自然接收不到。
2. 子窗口错误地监听父窗口的自定义事件，而非通过ipcRenderer监听IPC通道。

解决方法 #

方法1：直接通过子窗口的webContents发送消息 #

主窗口创建子窗口后，直接调用子窗口的webContents.send方法发送数据，无需经过主进程中转：

function openPrint() {
    let win2 = new remote.BrowserWindow({
        parent: remote.getCurrentWindow(),
        modal: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    })

    var theUrl = 'file://' + __dirname + '/printer.html'

    win2.loadURL(theUrl);
    const remoteMain = remote.require("@electron/remote/main");
    remoteMain.enable(win2.webContents);

    // 等待子窗口页面加载完成后发送消息
    win2.webContents.once('did-finish-load', () => {
        win2.webContents.send('print-data', 'test data');
    });
}

模态窗口脚本修改为通过ipcRenderer监听通道：

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

// 监听主窗口发送的消息
ipcRenderer.on('print-data', (evt, arg) => {
    console.log(arg); // 输出test data
});

方法2：通过主进程中转（更符合Electron规范） #

如果项目后续需要更复杂的IPC逻辑，建议通过主进程中转消息：

1. 主进程代码（main.js）

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    });
    mainWindow.loadFile('view.html');
}

// 监听主窗口发送的转发请求
ipcMain.on('forward-to-modal', (evt, data) => {
    // 获取模态子窗口（假设只有一个模态窗口，或可维护窗口实例）
    const modalWindow = BrowserWindow.getFocusedWindow();
    if (modalWindow && modalWindow.isModal()) {
        modalWindow.webContents.send('print-data', data);
    }
});

app.whenReady().then(createWindow);

2. 主窗口代码（view.js）

const { ipcRenderer } = require('electron');
const remote = require('@electron/remote');

function openPrint() {
    let win2 = new remote.BrowserWindow({
        parent: remote.getCurrentWindow(),
        modal: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    })

    var theUrl = 'file://' + __dirname + '/printer.html'

    win2.loadURL(theUrl);
    const remoteMain = remote.require("@electron/remote/main");
    remoteMain.enable(win2.webContents);

    win2.once("ready-to-show", () => {
        // 向主进程发送转发请求
        ipcRenderer.send('forward-to-modal', 'test data');
    });
}

var myprint = document.getElementById('print-file'); 
myprint.addEventListener('click',openPrint)

3. 模态窗口代码

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

ipcRenderer.on('print-data', (evt, arg) => {
    console.log(arg); // 输出test data
});

注意事项 #

• 确保子窗口页面完全加载后再发送消息，did-finish-load事件比ready-to-show更可靠，因为前者确保页面DOM和脚本已加载完成。
• Electron新版本中建议使用**预加载脚本（preload）**实现IPC，避免直接开启node集成带来的安全风险。

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