How should multiple HTML files be rendered in a single window within Electron?

Question

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.

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>

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

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

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?

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:

• Electron app. Multiple html files - Uses BrowserWindow in main.js with:

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

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

• Multi Windows App Structure with Electron - no answer but question is geared to multiple frames
• Electron - How to load a html file into the current window? - loads an external URL but unsure if that is the same approach for local files in the app

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

Answer 1

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

Option 1 - fs module

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>

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>