如何在Electron的单个窗口中呈现多个HTML文件? [英] How should multiple HTML files be rendered in a single window within Electron?

问题描述

我一直在与Electron一起玩，在尝试了几个模板，应用程序并浏览了Electron网站上的应用程序后，我对如何在单个框架和BrowserWindow中呈现多个HTML文件感到有些困惑.

I've been playing with Electron and after experimenting with several of the templates, apps and navigating through apps on Electron's site I'm somewhat confused on how to render several HTML files within a single frame and BrowserWindow.

仔细研究这个主题后，我会使用 BrowserWindow 创建一个新窗口从 app.on ready 中获取，但我想弄清楚如何构建一个侧面导航，将内容加载到 div 中，例如:

Researching through the topic I understand I would use BrowserWindow to create a new window from app.on ready but I would like to figure out to build a side nav that would load content into a div, for example:

.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文件，例如:

In the side nav there would be named HTML files, example:

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

使用 onclick ，如果我不创建新的，应该如何将它们加载到< div class ="main-content"></div> 中窗口都在初始框架内，但内容不同?可以在渲染器和/或main中完成吗?

With an onclick how should those be loaded into <div class="main-content"></div> if I am not creating a new window all within the initial frame but with different content? Would that be done in the renderer and/or main?

研究答案时，我已经看到 < webview> ，但是我不确定是否应该将< div class ="main-content"></div> 替换为< webview class ="main-content"></webview> .我见过的其他搜索结果:

When I research for an answer I've seen <webview> but I'm unsure if I should replace the <div class="main-content"></div> to <webview class="main-content"></webview>. Other results from a search I've seen:

• 电子应用.多个html文件-在 main.js 中将 BrowserWindow 与

const win =新的BrowserWindow(选项)win.loadUrl( file://$ {__dirname}/index.html )

const win = new BrowserWindow(options) win.loadUrl(file://${__dirname}/index.html)

轻松加载本地html文件的方法电子-加载 fs.readFile 似乎是一种过度的方法

Easy way to load local html file in electron - loads fs.readFile which seems like an excessive approach

在Electron中，如何将HTML文件加载到单个框架中，并且该过程将应用于正在加载的任何文件吗?

In Electron how should HTML files be loaded in a singular frame and would that process apply to any files being loaded?

推荐答案

鉴于您要将本地HTML文件加载到现有HTML页面中，有两种选择:

Given that you want to load a local HTML file into an existing HTML page, there are two options:

您说这太过分了，但我认为它是"ajax"请求的本地对应项.

You say this is excessive, but I'd see it as the local counterpart to "ajax" requests.

<!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即可更改网站的一部分.

Option 2 - iframe

Another option would be to use an iframe, which allows to change part of the website without 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>

这篇关于如何在Electron的单个窗口中呈现多个HTML文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！