我一直在与Electron一起玩，在尝试了几个模板，应用程序并浏览了Electron网站上的应用程序后，我对如何在单个框架和BrowserWindow中呈现多个HTML文件感到有些困惑。
仔细研究这个主题，我知道我会使用BrowserWindow从app.on ready创建一个新窗口，但我想弄清楚构建一个可将内容加载到{{1} }，例如：
div.navbar-global {
background-color: grey;
}
.navbar-global .navbar-brand {
color: white;
}
.navbar-global .navbar-user > li > a {
color: white;
}
.navbar-primary {
background-color: #333;
bottom: 0px;
left: 0px;
position: absolute;
top: 51px;
width: 200px;
z-index: 8;
overflow: hidden;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.navbar-primary.collapsed {
width: 60px;
}
.navbar-primary.collapsed .glyphicon {
font-size: 22px;
}
.navbar-primary.collapsed .nav-label {
display: none;
}
.btn-expand-collapse {
position: absolute;
display: block;
left: 0px;
bottom:0;
width: 100%;
padding: 8px 0;
border-top:solid 1px #666;
color: grey;
font-size: 20px;
text-align: center;
}
.btn-expand-collapse:hover,
.btn-expand-collapse:focus {
background-color: #222;
color: white;
}
.btn-expand-collapse:active {
background-color: #111;
}
.navbar-primary-menu,
.navbar-primary-menu li {
margin:0; padding:0;
list-style: none;
}
.navbar-primary-menu li a {
display: block;
padding: 10px 18px;
text-align: left;
border-bottom:solid 1px #444;
color: #ccc;
}
.navbar-primary-menu li a:hover {
background-color: #000;
text-decoration: none;
color: white;
}
.navbar-primary-menu li a .glyphicon {
margin-right: 6px;
}
.navbar-primary-menu li a:hover .glyphicon {
color: orchid;
}
.main-content {
margin-top: 60px;
margin-left: 200px;
padding: 20px;
}
.collapsed + .main-content {
margin-left: 60px;
}
在侧面导航中将有一个命名的HTML文件，例如：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-inverse navbar-global navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Dash</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-user navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> User</a></li>
<li><a href="#about"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar-primary">
<ul class="navbar-primary-menu">
<li>
<a href="dashboard.html"><span class="glyphicon glyphicon-list-alt"></span><span class="nav-label">Dashboard</span></a>
<a href="profile.html"><span class="glyphicon glyphicon-envelope"></span><span class="nav-label">Profile</span></a>
<a href="settings.html"><span class="glyphicon glyphicon-cog"></span><span class="nav-label">Settings</span></a>
<a href="notification.html"><span class="glyphicon glyphicon-film"></span><span class="nav-label">Notification</span></a>
<a href="monitor.html"><span class="glyphicon glyphicon-calendar"></span><span class="nav-label">Monitor</span></a>
</li>
</ul>
</nav>
<div class="main-content">
<h1>I am the main content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem sint assumenda quae aliquid voluptatibus quia, ea, ad natus magni repellat earum, culpa iure tempore. Enim dolor eaque minima voluptas ducimus?</p>
</div>如果我不是在初始帧中都创建一个新窗口，而是使用不同的内容，那么如何使用dashboard.html
profile.html
settings.html
notification.html
monitor.html
将它们加载到onclick中？可以在渲染器和/或main中完成吗？
在研究答案时，我看到了<webview>，但是不确定是否应该将<div class="main-content"></div>替换为<div class="main-content"></div>。我见过的其他搜索结果：
Electron app. Multiple html files-在 main.js 中将<webview class="main-content"></webview>用于：
const win =新的BrowserWindow（选项）
win.loadUrl（BrowserWindow）
Easy way to load local html file in electron-加载file://${__dirname}/index.html，这似乎是一种过度的方法
在Electron中，如何将HTML文件加载到单个框架中，并且该过程将应用于正在加载的任何文件吗？
答案 0 :(得分：0)
鉴于您要将本地HTML文件加载到现有的HTML页面中，有两种选择：
fs模块您说这太过分了，但我认为它是“ ajax”请求的本地对应项。
<!DOCTYPE html>
<html>
<body>
<button id="my-button">Click me</button>
<div id="my-div">First content</div>
</body>
<script type="text/javascript">
var fs = require('fs');
document.getElementById('my-button').addEventListener('click', function() {
fs.readFile('external_content.html', function (err, data) {
document.getElementById('my-div').innerHTML = data.toString()
})
})
</script>
</html>
iframe 另一种选择是使用iframe，它允许在不使用JavaScript的情况下更改网站的一部分。
<!DOCTYPE html>
<html>
<body>
<a href="external_content.html" target="my-iframe">Click me</a>
<iframe name="my-iframe" src="first_content.html"></iframe>
</body>
</html>