Electron.js动态表格按钮点击报错：getEmail is not defined

错误原因 #

这个错误是因为Electron默认开启上下文隔离（Context Isolation），Preload脚本运行在独立的上下文环境中，里面定义的函数不会自动挂载到渲染进程的window对象上，所以渲染进程直接调用getEmail会找不到该函数。

解决步骤 #

1. 在Preload.js中通过contextBridge暴露API #

修改你的Preload.js，使用contextBridge将需要暴露的函数挂载到渲染进程的全局对象上：

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

// 暴露给渲染进程的API
contextBridge.exposeInMainWorld('electronAPI', {
  getEmail: (email) => ipcRenderer.send('handle-customer-email', email),
  renderCustomers: () => {
    // 你的renderCustomers函数逻辑
  }
});

2. 渲染进程中通过全局API调用函数 #

生成表格按钮时，不要直接调用getEmail，而是通过window.electronAPI访问：

// 示例：动态生成表格行的代码
function createCustomerRow(customer) {
  const row = document.createElement('tr');
  
  // 添加其他列（比如姓名、ID等）
  const nameCell = document.createElement('td');
  nameCell.textContent = customer.name;
  row.appendChild(nameCell);

  // 邮箱列
  const emailCell = document.createElement('td');
  emailCell.textContent = customer.email;
  row.appendChild(emailCell);

  // 按钮列
  const btnCell = document.createElement('td');
  const getEmailBtn = document.createElement('button');
  getEmailBtn.textContent = 'Get Customer Email';
  
  // 点击事件中通过electronAPI调用getEmail
  getEmailBtn.addEventListener('click', () => {
    window.electronAPI.getEmail(customer.email);
  });
  
  btnCell.appendChild(getEmailBtn);
  row.appendChild(btnCell);

  return row;
}

3. 主进程（main.js）监听IPC事件 #

确保main.js中监听Preload发送的IPC事件，处理邮箱数据：

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

// 监听来自渲染进程的邮箱请求
ipcMain.on('handle-customer-email', (event, email) => {
  console.log('获取到客户邮箱:', email);
  // 这里添加你的业务处理逻辑（比如保存、发送等）
});

4. 检查BrowserWindow配置 #

创建窗口时，确保webPreferences的配置正确（默认值已经符合要求，但显式声明更清晰）：

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

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true, // 必须开启，安全默认
    nodeIntegration: false // 必须关闭，禁止渲染进程直接访问Node.js API
  }
});

额外注意点 #

• 不要关闭contextIsolation来解决问题，这会带来安全风险，Electron推荐始终开启上下文隔离。
• Preload脚本中只能使用Electron提供的API（如ipcRenderer、contextBridge）和Node.js的部分核心模块，不能直接操作DOM，DOM操作要放在渲染进程脚本中。

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