Electron Browser Window

BrowserWindow

The basic usage of BrowserWindow is as follows:

• Wait for the ready event

• Initialize the object with window size and necessary security options
• Load an index

const { app, BrowserWindow } = require('electron');
const path = require('path');

var win;

app.on('ready', () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, 'preload.js'),
    }
  });

  win.loadFile(path.join(__dirname, 'index.html'));

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

Graceful Load

For large index pages, loading may be visible. To wait for rendering to complete before showing the window, listen for the ready-to-show event.

const { BrowserWindow } = require('electron');

const win = new BrowserWindow({ show: false });

win.once('ready-to-show', () => {
  win.show();
});

Set a background color to show as a placeholder.

const { BrowserWindow } = require('electron');

const win = new BrowserWindow({ backgroundColor: '#ffffff' });

Child and Modal Windows

See also

Electron API for BrowserWindow

CategoryRicottone