Electron Desktop App Development · Урок

Управление несколькими окнами

Урок 4 из 413 шагов

«Управление несколькими окнами» — бесплатный урок Electron Desktop App Development на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Electron Desktop App Development, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Electron Desktop App Development содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Beyond a Single Window

Real desktop apps often need multiple windows: a main editor, a settings panel, a preview. The main process owns and tracks all of them.

Creating a Window

Each window is a BrowserWindow instance created in the main process.

const { BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({ width: 600, height: 400 });
  win.loadFile('index.html');
  return win;
}

Keeping References

If you do not keep a reference, the window can be garbage collected. Store windows in a variable or array.

let windows = [];
function track(win) {
  windows.push(win);
  win.on('closed', () => {
    windows = windows.filter(w => w !== win);
  });
}

Parent and Child Windows

You can make one window the parent of another. Child windows move with the parent and can be modal.

new BrowserWindow({
  parent: mainWindow,
  modal: true,
  width: 300,
  height: 200
});

Window-to-Window Messaging

Windows do not share memory. They communicate through the main process using IPC as a relay.

ipcMain.on('to-other', (e, msg) => {
  otherWindow.webContents.send('from-main', msg);
});

Identifying Windows

Each window has a unique id. Use it to target a specific window when relaying messages.

function findWindow(id, list) {
  return list.find(w => w.id === id);
}
console.log(findWindow(2, [{ id: 1 }, { id: 2 }]));

Showing Windows Gracefully

Avoid a white flash by creating windows hidden and showing them once ready.

const win = new BrowserWindow({ show: false });
win.once('ready-to-show', () => win.show());

Managing Focus

Use focus() and the blur event to know which window the user is interacting with, useful for save prompts.

Closing and Cleanup

Listen for close to prompt for unsaved changes, and closed to release references.

win.on('close', (e) => {
  if (hasUnsaved) {
    e.preventDefault();
  }
});

Single Instance Lock

Use app.requestSingleInstanceLock() to focus the existing window instead of opening duplicates.

Coordinating State

Centralize shared state in the main process so every window reads from one source of truth, avoiding drift.

Quick Check

Test your window management knowledge.

Ответь в интерактивном уроке

Recap

You learned to create and track multiple BrowserWindow instances, manage parent/child relationships, relay messages via the main process, and clean up references properly.

Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 12
Уроки: 47

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Управление несколькими окнами» бесплатный?

Да — полный текст урока «Управление несколькими окнами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Electron Desktop App Development, подпишись на CoddyKit PRO. Курс Electron Desktop App Development содержит 4 уроков всего.

Чему я научусь в уроке «Управление несколькими окнами»?

Научитесь создавать, координировать и обеспечивать взаимодействие между несколькими экземплярами BrowserWindow — это важный навык, который непосредственно опирается на основы основного процесса и IPC. Ты практикуешь Electron Desktop App Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Electron Desktop App Development?

Предыдущий опыт не требуется. Electron Desktop App Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Управление несколькими окнами»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Electron Desktop App Development?

Да. Каждый урок Electron Desktop App Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Electron Desktop App Development