He instalado un paquete de módulos electrónicos para implementar pestañas en electrón como se muestra a continuación

Package.json

{
  "name": "Backoffice",
  "version": "1.0.0",
  "description": "BackOffice application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Karthik",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.8",
    "electron-tabs": "^0.9.4"
  }
}

Main.js

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const path = require("path");
const url = require("url");
const TabGroup = require("electron-tabs");

let win;
const tabGroup = new TabGroup();

function createWindow() {
    win = new BrowserWindow();
    win.loadURL(url.format({
        pathname:path.join(__dirname,'index.html'),
        protocol:'file',
        slashes:true
    }));

    win.on('closed',()=>{
        win = null;
    })
}

app.on('ready', function(){
    createWindow();
    const template = [
        {
            label : 'Backoffice',
            submenu: [
                {
                   label : 'Account Management',
                   click : function () {
                       let tab = tabGroup.addTab({
                       title: "Electron",
                       src: "http://electron.atom.io",
                       visible: true
                    });
                    }
                },
                {
                    label : 'HR Management',
                    click : function () {
                        console.log("CLICK HM menu");
                    }    
                },
             ]

        }
]
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
});

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>BackOffice</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
    </head>
    <body>
        <h1>BackOffice</h1>
        <div class="etabs-tabgroup">
            <div class="etabs-tabs"></div>
            <div class="etabs-buttons"></div>
        </div>
        <div class="etabs-views"></div>
    </body>
</html>

Recibo el siguiente error cuando ejecuto npm start

App threw an error during loadReferenceError: document is not defined at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:3:1)
    at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:421:3)
    at Module._compile (module.js:642:30)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:504:12)
    at Function.Module._load (module.js:496:3)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\DEV_2018\nodejs_workspace\electron\menu-demo\main.js:11:18)
  • ¿Por qué no puedo cargar el paquete de módulos electrónicos?

  • Que esta causando este error? Cómo crear una nueva pestaña al hacer clic en menú de aplicación en electron?

19
Karthik 10 sep. 2018 a las 09:35

3 respuestas

La mejor respuesta

Como @ coolreader18 explicó en detalles, debe usar electron-tabs en el proceso de representación

Esto significa que debe notificar el html de main.js cuando hace clic en un elemento del menú. MenuItem el clic le proporciona la persona que llama {{X1 }} para que pueda enviarle un mensaje.

main.js

 ...
 {
   label: 'Account Management',
   click: function (menuItem, browserWindow, event) {
     browserWindow.webContents.send('add-tab', {
       title: 'Electron',
       src: 'http://electron.atom.io',
       visible: true
     })
   }
 },
 ...

index.html

<body>
  ...
  <script>
    const { ipcRenderer } = require('electron')
    const TabGroup = require('electron-tabs')
    const tabGroup = new TabGroup()

    ipcRenderer.on('add-tab', (event, arg) => {
      tabGroup.addTab(arg)
    })
  </script>
</body>
6
pergy 21 sep. 2018 a las 12:39

Podría ser porque estás llamando

const tabGroup = new TabGroup();

Antes de que la página haya terminado de cargarse.

Intenta dividirlo en

let tabGroup;

Y dentro de createWindow ():

tabGroup = new TabGroup();

Editar: tienes que cambiar const para dejar que var o var, perdón

0
Rapwnzel 10 sep. 2018 a las 15:17

En la documentación para electron-tabs, menciona llamarlo desde el proceso de renderizado, pero lo estás haciendo en el proceso principal. El proceso principal es desde donde controlas las API de electrones, p. abriendo ventanas como si estuvieras en main.js. Cada ventana del navegador crea un nuevo proceso de representación, que puede comunicarse con el proceso principal o administrar su propio documento y Web APIS.

El error que está recibiendo allí, document is not defined, se debe a que el proceso principal no tiene acceso al DOM porque puede abrir varios navegadores desde el mismo proceso principal; no sabría cuál usar. Entonces, lo que debe hacer es poner un script en el proceso del renderizador. Cree un renderer.js y coloque el código electron-tabs (const TabGroup = require("electron-tabs");) allí. Luego, en su index.html, ponga <script src="renderer.js"></script>, y debería funcionar.

5
coolreader18 16 sep. 2018 a las 02:47