Gestire più finestre
Imparate a creare, coordinare e far comunicare più istanze di BrowserWindow, una competenza fondamentale che si basa direttamente sui fondamenti del processo main e di IPC.
Gestire più finestre è una lezione Electron Desktop App Development gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Electron Desktop App Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Electron Desktop App Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Gestire più finestre» è gratuita?
Sì — il testo completo di «Gestire più finestre» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Electron Desktop App Development, passa a CoddyKit PRO. Il corso Electron Desktop App Development include 4 lezioni in totale.
Cosa imparerò in «Gestire più finestre»?
Imparate a creare, coordinare e far comunicare più istanze di BrowserWindow, una competenza fondamentale che si basa direttamente sui fondamenti del processo main e di IPC. Eserciti Electron Desktop App Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Electron Desktop App Development?
Non è richiesta alcuna esperienza precedente. Electron Desktop App Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Gestire più finestre»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Electron Desktop App Development?
Sì. Ogni lezione Electron Desktop App Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Processo main e processo renderer
- Comunicazione tra processi (IPC)
- Creazione del pacchetto dell’app Electron
- Gestire più finestre