Electron Desktop App Development · Lektion

Mehrere Fenster verwalten

Lektion 4 von 413 Schritte

Mehrere Fenster verwalten ist eine kostenlose Electron Desktop App Development-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Electron Desktop App Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Beantworte es in der interaktiven Lektion

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.

Kostenlos starten

Lerne JavaScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 12
Lektionen: 47

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Mehrere Fenster verwalten“ kostenlos?

Ja — der vollständige Text von „Mehrere Fenster verwalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Electron Desktop App Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mehrere Fenster verwalten“?

Lernen Sie, mehrere BrowserWindow-Instanzen zu erstellen, zu koordinieren und miteinander kommunizieren zu lassen – eine zentrale Fähigkeit, die direkt auf den Grundlagen von Main-Prozess und IPC auf… Du übst Electron Desktop App Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Electron Desktop App Development zu starten?

Keine Vorkenntnisse erforderlich. Electron Desktop App Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Mehrere Fenster verwalten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Electron Desktop App Development-Lektion Code schreiben und ausführen?

Ja. Jede Electron Desktop App Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Electron Desktop App Development