Как отображать несколько файлов HTML в одном окне в Electron?

Question

Я играл с Electron, и после экспериментов с несколькими шаблонами, приложениями и навигации по приложениям на сайте Electron, я несколько запутался в том, как отображать несколько файлов HTML в одном кадре и BrowserWindow.

Исследуя эту тему, я понимаю, что использовал бы BrowserWindow , чтобы создать новое окно из app.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>.Другие результаты поиска, которые я видел:

• Электрон приложение.Несколько html-файлов - использует BrowserWindow в main.js с:

  const win = новый BrowserWindow (параметры) win.loadUrl (file://${__dirname}/index.html)

• Простой способ загрузить локальный HTML-файл в электронном формате - загружает fs.readFile, что кажется чрезмерным подходом

• Структура приложения для Windows с несколькимиElectron - нет ответа, но вопрос предназначен для нескольких кадров
• Electron - Как загрузить html-файл в текущее окно? - загружает внешний URL-адрес, но не уверен, что этотот же подход для локальных файлов в приложении

В Electron, как файлы HTML должны загружаться в единственном фрейме, и будет ли этот процесс применяться к любым загружаемым файлам?

Answer 1

Учитывая, что вы хотите загрузить локальный файл 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>