【发布时间】：2020-05-08 04:41:02
【问题描述】：
我正在使用electron-tabs 构建一个选项卡式视图。
期待
我希望为每个选项卡分别显示一个 html。
观察
然而，运行一个包附带的修改后的演示程序，出乎我的意料，我发现一个标签实际上显示了所有标签的内容。
代码
这是我的main.js
const {app, BrowserWindow} = require('electron');
let mainWindow = null;
app.on('ready', () => {
console.log('Hello from Electron');
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
webviewTag: true
}
});
// mainWindow.webContents.openDevTools()
mainWindow.webContents.loadFile('./app/index.html');
// mainWindow events, within app lifecycle
mainWindow.webContents.on('did-fail-load', function() {
console.log("Failed to load index.html");
})
})
渲染器.js
const { remote, ipcRenderer } = require('electron');
const TabGroup = require("electron-tabs");
const mainProc = remote.require('./main.js'); // plug in main process
const parser = new DOMParser();
let tabGroup = new TabGroup({
newTab: {
title: 'New Tab'
}
});
tabGroup.addTab({
title: 'Google',
src: './tab1.html',
closable: false
});
tabGroup.addTab({
title: "Electron",
src: './tab2.html',
closable: false,
active: true // tab button is foregrounded
});
这里是主页 HTML：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline';
connect-src *">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>TabbedWindow</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- 2. Include the basic markup of the tabs view -->
<div class="etabs-tabgroup">
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
<!--
3. Include initialization code, you can include another js file
Or write directly the JS code here.
-->
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
这里是标签页的 HTML：tab1.html 和 tab2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline';
connect-src *">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bookmarker</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<!-- <body>
<h1>Hello from Electron</h1>
</body>
<p>
<button class="alert">Current Directory</button>
</p> -->
<h1>Bookmarker</h1>
<div class="error-message"></div>
<section class="add-new-link">
<form class="new-link-form">
<input type="url" class="new-link-url" placeholder="URL" size="100" required>
<input type="submit" class="new-link-submit" value="Submit">
</form>
</section>
<section class="links"></section>
<section class="controls">
<button class="clear-storage">Clear Storage</button>
</section>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline';
connect-src *">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cmdlet</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<h1>Cmdlet</h1>
<div class="error-message"></div>
<section class="input-new-cmd">
<form class="new-cmd-form">
<input type="text" class="new-external-cmd" placeholder="whatever" size="100" required>
<input type="submit" class="new-cmd-run" value="Run">
</form>
</section>
<section class="results"></section>
<section class="controls">
<button class="clear-results">Clear</button>
</section>
</html>
这是加载的选项卡的样子：
我希望在 Electron 选项卡下只看到标题为“Cmdlet”的 tab2.html，但标题为“书签”的 tab1.html 最终也会出现，这是错误的。
请注意，原始演示存在完全相同的问题。
更新
我有导致错误的安全设置。在修复了我的安全之后
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline';
connect-src *">
我已经去掉了选项卡中的多余内容，但是加载的页面似乎挡住了选项卡按钮。
【问题讨论】：
标签： javascript html css tabs electron