Electron菜单点击操作DOM报错：document未定义的问题

你遇到的ReferenceError: document is not defined问题，核心原因是Electron的主进程和渲染进程是完全隔离的运行环境：

• 主进程（main.js）运行在Node.js环境中，没有浏览器的DOM API（比如document）；
• 渲染进程（也就是你的index.html对应的窗口）才是浏览器环境，能访问DOM。

你的代码错误在于把需要操作DOM的funcao()写在了主进程的main.js里，还试图在菜单点击（主进程事件）里直接调用它，这肯定会报错。

下面是具体的修复方案，分两种常用方式：

方式一：用IPC进程间通信（推荐，符合Electron规范） #

步骤1：拆分代码到渲染进程脚本 #

首先创建一个renderer.js文件，把操作DOM的函数放在这里（渲染进程专属）：

// renderer.js
function funcao() {
  document.getElementById("campo").value = document.getElementById("url").value;
}

// 监听来自主进程的触发信号
const { ipcRenderer } = require('electron');
ipcRenderer.on('run-funcao', () => {
  funcao();
});

然后修改你的index.html，移除对main.js的引用（主进程脚本不能在渲染进程里加载），换成renderer.js：

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Electron</title>
</head>
<body>
  <input type="text" name="campo" id="campo" value="">
  <button type="button" name="funcao" onclick="funcao()">Função</button>
  <br /><br />
  <input type="text" name="url" id="url">

  <script src="renderer.js"></script>
</body>
</html>

步骤2：主进程通过IPC触发函数 #

修改main.js，在菜单点击事件里向渲染进程发送信号：

const { app, BrowserWindow, Menu, ipcMain } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // 新手暂时关闭，后续可学习preload脚本替代
    }
  });

  mainWindow.loadFile('index.html');

  // 构建菜单
  const menuTemplate = [
    {
      label: 'Função',
      click() {
        // 向渲染进程发送触发信号
        mainWindow.webContents.send('run-funcao');
      }
    }
  ];

  const appMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(appMenu);
}

app.whenReady().then(createWindow);

方式二：直接执行渲染进程代码（快速简单） #

如果你只是想要快速实现功能，可以直接让主进程命令渲染进程执行funcao()函数，不需要IPC：

修改main.js的菜单部分：

// main.js中菜单的click事件
{
  label: 'Função',
  click() {
    // 让渲染进程直接执行指定的JavaScript代码
    mainWindow.webContents.executeJavaScript('funcao()');
  }
}

这种方式更简洁，但适合简单场景，复杂逻辑还是推荐IPC方式。

注意事项 #

• 如果你使用的是Electron 12及以上版本，默认开启了contextIsolation，如果需要在渲染进程里使用require('electron')，需要暂时关闭contextIsolation: false，或者使用preload脚本（更安全的做法，适合进阶学习）。
• 永远记住：主进程不能直接操作DOM，所有DOM操作必须放在渲染进程里。

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