javascript - navegacion - tabs en php ejemplo
Error al cargar el módulo de pestañas electrónicas y no se pueden crear pestañas en electron (3)
Como @ coolreader18 explicó en detalles, debe usar electron-tabs en el proceso del Renderizador
Esto significa que debe notificar el html desde main.js cuando haga clic en un elemento del menú. El clic de MenuItem proporciona la persona que llama BrowserWindow 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>
He instalado un paquete de módulos electrónicos para implementar pestañas en electrón como se muestra a continuación
paquete.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 el menú de aplicaciones en electron?
En la documentation de electron-tabs , menciona que se debe llamar desde el proceso del renderizador, pero lo está haciendo en el proceso principal. El proceso principal es desde donde se controlan las apis de electrones, por ejemplo, abriendo ventanas como si estuviera en main.js Cada ventana del navegador crea un nuevo proceso de renderizado, que puede comunicarse con el proceso principal o administrar su propio documento y Web APIS.
El error que está llegando allí, el document is not defined , es porque 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 de las electron-tabs ( const TabGroup = require("electron-tabs"); ) allí. Luego, en su index.html , ponga <script src="renderer.js"></script> , y debería funcionar.
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();
Edit: tienes que cambiar const para dejar o var entonces, lo siento