Electron项目中querySelector与addEventListener失效问题排查

• 按钮ID不存在问题：你的HTML中按钮ID为sendBtn，脚本通过document.querySelector("#sendBtn")能正确定位元素，这部分逻辑无错误。

• 核心原因是Electron的安全配置限制：
  从Electron 5版本开始，默认禁用了nodeIntegration（Node.js环境集成）并开启contextIsolation（上下文隔离）。这导致渲染进程中无法直接调用require("electron")，你的脚本里的Electron API调用实际未生效，但由于上下文隔离机制，错误被屏蔽，表现为按钮点击无任何反馈。

解决方案1：临时调整窗口配置（仅适合开发环境） #

在main.js创建BrowserWindow的代码中，修改webPreferences配置：

const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

此方案关闭了Electron的安全隔离机制，不建议在生产环境使用。

解决方案2：使用预加载脚本（推荐生产环境） #

这是Electron官方推荐的安全做法，通过预加载脚本在隔离的上下文中暴露必要API：

1. 创建preload.js文件：

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

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (key, data) => ipcRenderer.send(key, data)
})

2. 在main.js中配置预加载脚本：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 指定预加载脚本路径
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(createWindow)

3. 修改HTML中的脚本代码：

<script>
  let sendBtn = document.querySelector("#sendBtn");
  sendBtn.addEventListener('click',()=>{
    alert("Alert")
    // 通过暴露的API发送消息
    window.electronAPI.sendMessage("key","Gangway Test")
  })
</script>

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