- In the context of Electron.js, there are various events related to windows that you can utilize to interact with and control the behavior of your application's windows.
- ready: This event is emitted when Electron has finished initializing and is ready to create browser windows. It is typically used to create the main window of your application.
app.on('ready', () => {
console.log("ready event fired")
createWindow()
});
- closed: This event is emitted when a window is closed by the user. You can use it to perform necessary cleanup tasks or quit the application when the main window is closed.
win.on('closed', () => {
win = null;
console.log("closed window")
});
- resize: This event is emitted when the window is resized by the user. It can be useful for updating the content/layout based on the new dimensions.
win.on('resize', () => {
const { width, height } = win.getBounds();
console.log(`New window dimensions: ${width}x${height}`);
});
- blur and focus: These events are emitted when the window loses or gains focus, respectively. They can be used to perform specific actions when the window is in or out of focus.
win.on('blur', () => {
console.log('Window lost focus');
});
win.on('focus', () => {
console.log('Window gained focus');
});
- maximize: This event is emitted when the window is maximized by the user. It can be used to update the UI or perform specific actions when the window is maximized.
- minimize: This event is emitted when the window is minimized by the user. It can be used to perform specific actions or show notifications when the window is minimized.
win.on('maximize', () => {
console.log('Window maximized');
});
win.on('minimize', () => {
console.log('Window minimized');
});
- restore: This event is emitted when the window is restored from a minimized or maximized state. It can be used to update the UI or perform actions when the window is restored.
win.on('restore', () => {
console.log('Window restored');
});
- enter-full-screen and leave-full-screen: These events are emitted when the window enters or leaves full-screen mode, respectively. They can be used to update the UI or perform specific actions when the window is in full-screen mode.
win.on('enter-full-screen', () => {
console.log('Window entered full-screen mode');
});
win.on('leave-full-screen', () => {
console.log('Window left full-screen mode');
});
- page-title-updated: This event is emitted when the page title of the window is updated. It can be used to update the application's title bar or perform custom logic when the page title changes.
win.on('page-title-updated', (event, title) => {
console.log(`Page title updated: ${title}`);
});
- move: This event is emitted when the window is moved by the user. It provides the updated window position. You can use it to track the window's position or perform actions based on its new location.
win.on('move', () => {
const [x, y] = win.getPosition();
console.log(`Window moved to (${x}, ${y})`);
});
- show: This event is emitted when the window is shown. It can be useful for performing actions or initializing components when the window becomes visible.
- hide: This event is emitted when the window is hidden. It can be used to perform actions or clean up resources when the window becomes hidden.
const { app, BrowserWindow } = require('electron');
function createWindow() {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
win.webContents.openDevTools(); // Optional: Open DevTools
win.loadFile('public/index.html');
win.once('ready-to-show', () => {
console.log("ready-to-show event fired")
win.show();
});
// Hide the window when the close button is clicked
win.on('close', (event) => {
event.preventDefault(); // Prevent the default close behavior
win.hide(); // Hide the window instead
});
win.on('show', () => {
console.log('Window shown');
});
win.on('hide', () => {
console.log('Window hidden');
setTimeout(() => {
win.show();
}, 5000);
});
}
app.on('ready', () => {
console.log("ready event fired")
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
- did-finish-load: This event is emitted when the window's web page finishes loading. It can be used to execute JavaScript code or perform actions that rely on the loaded content.
win.webContents.on('did-finish-load', () => {
console.log('Page finished loading');
});
- did-fail-load: This event is emitted when the window's web page fails to load. It provides information about the error. You can use it to handle error cases or display error messages to the user. for example load wrong url.
win.webContents.on('did-fail-load', (event, errorCode, errorDescription) => {
console.error(`Page failed to load: ${errorCode} - ${errorDescription}`);
});
- will-resize: This event is emitted before the window is resized. It allows you to prevent the resizing operation or perform additional logic before the resize occurs.
win.on('will-resize', (event, newBounds) => {
console.log("will resize trigger")
// Prevent resizing if the new width is less than 500
if (newBounds.width < 500) {
event.preventDefault();
}
});
- will-move: This event is emitted before the window is moved. It allows you to prevent the move operation or perform additional logic before the move occurs.
win.on('will-move', (event, newBounds) => {
console.log("will move trigged")
// Prevent moving the window beyond specific coordinates
if (newBounds.x < 0 || newBounds.y < 0) {
event.preventDefault();
}
});
- scroll-touch-begin: This event is emitted when a touch gesture begins scrolling within the window. It can be used to handle touch-based scrolling actions or perform custom logic when scrolling starts.
- scroll-touch-end: This event is emitted when a touch gesture finishes scrolling within the window. It can be used to handle touch-based scrolling actions or perform custom logic when scrolling ends.
win.on('scroll-touch-begin', () => {
console.log('Touch scrolling started');
});
win.on('scroll-touch-end', () => {
console.log('Touch scrolling ended');
});
- window-all-closed: Close all electron window then fired.
app.on('window-all-closed', () => {
console.log("all window close")
if (process.platform !== 'darwin') {
console.log("quit window")
app.quit();
}
});
No comments:
Post a Comment