Electron基于IPC、Contextbridge、Preload实现JS传变量到HTML最简示例

你原有代码有几个逻辑和写法错误，下面是可直接运行的纯原生JS实现，无任何额外框架依赖，变量直接渲染到HTML页面，不输出控制台内容。 #

先修正几个基础问题 #

• 原代码preload路径拼接错误，path.join不需要手动加路径分隔符，直接传路径段即可
• 原IPC通信逻辑混乱：单向send无法直接拿到返回值，请求-响应场景用handle/invoke组合写法最简单
• 原窗口尺寸100*100过小，无法正常显示内容，已调整为常规尺寸
• preload上下文和渲染进程上下文默认隔离，不能直接跨上下文访问变量，必须通过contextBridge暴露的方法通信

各文件完整代码 #

main.js（主进程） #

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

app.whenReady().then(main);

let mainWindow;
// 需要跨进程传递的变量定义在主进程
const MyVar = "JUSTSHOWUP!";

async function main() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 200,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            contextIsolation: true,
            nodeIntegration: false
        },
    })
    mainWindow.on("ready-to-show", mainWindow.show);
    mainWindow.loadFile(path.join(__dirname, "index.html"));
}

// 监听渲染进程的取值请求，直接返回目标变量
ipcMain.handle("GetMyVar", () => {
    return MyVar;
})

// MacOS 兼容逻辑
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
})

preload.js（预加载脚本） #

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

const API = {
    // 调用主进程的handle，异步拿到返回值
    GetMyVar: () => ipcRenderer.invoke("GetMyVar")
}

// 把通信方法暴露给渲染进程
contextBridge.exposeInMainWorld("app", API);

index.html（页面入口） #

<html>
    <body>
        <h1 id="MyVar"></h1>
        <!-- 引入渲染进程脚本 -->
        <script src="./renderer.js"></script>
    </body>
</html>

renderer.js（渲染进程脚本） #

// 等DOM加载完成后执行
window.addEventListener("DOMContentLoaded", async () => {
    // 通过preload暴露的方法拿主进程变量
    const varContent = await window.app.GetMyVar();
    // 直接把变量内容插入到页面h1标签中
    document.getElementById("MyVar").textContent = varContent;
})

补充说明 #

如果变量本身就是只在渲染进程用的，完全不需要走IPC，直接在renderer.js里定义变量后操作DOM即可。IPC仅用于主进程和渲染进程的跨进程通信场景，比如调用系统API、读写本地文件等主进程才能执行的操作结果回传给页面。

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