Electron调用getFocusedWindow().close()失效，自定义标题栏关闭按钮无响应

• 高版本Electron适配问题（最常见）：Electron 14及以上版本已经正式移除内置的remote模块，需要按如下步骤调整：
  1. 安装独立维护的remote依赖包：

  npm install @electron/remote
  

  2. 主进程中初始化remote并给对应窗口开启权限：

  // 主进程代码
  const { app, BrowserWindow } = require('electron')
  require('@electron/remote/main').initialize()
  
  let mainWindow
  function createWindow() {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      frame: false, // 自定义标题栏必须关闭原生边框
      webPreferences: {
        nodeIntegration: true, // 允许渲染进程调用Node API
        contextIsolation: false, // 关闭上下文隔离才能在渲染层直接require
        enableRemoteModule: true // 开启remote模块权限
      }
    })
    // 给当前窗口开启remote权限
    require('@electron/remote/main').enable(mainWindow.webContents)
    mainWindow.loadFile('index.html') // 替换为你的HTML文件路径
  }
  app.whenReady().then(createWindow)
  

  3. 修改渲染进程的关闭按钮逻辑：

  document.getElementById("close-btn").addEventListener("click", function(e) {
      const remote = require('@electron/remote');
      // 用getCurrentWindow比getFocusedWindow更稳定，避免焦点丢失时拿不到窗口实例
      remote.getCurrentWindow().close();
  });
  

• 低版本Electron（14以下）配置问题：检查主进程创建BrowserWindow时的webPreferences配置，必须同时开启nodeIntegration: true、enableRemoteModule: true、contextIsolation: false三个参数才能正常使用remote。
• DOM绑定失败问题：如果JS代码放在head标签内或者在DOM加载完成前执行，getElementById会拿不到按钮元素导致事件绑定失败，可以将绑定逻辑包裹在DOM加载完成事件中：

  document.addEventListener('DOMContentLoaded', () => {
    // 此处写按钮点击事件绑定逻辑
  })
  

  也可以直接将JS脚本放到body标签的末尾执行。
• 点击事件被拦截问题：检查CSS样式是否有其他元素层级高于关闭按钮，导致点击事件无法触发到按钮上，可临时在点击回调中加console.log验证事件是否正常触发，也可以给关闭按钮添加z-index: 9999样式提升层级。

更推荐的实现方案 #

remote模块存在安全隐患且性能损耗较高，更推荐使用IPC通信实现窗口控制，不需要依赖remote模块：

1. 渲染进程代码：

const { ipcRenderer } = require('electron')
document.getElementById("close-btn").addEventListener("click", () => {
  ipcRenderer.send('close-window')
})

2. 主进程代码：

const { ipcMain, BrowserWindow } = require('electron')
ipcMain.on('close-window', (event) => {
  // 拿到触发消息的窗口实例直接关闭
  BrowserWindow.fromWebContents(event.sender).close()
})

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