CODEWITHSUNDEEP
electron
Steve Carey
Steve Carey

Reputation: 3024

How can I access multiple instances of mainWindow in an Electron App?

How do I create a functioning electron app with multiple instances of the mainWindow? Here's a very simple app with a mainWindow that just has two buttons. One to create a new mainWindow instance, and one to close the current window. 

// main.js
const { app, ipcMain, BrowserWindow } = require('electron')

let mainWindow;

function main () {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 400,
    tabbingIdentifier: 'todoTab',
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('renderer/index.html');
  mainWindow.once('ready-to-show', () => {
    mainWindow.setTitle("Todo-" + mainWindow.id)
    mainWindow.show();
  })
  mainWindow.mergeAllWindows();
}

app.on('ready', main);

ipcMain.on('newListWindow', main);

ipcMain.on('closeWindow', function(event){
  mainWindow.close();
});

The HTML file with the two buttons (abbreviated to just the body element)

// renderer/index.html
<body>
  <h1 class="text-center">Todo List</h1>
  <button id="new-list-btn">New Todo List</button>
  <button id="close-btn">Close List</button>
  <script src="./index.js"></script>
</body>

The ipcRenderer. Listens for the button clicks and sends a message to main.js.

// renderer/index.js
const { ipcRenderer } = require('electron')

document.getElementById('new-list-btn').addEventListener('click', () => {
  ipcRenderer.send('newListWindow');
});

document.getElementById('close-btn').addEventListener('click', () => {
  ipcRenderer.send('closeWindow');
});

The above code will create multiple Todo windows and display them on different tabs. Each list title (Todo-1, Todo-2, etc) is displayed. The problem is, the last one opened is the only active one. So if I open three todos, then go to any one of them and click the close button, only the third window will close, regardless of which one I was in. Then the other two will throw an error if I try to close them saying the object was destroyed. Which makes sense. So how do I code this so if that whichever instance tab I am in is the one that I close. And when I close it the next tab I am in becomes the valid mainWindow object?

Upvotes: 1

Views: 1993

Answers (2)

Steve Carey
Steve Carey

Reputation: 3024

Pergy's answer works as requested but I'll post this answer as well since it's what I'm actually using, and there's no other documentation on how to do this that I could find. The difference is small but this seems more direct:

ipcMain.on('closeWindow', function(event) {
  mainWindow = BrowserWindow.getFocusedWindow();
  mainWindow.close();
})

Upvotes: 0

pergy
pergy

Reputation: 5531

You may want to deal only with the focused BrowserWindow in 'closeWindow' callback

Use BrowserWindow.getFocusedWindow static method 

ipcMain.on('closeWindow', function(event) {
  const current = BrowserWindow.getFocusedWindow()
  if (current) current.close()
})

Upvotes: 3

Related Questions