Main.js
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
app.on('ready', createWindow);
function createWindow () {
// Create the browser window.
win = new BrowserWindow();
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file:',
slashes: true
}));
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
win = null;
});
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is mon for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On macOS it's mon to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
</head>
<body>
<h1>Hello !</h1>
<button id="resizeBtn">Resize</button>
</body>
</html>
I want that if user click on button ,then a function should trig and change the size of main window which is already opened.i know that win.setSize(width,height) can do this but i don't know how to put this in a function.i don't know how to get reference of Button in main.js to add an event listener on that or how to get the current window and apply some operations.i am new to electron !
Thanks
Main.js
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
app.on('ready', createWindow);
function createWindow () {
// Create the browser window.
win = new BrowserWindow();
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file:',
slashes: true
}));
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
win = null;
});
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is mon for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On macOS it's mon to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
</head>
<body>
<h1>Hello !</h1>
<button id="resizeBtn">Resize</button>
</body>
</html>
I want that if user click on button ,then a function should trig and change the size of main window which is already opened.i know that win.setSize(width,height) can do this but i don't know how to put this in a function.i don't know how to get reference of Button in main.js to add an event listener on that or how to get the current window and apply some operations.i am new to electron !
Thanks
4 Answers
Reset to default 4Short answer (from mobile): use ipcRender module to send event to main and call the resize method.
Long answer: I cannot find a playground for electron!
// In renderer process (web page).
const {ipcRenderer} = require('electron')
const myResizeBtn = document.getElementById('resizeBtn')
myResizeBtn.addEventListener('click', function () {
ipcRenderer.send('resize-me-please')
})
// in main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-me-please', (event, arg) => {
win.setSize(width,height)
})
Nowadays you can get the current BrowserWindow in code, and resize it like the following:
const {remote} = require('electron');
const win = remote.getCurrentWindow();
let height = 400;
let width = 200;
let animate = false;
win.setSize(width, height, animate);About BrowserWindow.setSize(), it got three params.
- width Integer
- height Integer
- animate Boolean (optional) macOS
You can find more about the BrowserWindow setSize method in the official doc https://www.electronjs/docs/api/browser-window.
use this, this works
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({ useContentSize: true });
const view = new BrowserView();
mainWindow.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 800, height: 600 });
view.setAutoResize({ width: true, height: true });
view.webContents.loadURL("https://youtube.");
}
It works like charm in JS, typescript
<!DOCTYPE html lang="en">
<body>
<script>
function resize() {
var ipc = window.require("electron").ipcRenderer;
ipc.send("resize-window", 400, 200);
}
</script>
<div>
<button onclick="resize()">Reload again</button>
</div>
</body>
</html>