Несколько окон

Программа может открыть сколько угодно окон: каждое — отдельный BrowserWindow со своей страницей и своим процессом отрисовки. Сделаем так, чтобы двойной щелчок по заметке открывал её в отдельном окне. Окна создаёт главный процесс, а страница только просит об этом через IPC.

Страница окна заметки

Создайте в корне проекта note.html:

<!-- note.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="styles.css">
    <title>Заметка</title>
  </head>
  <body>
    <p id="note"></p>
    <script src="note.js"></script>
  </body>
</html>

Создание окна

// main.js
function createNoteWindow(index) {
  const noteWin = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  noteWin.loadFile('note.html', { query: { index: String(index) } });
}
 
ipcMain.on('notes:open', (event, index) => {
  createNoteWindow(index);
});

Параметр query добавляет к адресу страницы строку ?index=2. Так новое окно узнаёт, какую заметку показать. Окно использует тот же preload, поэтому ему доступен window.notes.

Скрипт окна заметки

// note.js
const index = Number(new URLSearchParams(location.search).get('index'));
 
window.notes.load().then((notes) => {
  document.querySelector('#note').textContent = notes[index];
  document.title = notes[index];
});

Скрипт читает номер из адреса, загружает заметки и показывает нужную.

Вызов с главной страницы

// preload.js
open: (index) => ipcRenderer.send('notes:open', index),

// renderer.js
list.addEventListener('dblclick', (event) => {
  const li = event.target.closest('li');
  if (li) {
    window.notes.open(Number(li.dataset.index));
  }
});

Двойной щелчок по заметке откроет небольшое окно с её текстом. Можно открыть несколько таких окон одновременно.

Дочерние и модальные окна

Окно «О программе» удобно сделать модальным: пока оно открыто, главное окно недоступно.

// main.js
function createAboutWindow(parent) {
  const about = new BrowserWindow({
    parent,
    modal: true,
    width: 360,
    height: 200,
    resizable: false,
  });
  about.loadFile('about.html');
}

parent делает окно дочерним: оно всегда поверх родителя и закрывается вместе с ним. modal: true блокирует родителя.

Учёт окон

Метод	Что возвращает
`BrowserWindow.getAllWindows()`	Все открытые окна
`BrowserWindow.getFocusedWindow()`	Активное окно или `null`
`BrowserWindow.fromWebContents(event.sender)`	Окно, из которого пришло сообщение IPC

Частая ошибка

Если хранить окно в переменной и обратиться к нему после закрытия, Electron выбросит ошибку Object has been destroyed. Обнуляйте ссылку в событии closed:

// main.js
win.on('closed', () => {
  win = null;
});

и перед использованием проверяйте if (win) или win.isDestroyed().

Спасибо, что читаете!