如何在Electron Preload文件中设置模块级变量跟踪子表单ID

核心原因 #

你写的代码本身逻辑没有问题，preload内部的setformId和checkFormId本身可以正常访问模块级变量formid，绝大多数情况下失效是因为没有将preload上下文的方法暴露给渲染进程的执行上下文。

Electron默认开启contextIsolation（上下文隔离），preload脚本运行在独立的沙箱上下文，你在preload里声明的变量、方法默认和渲染层业务代码的上下文完全隔离，渲染层调用不到preload里的方法，自然看起来像功能失效。

修复方案 #

1. 暴露preload方法到渲染层 #

修改你的preload文件，通过contextBridge将需要对外暴露的方法挂载到全局window对象上：

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

// 模块级变量，每个preload实例独有的存储空间，多子窗口实例互不干扰
let formid = 1;

const setformId = async (formi) => {
    formid = formi;
}

const checkFormId = () => {
    return formid;
}

// 对外暴露API
contextBridge.exposeInMainWorld('formUtils', {
  setformId: setformId,
  checkFormId: checkFormId
})

2. 渲染层正确调用API #

在子表单的业务代码中，通过暴露的全局对象调用方法即可：

// 设置formid
await window.formUtils.setformId(1001);
// 读取formid
console.log(window.formUtils.checkFormId()); // 输出1001

可选优化：父窗口主动传值 #

如果是父窗口打开子表单时就需要指定formid，不需要渲染层主动调用，可通过IPC通信实现自动赋值：

1. 父窗口代码：

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

// 每个子表单创建独立的窗口实例，preload上下文独立不会互相干扰
const childForm = new BrowserWindow({
  webPreferences: {
    preload: '你的preload文件绝对路径',
    contextIsolation: true, // 不要关闭上下文隔离
    nodeIntegration: false
  }
})

childForm.loadURL('子表单的页面地址');
// 等页面加载完成后再发送formid
childForm.webContents.on('did-finish-load', () => {
  childForm.webContents.send('init-form-id', 2002);
})

2. preload里监听初始化消息：

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

let formid = 1;

// 监听父窗口传来的formid自动赋值
ipcRenderer.on('init-form-id', (_, newId) => {
  formid = newId;
})

const checkFormId = () => {
  return formid;
}

contextBridge.exposeInMainWorld('formUtils', {
  checkFormId: checkFormId
})

注意事项 #

• 不要关闭contextIsolation配置，会带来严重的安全风险
• 如果你复用同一个BrowserWindow实例加载不同子表单，preload只会初始化一次，需要每次加载新表单时主动调用setformId更新值，避免变量复用
• 禁止直接把formid变量暴露到渲染层，必须通过封装的get/set方法操作，避免上下文隔离失效

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