Я использую электронные вкладки для создания представления с вкладками.
Ожидание
Я ожидал, что для каждой вкладки будет показано ровно ОДИН 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, с названием «Командлет», на вкладке «Электрон», но tab1.html, под названием «Bookmarker», также отображается, что неправильно.
Обратите внимание, что оригинальная демоверсия имеет точно такую же проблему.
ОБНОВЛЕНИЕ
У меня есть настройки безопасности, которые исключают ошибки. После исправления безопасности с помощью
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' 'unsafe-inline';
script-src 'self' 'unsafe-inline';
connect-src *">
я избавился от дополнительного содержимого на вкладке, но кажется, что загруженная страница блокирует кнопки вкладок.
