Electron渲染进程与主进程通信异常问题排查及功能咨询

• 主进程：应用的核心控制进程，仅一个，运行在Node.js环境，负责创建窗口、管理系统资源、处理IPC请求，能直接调用Electron的所有核心API（如BrowserWindow、ipcMain）。
• 渲染进程：每个窗口（包括BrowserView）对应一个独立的渲染进程，运行在Chromium浏览器环境，负责渲染HTML/CSS/JS，默认无法访问Node.js或Electron核心API，必须通过**预加载脚本（preload）**暴露的安全接口和主进程通信。
• IPC通信机制：主进程通过ipcMain监听渲染进程发送的事件；渲染进程通过ipcRenderer发送事件，预加载脚本用contextBridge将安全的通信API暴露给渲染进程的全局window对象，避免直接暴露ipcRenderer带来的安全风险。

1. 变量作用域错误：mainWindow是createWindow函数内部的局部变量，app.whenReady()中的ipcMain回调无法访问它，会触发mainWindow is not defined错误。
2. IPC回调参数错位：ipcMain.on的回调函数第一个参数是event对象，第二个才是渲染进程传递的数据，当前代码只写了(title)，导致参数解析错误。
3. BrowserView未配置预加载：主窗口的preload仅作用于自身渲染进程，顶部栏的topBar作为独立BrowserView，未单独配置webPreferences.preload，导致其渲染进程无法访问window.electronAPI。
4. 缺少URL切换的IPC通道：当前仅实现了设置标题的测试逻辑，未添加用于切换BrowserView URL的IPC事件。

index.js #

import { app, BrowserWindow, BrowserView, ipcMain } from "electron";
import * as path from "node:path";
import { dirname } from "node:path";
import { fileURLToPath } from "url";
import { webViewParams, windowParams, topBarParams } from "./variables.js";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

let mainWindow;
let webview;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: windowParams.width,
    height: windowParams.height,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  const webView = new BrowserView();
  mainWindow.addBrowserView(webView);
  webView.setBounds({
    x: webViewParams.x,
    y: webViewParams.y,
    width: windowParams.width - webViewParams.x,
    height: windowParams.height - webViewParams.y,
  });
  webView.webContents.loadURL("https://electronjs.org");

  webview = webView;

  const topBar = new BrowserView({
    webPreferences: {
      // 给topBar配置预加载脚本
      preload: path.join(__dirname, "preload.js"),
    },
  });
  mainWindow.addBrowserView(topBar);
  topBar.setBounds({
    x: topBarParams.x,
    y: topBarParams.y,
    width: topBarParams.width,
    height: topBarParams.height,
  });

  topBar.webContents.loadFile("./ui/topBar/topBar.html");
  topBar.setAutoResize({ width: true, height: false });

  mainWindow.on("resize", function () {
    let size = mainWindow.getSize();
    windowParams.width = size[0];
    windowParams.height = size[1];
    webView.setBounds({
      x: webViewParams.x,
      y: webViewParams.y,
      width: windowParams.width - webViewParams.x,
      height: windowParams.height - webViewParams.y,
    });
  });
};

app.whenReady().then(() => {
  // 修正set-title事件的回调参数
  ipcMain.on("set-title", (event, title) => {
    mainWindow.setTitle(title);
  });

  // 添加切换URL的IPC监听
  ipcMain.on("load-url", (event, url) => {
    // 简单校验URL格式，确保包含http/https前缀
    const validUrl = url.startsWith("http") ? url : `https://${url}`;
    webview.webContents.loadURL(validUrl);
  });

  createWindow();

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

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

preload.js #

import { contextBridge, ipcRenderer } from "electron/renderer";

contextBridge.exposeInMainWorld("electronAPI", {
  setTitle: (title) => ipcRenderer.send("set-title", title),
  // 添加加载URL的API
  loadUrl: (url) => ipcRenderer.send("load-url", url),
});

topBar.js #

let urlInput = document.querySelector(".url");
let btnRefresh = document.querySelector(".refresh");

urlInput.addEventListener("keypress", (event) => {
  if (event.key === "Enter") {
    const inputUrl = urlInput.value.trim();
    if (inputUrl) {
      // 先测试设置标题
      window.electronAPI.setTitle(inputUrl);
      // 再触发URL切换
      window.electronAPI.loadUrl(inputUrl);
    }
  }
});

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