Electron IpcRenderer主进程发往HTML的数据页面重加载后无法接收

问题核心原因 #

1. IPC监听器泄漏：每次调用window.api.receive时都会通过ipcRenderer.on注册永久监听器，页面跳转后旧页面的监听器不会自动销毁，既会导致内存泄漏，也会干扰新页面的事件接收。
2. 事件发送时序不匹配：登出后立刻跳转页面同时触发client.login()，二维码生成事件极有可能在login.html还未完成加载、还未注册fromMain频道监听器时就已经发出，新页面自然接收不到提前发送的事件。

解决方案 #

1. 修改preload.js清理残留监听器

每次注册新监听器前先移除同频道的所有旧监听器，避免残留干扰：

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

contextBridge.exposeInMainWorld("api", {
    send: (channel, data) => {
        let validChannels = ["toMain"];
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receive: (channel, func) => {
        let validChannels = ["fromMain"];
        if (validChannels.includes(channel)) {
            // 移除该频道之前的所有残留监听器
            ipcRenderer.removeAllListeners(channel);
            ipcRenderer.on(channel, (_, ...args) => func(...args));
        }
    }
});

2. 调整登出流程避免时序错位

修改主进程登出逻辑，等login页面加载完成后再触发登录流程，同时调整前端登出逻辑，等主进程确认登出完成后再跳转页面：

• 主进程main.js修改部分：

ipcMain.on("toMain", (_, data) => {
    let { event, args } = data;
    switch (event) {
        case "logout":
            client.logout().then(() => {
                // 通知渲染进程登出完成，可以跳转
                win.webContents.send("fromMain", {
                    event: "onLogoutSuccess"
                });
                // 等页面跳转完成加载后再执行登录
                win.webContents.once('did-finish-load', () => {
                    client.login();
                });
            });
            break;
        default:
            break;
    }
});

• index.html登出逻辑修改部分：

$("#logoutBtn").click((event) => {
    event.preventDefault();
    // 先监听登出完成事件再跳转
    window.api.receive("fromMain", (data) => {
        if(data.event === "onLogoutSuccess") {
            window.location.replace("login.html");
        }
    });
    window.api.send("toMain", {
        event: "logout",
        args: {}
    });
});

3. 优化主进程二维码发送逻辑（可选，兼容性更强）

增加页面加载状态判断，确保二维码事件发送时页面监听器已经注册完成：

client.addListner("qr", (url) => {
    if (!client.isReady()) {
        let logoFilePath = path.join(__dirname, "views", "images", "logo.png");
        const sendQr = () => {
            win.webContents.send("fromMain", {
                event: "onQr",
                args: {
                    url: url,
                    logoFilePath: logoFilePath
                }
            });
        };
        // 页面加载中就等加载完成再发，否则直接发送
        if (win.webContents.isLoading()) {
            win.webContents.once('did-finish-load', sendQr);
        } else {
            sendQr();
        }
    }
});

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