I'm currently working on a frameless application with ElectronJS where I'm trying to have a parent window handle the dragging, minimize, maximize, and exit, as well as a controller for the child window which will handle all of the content. However, when I set the parent to the main window in my main.js, the content window stays in place when I move the parent.

Below is my main.js:

const electron = require('electron');
const url = require('url');
const path = require('path');

const {app, BrowserWindow, Menu} = electron;

let mainWindow;
let contentWindow;

app.on('ready', function createWindow(){
    //Create window
    mainWindow = new BrowserWindow({
        width: 1280,
        height: 720,
        frame: false
    })
    contentWindow = new BrowserWindow({
        width: 1280,
        height: 720,
        frame: false,
        parent: mainWindow
    })

    //load html for window
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'assets/html/mainWindow.html'),
        protocol:'file:',
        slashes: true
    }));

    contentWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'assets/html/contentWindow.html'),
        protocol:'file:',
        slashes: true
    }));
});

One of the div's in my mainWindow.html has -webkit-app-region: drag; to allow it to act as the top bar like a normal window. Basically I would like this to move both windows.

I'm currently working on a frameless application with ElectronJS where I'm trying to have a parent window handle the dragging, minimize, maximize, and exit, as well as a controller for the child window which will handle all of the content. However, when I set the parent to the main window in my main.js, the content window stays in place when I move the parent.

Below is my main.js:

const electron = require('electron');
const url = require('url');
const path = require('path');

const {app, BrowserWindow, Menu} = electron;

let mainWindow;
let contentWindow;

app.on('ready', function createWindow(){
    //Create window
    mainWindow = new BrowserWindow({
        width: 1280,
        height: 720,
        frame: false
    })
    contentWindow = new BrowserWindow({
        width: 1280,
        height: 720,
        frame: false,
        parent: mainWindow
    })

    //load html for window
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'assets/html/mainWindow.html'),
        protocol:'file:',
        slashes: true
    }));

    contentWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'assets/html/contentWindow.html'),
        protocol:'file:',
        slashes: true
    }));
});

One of the div's in my mainWindow.html has -webkit-app-region: drag; to allow it to act as the top bar like a normal window. Basically I would like this to move both windows.

• javascript
• html
• css
• client
• electron

2 Answers 2

It's like what @Dennis L said, use the move event provided in the docs. I though it only support mac, but i'm using windows. And once i tried it working.

In my case, i'm using getPosition method to keep track of the mainWindow position during move or drag. And then setPosition of the secondWindow with value that came from mainWindow itself.

  mainWindow.on('move', function() {
    let position = mainWindow.getPosition();
    secondWindow.setPosition(position[0], position[1]);
  });

As far as i know that your goal is basically that, what only is supported under macOS with parent and child window Doc, the way i reach that my child moves with the parent, is that i listen on the move event from the parent and recalculate the position for the child. Not the best way but it works.

mainWindow.on("move", function () {"calculate and set new position here"}