Electron无边框窗口（最小化、最大化、关闭、拖动）

最新推荐文章于 2025-04-15 13:48:41 发布

weixin_46852620

最新推荐文章于 2025-04-15 13:48:41 发布

阅读量2k

点赞数 2

分类专栏：学习electron

本文链接：https://blog.youkuaiyun.com/weixin_46852620/article/details/111869086

版权

学习electron 专栏收录该内容

19 篇文章

订阅专栏

博客介绍了无边框窗口的创建方法，在BrowserWindow的options中将frame设置为 false 即可创建，还可通过设置 transparent 选项为 true 使窗口透明。此外，还提及了可拖拽区、最小化、最大化、关闭等操作，涉及渲染进程和主进程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、无边框窗口

要创建无边框窗口，只需在BrowserWindow的options中将frame设置为 false，通过将 transparent 选项设置为 true, 还可以使无框窗口透明

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  frame:false,
  transparent：true
})

二、可拖拽区

.titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

最小化，最大化，关闭

渲染进程

let ipcRenderer = require('electron').ipcRenderer;

var max = document.getElementById('max');
if (max) {
    max.addEventListener('click', () => {
        //发送最大化命令
        ipcRenderer.send('window-max');
        //最大化图形切换
        if (max.getAttribute('src') == 'images/max.png') {
            max.setAttribute('src', 'images/maxed.png');
        } else {
            max.setAttribute('src', 'images/max.png');
        }
    })
}

var min = document.getElementById('min');
if (min) {
    min.addEventListener('click', () => {
        //发送最小化命令
        ipcRenderer.send('window-min');
    })
}

var close = document.getElementById('close');
if (close) {
    close.addEventListener('click', () => {
        //发送关闭命令
        ipcRenderer.send('window-close');
    })
}

ipcRenderer.on('main-window-max', (event) => {
	max.classList.remove('icon-max');
	max.classList.add('icon-maxed');
});
ipcRenderer.on('main-window-unmax', (event) => {
	max.classList.remove('icon-maxed');
	max.classList.add('icon-max');
});

主进程

let ipcMain = require('electron').ipcMain;
//接收最小化命令
ipcMain.on('window-min', function() {
    mainWindow.minimize();
})
//接收最大化命令
ipcMain.on('window-max', function() {
    if (mainWindow.isMaximized()) {
        mainWindow.restore();
    } else {
        mainWindow.maximize();
    }
})
//接收关闭命令
ipcMain.on('window-close', function() {
    mainWindow.close();
})

//监听窗口的最大化操作，然后发送命令给渲染进程
mainWindow.on('maximize', function () {
 mainWindow.webContents.send('main-window-max');
})
mainWindow.on('unmaximize', function () {
  mainWindow.webContents.send('main-window-unmax');
})