ElectronJS无边框窗口中实现自定义关闭按钮的方法

假设你用的是Electron（桌面应用无边框场景的主流方案），以下是具体实现方案：

1. 主进程配置（main.js） #

在主进程中创建无边框窗口，并监听渲染进程发来的关闭/最小化指令：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 开启无边框设置
    webPreferences: {
      // Electron 12+ 推荐开启上下文隔离，用预加载脚本做通信桥接
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');

  // 监听关闭指令
  ipcMain.on('window-close', () => {
    mainWindow.close();
  });

  // 监听最小化指令
  ipcMain.on('window-minimize', () => {
    mainWindow.minimize();
  });
}

app.whenReady().then(createWindow);

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

2. 预加载脚本（preload.js） #

为安全实现渲染进程与主进程的通信，用预加载脚本暴露受控API：

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

contextBridge.exposeInMainWorld('windowControls', {
  close: () => ipcRenderer.send('window-close'),
  minimize: () => ipcRenderer.send('window-minimize')
});

3. 分离的渲染进程脚本（windowControls.js） #

创建独立脚本文件，专门处理按钮交互逻辑：

// 获取页面按钮元素
const closeBtn = document.getElementById('close-btn');
const minimizeBtn = document.getElementById('minimize-btn');

// 绑定关闭按钮点击事件
closeBtn.addEventListener('click', () => {
  window.windowControls.close();
});

// 绑定最小化按钮点击事件
minimizeBtn.addEventListener('click', () => {
  window.windowControls.minimize();
});

4. 页面结构（index.html） #

在HTML中添加按钮并引入分离的交互脚本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>无边框窗口示例</title>
  <style>
    /* 自定义窗口控制按钮样式 */
    .window-controls {
      position: fixed;
      top: 12px;
      right: 12px;
      display: flex;
      gap: 8px;
    }
    .control-btn {
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      color: #fff;
    }
    #minimize-btn {
      background-color: #ffbd2e;
    }
    #close-btn {
      background-color: #ff5f57;
    }
    .control-btn:hover {
      opacity: 0.8;
    }
  </style>
</head>
<body>
  <div class="window-controls">
    <button id="minimize-btn" class="control-btn">-</button>
    <button id="close-btn" class="control-btn">×</button>
  </div>

  <!-- 引入分离的交互脚本 -->
  <script src="windowControls.js"></script>
</body>
</html>

关键说明 #

• 将按钮交互逻辑从index.js抽离到windowControls.js，实现代码解耦，便于后续维护
• 通过Electron的IPC机制完成渲染进程与主进程的通信，避免直接操作窗口带来的安全风险
• 如果是普通网页的无边框场景（仅用CSS隐藏浏览器边框），关闭窗口只能调用window.close()，但该方法仅对window.open()创建的窗口有效，桌面应用场景优先使用Electron方案

内容的提问来源于stack exchange，提问作者Aung.S