gpt4 book ai didi

javascript - 如何在 Electron 中的单个窗口中渲染多个 HTML 文件?

转载 作者:行者123 更新时间:2023-12-02 23:54:31 25 4
gpt4 key购买 nike

我一直在使用 Electron,在尝试了几个模板、应用程序并浏览 Electron 网站上的应用程序后,我对如何在单个框架和 BrowserWindow 中渲染多个 HTML 文件感到有些困惑。

研究我理解的主题,我会使用 BrowserWindowapp.on ready 创建一个新窗口但我想弄清楚建立一个侧面导航,将内容加载到 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;
}
<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>

在侧面导航中会有命名的 HTML 文件,例如:

dashboard.html
profile.html
settings.html
notification.html
monitor.html

带有 onclick应该如何将它们加载到<div class="main-content"></div>中如果我不是在初始框架内创建一个新窗口,但内容不同?这会在渲染器和/或主程序中完成吗?

当我研究答案时,我看到了 <webview> 但我不确定是否应该更换 <div class="main-content"></div><webview class="main-content"></webview> 。我看到的其他搜索结果:

在 Electron 中,HTML 文件应该如何加载到单个框架中,该过程是否适用于正在加载的任何文件?

最佳答案

假设您想要将本地 HTML 文件加载到现有 HTML 页面中,有两种选择:

选项 1 - 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>

选项 2 - 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>

关于javascript - 如何在 Electron 中的单个窗口中渲染多个 HTML 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55462919/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com