加载电子标签模块时出错&无法在电子中创建选项卡
我已经安装了电子模块包，用于在电子中实现选项卡，如下所示
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启动时，我会得到以下错误
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)- 为什么我不能加载电子模块包。
- 是什么导致了这个错误？如何在电子应用程序菜单上创建新的选项卡？
回答 3
Stack Overflow用户
发布于 2018-09-21 12:30:26
正如@coolreader18 18详细解释的那样，您必须在渲染过程中使用electron-tabs
这意味着当您单击菜单项时，必须从main.js通知html。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>Stack Overflow用户
发布于 2018-09-16 02:47:20
在文档 for electron-tabs中，它提到从呈现程序过程调用它，但是您在主进程中这样做。主要过程是您控制电子apis的地方，例如打开窗口，就像您在main.js中一样。每个浏览器窗口创建一个新的呈现程序进程，它可以与主进程通信或管理自己的文档和Web APIS。
您所遇到的错误，document is not defined，是因为主进程无法访问DOM，因为您可以从同一个主进程中打开多个浏览器；它不知道该使用哪个浏览器。因此，您需要做的是在呈现程序过程中放置一个脚本。创建一个renderer.js，并将electron-tabs代码(const TabGroup = require("electron-tabs");)放在那里。然后，在您的index.html中放置<script src="renderer.js"></script>，它应该可以工作。
Stack Overflow用户
发布于 2018-09-10 09:07:47
可能是因为你在打电话
const tabGroup = new TabGroup();在页面完成加载之前。
试着把它分成
let tabGroup;在createWindow()内部：
tabGroup = new TabGroup();编辑：，您必须更改const以让或更改var，对不起
https://stackoverflow.com/questions/52252290
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号