Создание окна без рамки

Если при создании окна указать опцию frame со значением false, то окно будет создано без заголовка, меню и рамки. Чтобы в этом случае можно было перемещать окно по экрану, следует создать элемент и прописать для него стиль:

-webkit-app-region: drag;

Давайте создадим окно без рамки. Добавим возможность закрытия окна при нажатии кнопки и создадим элемент с помощью которого можно перемещать окно по экрану. Содержимое файла main.js приведено в листинге 2.1, файла index.htm — в листинге 2.2, файла style.css — в листинге 2.3, а файла test.js — в листинге 2.4.

Листинг 2.1. Содержимое файла C:\book\e1\main.js

const { app, BrowserWindow, ipcMain } = require('electron');
let win = null;
function createWindow() {
   win = new BrowserWindow({
      title: 'Окно без рамки',
      width: 500,
      height: 300,
      frame: false,
      webPreferences: {
         nodeIntegration: true,
         contextIsolation: false
      }
   });
   win.loadFile('index.html');
   win.on('closed', () => {
      win = null;
   });
}
app.whenReady().then( () => {
   createWindow();
   app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
      }
   });
} );
app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
      app.quit();
   }
});
ipcMain.on('event-win-close', (e) => {
   if (win) win.close();
});

Листинг 2.2. Содержимое файла C:\book\e1\index.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'">
   <link rel="stylesheet" href="css/style.css">
   <title>Окно без рамки</title>
</head>
<body>
   <div id="divTitle"></div>
   <h1>Окно без рамки</h1>
   <button type="button" id="btnClose">Закрыть окно</button>
   <script src="test.js"></script>
</body>
</html>

Листинг 2.3. Содержимое файла C:\book\e1\css\style.css

#divTitle {
   width: 100%;
   height: 30px;
   padding: 0;
   margin: 0;
   background-color: rgb(173, 100, 5);
   -webkit-app-region: drag;
}

Листинг 2.4. Содержимое файла C:\book\e1\test.js

const { ipcRenderer } = require('electron');
document.getElementById('btnClose').addEventListener('click', () => {
   ipcRenderer.send('event-win-close');
});