Electron中window/document未定义：JQuery点击事件绑定失效求助

看起来你踩了Electron里一个很常见的坑——把渲染进程的代码写到了主进程里。主进程（也就是你当前写的这个入口文件）运行在Node.js环境中，没有浏览器的window和document对象，所以直接在这里用jQuery或者操作DOM肯定会报错。

问题根源拆解 #

• 你写的$('#clsbtn').bind('click', clsApp)和document.querySelector('#clsbtn')都是操作页面DOM的代码，这些代码只能在渲染进程（也就是加载的index.html对应的页面环境）里运行。
• 主进程的职责是管理应用生命周期、创建窗口、处理菜单这些系统级操作，不能直接碰页面DOM。

分步修复方案 #

1. 修正主进程代码（入口文件，比如main.js）

把主进程里不属于它的代码删掉，只保留应用初始化、窗口创建、菜单配置的逻辑：

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

let win

function createWindow() {
  win = new BrowserWindow({
    name: "AtikuDesk",
    width: 396,
    height: 356,
    frame: false,
    transparent: true,
    toolbar: false,
    // 针对新版本Electron的配置：如果要在渲染进程用Node模块，需开启以下项
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      // 更安全的方案是用preload脚本，后面会补充说明
    }
  })

  win.loadFile('assets/index.html')
  win.webContents.openDevTools()

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', () => {
  createWindow()
  // 把菜单创建放在app ready之后，确保Menu API正常可用
  const menuarr = [
    {
      label: 'Home',
      submenu: [
        { label: 'About App' },
        { label: 'view statistics' },
        { label: 'get help' }
      ]
    },
    {
      label: 'Exit',
      click() { app.quit() }
    }
  ];
  const menu = Menu.buildFromTemplate(menuarr);
  Menu.setApplicationMenu(menu);
})

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

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

// 监听渲染进程发来的退出请求
ipcMain.on('quit-app', () => {
  app.quit();
})

2. 创建独立的渲染进程脚本（比如assets/renderer.js）

所有和页面交互、DOM操作的代码都放到这里，包括jQuery的引入和点击事件绑定：

// 引入jQuery
window.$ = require('jquery')(window);

// 定义关闭应用的函数：渲染进程不能直接调用app.quit()，需通过IPC通知主进程
function clsApp(e) {
  const { ipcRenderer } = require('electron');
  ipcRenderer.send('quit-app');
}

// 绑定关闭按钮的点击事件
$('#clsbtn').on('click', clsApp);

3. 在index.html中引入渲染脚本

确保你的assets/index.html里引入了这个脚本：

<!-- 假设你的页面里有这个关闭按钮 -->
<button id="clsbtn">关闭应用</button>

<!-- 在页面末尾引入渲染脚本 -->
<script src="renderer.js"></script>

更安全的进阶方案：用Preload脚本 #

如果你的Electron版本较新，不建议开启nodeIntegration: true（存在安全风险），可以用preload脚本暴露需要的API：

1. 创建assets/preload.js：

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

// 向渲染进程安全暴露API
contextBridge.exposeInMainWorld('electronAPI', {
  quitApp: () => ipcRenderer.send('quit-app')
})

2. 修改BrowserWindow的webPreferences配置：

webPreferences: {
  preload: path.join(__dirname, 'assets/preload.js'), // 路径要对应你的文件位置
  contextIsolation: true, // 默认开启，更安全
  nodeIntegration: false
}

3. 修改renderer.js：

window.$ = require('jquery')(window);

function clsApp(e) {
  // 调用preload暴露的安全API
  window.electronAPI.quitApp();
}

$('#clsbtn').on('click', clsApp);

这样既保证了应用安全，又能正常实现按钮关闭功能。

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