Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

316
Visualizações
Electron: How to share BrowserWindow instance across multiple files?

I want to have a js file let's say window.js that is responsible for creating and exporting an unique instance of BrowserWindow so that I can reuse this instance across multiple js files.

Until now I tried this:

    const { app, BrowserWindow } = require("electron");
    
    let window = null;
   
    const createWindow = () => {
      if (window) return;
      window = new BrowserWindow({
      minWidth: 820,
      minHeight: 620,
      width: 820,
      height: 620,
      resizable: false,
      webPreferences: {
        preload: path.join(__dirname, "preload.js"),
        enableRemoteModule: true,
      },
     });
     window.removeMenu();
    };

app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
      //   showRecorderWindow();
    }
  });
});

module.exports = {
  window
}

However when I require the window using: const { window } = require("./window.js"); the window variable is always null. Is there any way to achieve this?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

The use of "setters" and "getters" will resolve you problem.

Your main.js file should require your window.js module and create() the window.

If any other Javascript file(s) requires access to the window instance then within that file you can require the window.js module and then just call the get() function.


Within your main.js (main thread) file:

  1. require the window.js file which contains the create and get functions.
  2. Declare the window variable so it is not garbage collected.
  3. On electronApp.on('ready', ...) allocate to the window variable the created window instance.
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;

const nodePath = require("path");

const appWindow = require(nodePath.join(__dirname, 'window'));

// Prevent garbage collection
let window;

electronApp.on('ready', () => {
    window = appWindow.create();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        appWindow.create();
    }
});

Within your window.js (main thread) file:

  1. Create 2 functions - One to create the window and one to get the window instance.
  2. Export both functions for use elsewhere.
const electronBrowserWindow = require('electron').BrowserWindow;

const nodePath = require('path');

let window; // Top level scope within the module

function create() {
    window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        .then(() => { window.show(); });

    return window; // Return the instance of the window
}

function get() {
    return window; // Return the instance of the window
}

// Export the publicly available functions.
module.exports = {create, get};

And finally, when you need to refer to the instance of window in another.js (main thread) file:

  1. require the window.js file.
  2. Call the get() function.
const nodePath = require('path');

const appWindow = require(nodePath.join(__dirname, 'window'));

let window = appWindow.get();

This is really handy when you need to use a specific window as a parent to a child window or dialog.

about 4 years ago · Juan Pablo Isaza Relatório

0

When you use module.exports = <object>, you are creating a copy of the object with no link back to the original object. In your code, the module.exports section is run before the window is created in the app.whenReady() section. This is because your function in the app.whenReady() section is run asynchronously. So at the time module.exports = { window } is run, window still equals null. To fix this you need to move module.exports into app.whenReady() after createWindow() or, to fix the scoping, into createWindow() like so (I also corrected the indentation):

const { app, BrowserWindow } = require("electron");

const createWindow = () => {
  if (window) return;
  const window = new BrowserWindow({
    minWidth: 820,
    minHeight: 620,
    width: 820,
    height: 620,
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      enableRemoteModule: true,
    },
  });
  window.removeMenu();
  module.exports = {
    window
  }
};

app.whenReady().then(() => {
  createWindow(); 
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
      //   showRecorderWindow();
    }
  });
});

Now when you require windows.js it will return the latest window object. Just make sure to do your const { window } = require("./window.js"); once the app is ready:

// file2.js

const { app, BrowserWindow } = require("electron");

let window = null;

app.whenReady().then(() => {
  app.on("activate", () => {
    if (window == null) {
      { window } = require("./window.js");
    }
  });
});

Note that you can't require("./window.js") multiple times to get the latest window as node.js will hold a copy of window.js when you require it. You may also want to look into inter-process communication: https://www.electronjs.org/docs/latest/tutorial/ipc

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda