Electron去掉窗口边框并添加关闭按钮的实现步骤

最新推荐文章于 2024-08-06 10:41:20 发布

DDOS防御

最新推荐文章于 2024-08-06 10:41:20 发布

阅读量134

点赞数

分类专栏：网络技术文章标签： electron javascript 前端

原文链接：https://zhujib.com

版权

网络技术专栏收录该内容

141 篇文章 1 订阅

订阅专栏

在Electron中，去掉窗口边框并添加关闭按钮可以通过以下步骤实现：

创建无边框窗口：
在Electron的主进程文件（通常是main.js）中，设置窗口的frame属性为false，以创建一个无边框窗口。

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

app.on('ready', () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 去掉边框
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html');
});

添加自定义窗口控制按钮：
在Electron的渲染进程文件（通常是index.html）中，添加HTML元素来模拟窗口控制按钮（最小化、最大化、关闭）。

<!DOCTYPE html>
<html>
<head>
  <title>无边框窗口</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #controls {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .control {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-left: 5px;
      background-color: #ccc;
      color: white;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="controls">
    <div id="minimize" class="control">-</div>
    <div id="maximize" class="control">□</div>
    <div id="close" class="control">X</div>
  </div>
</body>
<script>
  const { ipcRenderer } = require('electron');

  document.getElementById('minimize').addEventListener('click', () => {
    ipcRenderer.send('minimize');
  });

  document.getElementById('maximize').addEventListener('click', () => {
    ipcRenderer.send('maximize');
  });

  document.getElementById('close').addEventListener('click', () => {
    ipcRenderer.send('close');
  });

  ipcRenderer.on('minimize', () => {
    window.minimize();
  });

  ipcRenderer.on('maximize', () => {
    window.maximize();
  });

  ipcRenderer.on('close', () => {
    window.close();
  });
</script>
</html>

在主进程中处理窗口控制事件：
在main.js中，监听渲染进程发送的窗口控制事件，并执行相应的窗口操作。

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

app.on('ready', () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html');

  ipcMain.on('minimize', () => {
    win.minimize();
  });

  ipcMain.on('maximize', () => {
    if (win.isMaximized()) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  });

  ipcMain.on('close', () => {
    win.close();
  });
});