Gestión de varias ventanas
Aprenda a crear, coordinar y establecer comunicación entre varias instancias de BrowserWindow, una habilidad fundamental que se apoya directamente en los conceptos básicos del proceso principal y de IPC.
Gestión de varias ventanas es una lección gratuita de Electron Desktop App Development en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Electron Desktop App Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Electron Desktop App Development incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Gestión de varias ventanas» es gratis?
Sí — el texto completo de «Gestión de varias ventanas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Electron Desktop App Development, actualiza a CoddyKit PRO. El curso de Electron Desktop App Development incluye 4 lecciones en total.
¿Qué aprenderé en «Gestión de varias ventanas»?
Aprenda a crear, coordinar y establecer comunicación entre varias instancias de BrowserWindow, una habilidad fundamental que se apoya directamente en los conceptos básicos del proceso principal y de… Practicas Electron Desktop App Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Electron Desktop App Development?
No se requiere experiencia previa. Electron Desktop App Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Gestión de varias ventanas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Electron Desktop App Development?
Sí. Cada lección de Electron Desktop App Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Proceso principal frente a proceso de renderizado
- Comunicación entre procesos (IPC)
- Empaquetado de su aplicación Electron
- Gestión de varias ventanas