我正在使用 electron-tabs构建一个选项卡式 View 。
期待
我希望为每个选项卡分别显示一个 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>
这是加载的选项卡的样子:
我希望只看到
tab2.html ，标题为“Cmdlet”，位于 Electron 选项卡下，但 tab1.html ，标题为“书签”，最终也会出现，这是错误的。请注意，原始演示具有完全相同的问题。
更新
我有导致错误的安全设置。在修复了我的安全性之后
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline';
connect-src *">
我已经摆脱了选项卡中的额外内容，但似乎加载的页面阻止了选项卡按钮。
最佳答案
这是我自己想出来的。
道德教训:如有疑问，请打开 Chrome DevTool。
这是一个两部分的修复。
第1部分
最初的问题是由对我的 HTML 头的安全违规引起的。困惑的视觉观察是渲染器无法完成整个窗口的绘制并悬而未决的结果。这个安全要求似乎来自 electron-tabs .
修复
像这样将“不安全内联”添加到所有 HTML
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline';
connect-src *">
之后，包中的一个真正的错误浮出水面。
第2部分
修复安全后，我们得到这样的 View
这是由于渲染的 web View 遮挡了整个选项卡 View ，这是当前
electron-tab 中的一个错误。 ，即 0.11.0在这一刻。修复
修复在 this issue 中给出由 @ChandlerCPrice .它基本上修复了内联样式表中的 webview 绝对定位。
替换
index.js 中的原始样式注入(inject)代码的 electron-tabs// Inject styles
(function () {
const styles = `
webview {
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
visibility: hidden;
}
webview.visible {
visibility: visible;
}
`;
let styleTag = document.createElement("style");
styleTag.innerHTML = styles;
document.getElementsByTagName("head")[0].appendChild(styleTag);
})();
和
// Inject styles
(function () {
const styles = `
webview {
position: absolute;
visibility: hidden;
}
webview.visible {
width: 100%;
height: 100%;
visibility: visible;
}
`;
let styleTag = document.createElement("style");
styleTag.innerHTML = styles;
document.getElementsByTagName("head")[0].appendChild(styleTag);
})();
应用修复后的选项卡式 View
关于javascript - Electron 标签意外地将所有标签源加载到同一个标签中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59852638/