|
Size: 1193
Comment:
|
Size: 1374
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 18: | Line 18: |
| const { app, BrowserWindow } = require("electron"); | const { app, BrowserWindow } = require('electron'); |
| Line 29: | Line 29: |
| preload: filePreload, | preload: 'preload.js', |
| Line 34: | Line 34: |
win.on('closed', () => { win = null; }); |
|
| Line 44: | Line 48: |
| const { BrowserWindow } = require("electron"); | const { BrowserWindow } = require('electron'); |
| Line 56: | Line 60: |
| const { BrowserWindow } = require("electron"); | const { BrowserWindow } = require('electron'); |
| Line 65: | Line 69: |
| ---- == See also == [[https://www.electronjs.org/docs/latest/api/browser-window|Electron API for BrowserWindow]] |
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');
var win;
app.on('ready', () => {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
contextIsolation: true,
nodeIntegration: false,
preload: 'preload.js',
}
});
win.loadFile('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