Ошибка при загрузке модуля электронных вкладок и невозможность создания вкладок в электронном.

Я установил пакет электронных модулей для реализации вкладок в электронном виде, как показано ниже.

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>

Я получаю следующую ошибку при запуске 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)
  • Почему я не могу загрузить пакет электронных модулей.

  • Что вызывает эту ошибку? Как создать новую вкладку при нажатии на меню приложений в электронном?

Пожалуйста, предложите импортировать модуль в электронном виде, чтобы реализовать вкладки при нажатии на меню, если «электронные вкладки» не являются правильным модулем для реализации вкладок в электронном виде.

Karthik 11.09.2018 08:06

В основном мое требование - реализовать вкладки, которые мы видим в eclipse IDE. При нажатии на каждый исходный файл открывается новая вкладка, и мы также можем перетащить вкладку в eclipse.

Karthik 11.09.2018 08:12
19
2
1 661
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Может быть, потому что ты звонишь

const tabGroup = new TabGroup();

до того, как страница загрузится.

Попробуйте разделить его на

let tabGroup;

и внутри createWindow ():

tabGroup = new TabGroup();

Редактировать: Вы должны изменить const на let или var, извините

Я все еще получаю ту же ошибку. Ошибка находится в строке const TabGroup = require ("electronics-tabs").

Karthik 10.09.2018 11:18

Правильно ли вы установили модуль? Если вы получаете сообщение об ошибке во время выполнения функции require (), это может быть связано с установкой вашего пакета. Попробуйте сделать чистую установку: github.com/brrd/electron-tabs

Rapwnzel 10.09.2018 17:21

Я правильно установил модуль. У меня установлена ​​версия 0.9.4. const TabGroup = require ("electronics-tabs") отлично работает, если используется внутри index.html. Я предполагаю, что эта проблема связана с тем, что tabGroup не может найти объект документа HTML.

Karthik 11.09.2018 07:58

В документация для electron-tabs упоминается вызов его из процесса рендеринга, но вы делаете это в основном процессе. Основной процесс - это то, откуда вы управляете электронным API, например открывать окна, как в main.js. Каждое окно браузера создает новый процесс визуализации, который может взаимодействовать с основным процессом или управлять своим собственным документом и веб-APIS.

Вы получаете ошибку, document is not defined, потому что у основного процесса нет доступа к DOM, потому что вы можете открывать несколько браузеров из одного и того же основного процесса; он не знал бы, что использовать. Итак, что вам нужно сделать, это поместить сценарий в процесс рендеринга. Создайте renderer.js и поместите туда код electron-tabs (const TabGroup = require("electron-tabs");). Затем в ваш index.html вставьте <script src="renderer.js"></script>, и он должен работать.

Я получаю сообщение об ошибке - Справочная ошибка: tabGroup не определена в main.js, когда я переместил код электронных вкладок (const TabGroup = require ("electronic-tabs"); в render.js. Я считаю, что код TabGroup должен быть там в main.js, так как я хочу открыть вкладку при нажатии любого меню, а код меню находится в main.js

Karthik 20.09.2018 08:56

Для меня было бы полезно и более понятно, если бы вы могли вставить весь исходный код. Заранее спасибо.

Karthik 20.09.2018 09:00

«Я считаю, что код TabGroup должен быть в main.js» Нет, не должно. Вы должны инициализировать его в Renderer и просто поставить в известность из Main

pergy 21.09.2018 14:32

Да, это правильно. Элемент меню, которым вы управляете в main.js, - это верхняя строка меню, такая как «Файл», «Правка», «Просмотр» и т. д. ВСЕ код electron-tabs должен быть в renderer.js, так что все, что ссылается на TabGroup. Вот почему вы получаете эту ошибку, потому что const tabGroup = new TabGroup() и tabGroup.addTab(...) все еще находятся в main.js. Чтобы общаться от основного процесса к процессу рендеринга, что, кажется, вы хотите сделать при событии строки меню, посмотрите на ipcMain и ipcRenderer.

coolreader18 21.09.2018 14:58

правильное использование ipc из MenuItems может быть непростым, см. мой ответ с рабочим кодом

pergy 21.09.2018 15:43
Ответ принят как подходящий

Как подробно объяснил @ coolreader18, вы должны использовать electron-tabs в Процесс рендеринга

Это означает, что вы должны уведомлять html из main.js, когда вы щелкаете пункт меню. Щелчок MenuItem предоставляет вам вызывающего абонента BrowserWindow, чтобы вы могли отправить ему сообщение.

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>

Другие вопросы по теме