Switch pages without reload


#1

My Electron App has an Menu in the every .html Page witch is controlled by an controller.js

    $(document).ready(function() {
  const app = require("electron").remote.app;
  const { remote } = require("electron");

  $("#btn1").click(function() {
    window.location = "index.html";
  });

  $("#btn2").click(function() {
    window.location = "aaa.html";
  });

  $("#btn3").click(function() {
    window.location = "bbb.html";
  });

  $("#btn4").click(function() {
    window.location = "ccc.html";
  });
  $("#btn5").click(function() {
    window.location = "ddd.html";
  });

  $("#btn6").click(function() {
    window.location = "eee.html";
  });

  $("#btn7").click(function() {
    window.location = "fff.html";
  });
});

In the every Html Page i have in the head section <script src="./controller.js"></script> so the controller.js can work! My question now is how to make this without to reload all the time the window when switching the page?

For example When I go to aaa.html It feels like in the Browser a have for a few Milliseconds a White screen then it goes to the new Page, How I can make this work without White Window when Clicking a Button to go to a new Page? I want the Content to be loaded when I click the Button without this Browser feeling.

Any Ideas how I can do this or what I can do better here? Thank you