Electron 无边框窗口：IPC 通信实现自定义关闭、最小化、最大化按钮

// main.js 或 index.js

const { app, BrowserWindow, ipcMain } = require('electron');
let applicationWindow; // 全局变量，用于存储 BrowserWindow 实例

function createWindow() {
    applicationWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false, // 设置为无边框窗口
        webPreferences: {
            // 注意：直接开启 nodeIntegration: true 和 contextIsolation: false 存在安全风险
            // 推荐使用预加载脚本 (preload) 和 contextIsolation: true
            nodeIntegration: true, // 允许渲染进程使用 Node.js API (出于示例简化，实际项目中应谨慎)
            contextIsolation: false, // 关闭上下文隔离 (出于示例简化，实际项目中应谨慎)
            // preload: path.join(__dirname, 'preload.js') // 如果使用 preload 脚本，则应在此配置
        }
    });

    applicationWindow.loadFile('index.html');

    // 其他窗口事件处理...
}

app.whenReady().then(createWindow);

// 监听渲染进程发送的关闭、最小化、最大化消息
ipcMain.on("CLOSE-APP", (event) => {
    if (applicationWindow) {
        applicationWindow.close();
    }
});

ipcMain.on("MINIMIZE-APP", (event) => {
    if (applicationWindow) {
        applicationWindow.minimize();
    }
});

ipcMain.on("MAXIMIZE-APP", (event) => {
    if (applicationWindow) {
        // 检查窗口是否已最大化，以便在最大化和恢复之间切换
        if (applicationWindow.isMaximized()) {
            applicationWindow.unmaximize();
        } else {
            applicationWindow.maximize();
        }
    }
});

// 其他主进程事件处理...

<!-- index.html -->
<div class="title-bar">
    <button id="minimize-btn">_</button>
    <button id="maximize-btn">口</button>
    <button id="close-btn">X</button>
</div>
<!-- 其他内容 -->
<script src="renderer.js"></script>

// renderer.js

const { ipcRenderer } = require('electron'); // 引入 ipcRenderer 模块

document.addEventListener('DOMContentLoaded', () => {
    // 获取按钮元素
    const closeBtn = document.getElementById('close-btn');
    const minimizeBtn = document.getElementById('minimize-btn');
    const maximizeBtn = document.getElementById('maximize-btn');

    // 添加点击事件监听器
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            ipcRenderer.send("CLOSE-APP");
        });
    }

    if (minimizeBtn) {
        minimizeBtn.addEventListener('click', () => {
            ipcRenderer.send("MINIMIZE-APP");
        });
    }

    if (maximizeBtn) {
        maximizeBtn.addEventListener('click', () => {
            ipcRenderer.send("MAXIMIZE-APP");
        });
    }
});

// 如果您倾向于使用 jQuery，代码会更简洁：
// $(document).ready(() => {
//     $('#close-btn').on('click', () => {
//         ipcRenderer.send("CLOSE-APP");
//     });
//     $('#minimize-btn').on('click', () => {
//         ipcRenderer.send("MINIMIZE-APP");
//     });
//     $('#maximize-btn').on('click', () => {
//         ipcRenderer.send("MAXIMIZE-APP");
//     });
// });

// main.js
const path = require('path');

// ... (其他代码)

function createWindow() {
    applicationWindow = new BrowserWindow({
        // ...
        webPreferences: {
            nodeIntegration: false, // 禁用 Node.js 集成，提高安全性
            contextIsolation: true, // 启用上下文隔离，增强安全性
            preload: path.join(__dirname, 'preload.js') // 指定预加载脚本的绝对路径
        }
    });
    // ...
}

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 通过 contextBridge.exposeInMainWorld 将 API 暴露给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
    closeApp: () => ipcRenderer.send('CLOSE-APP'),
    minimizeApp: () => ipcRenderer.send('MINIMIZE-APP'),
    maximizeApp: () => ipcRenderer.send('MAXIMIZE-APP')
});

// renderer.js (或直接在 <script> 标签中)

document.addEventListener('DOMContentLoaded', () => {
    const closeBtn = document.getElementById('close-btn');
    const minimizeBtn = document.getElementById('minimize-btn');
    const maximizeBtn = document.getElementById('maximize-btn');

    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            window.electronAPI.closeApp(); // 通过暴露的 API 调用
        });
    }

    if (minimizeBtn) {
        minimizeBtn.addEventListener('click', () => {
            window.electronAPI.minimizeApp();
        });
    }

    if (maximizeBtn) {
        maximizeBtn.addEventListener('click', () => {
            window.electronAPI.maximizeApp();
        });
    }
});