Re-size electron app window dynamically

user_5183551 0
Viewed 10320

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 common 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 common 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

atom-editor electron javascript
4 Answers

Short 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)
})
user_54237420

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.

  1. width Integer
  2. height Integer
  3. animate Boolean (optional) macOS

You can find more about the BrowserWindow setSize method in the official doc https://www.electronjs.org/docs/api/browser-window.

user_63925220

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.com");
    }
user_161343000

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>
user_111593260
Related