Switch pages without reload

3124 views javascript
3

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 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

answered question

1 Answer

11

To answer the question technically : you could get the content of your pages using the fetch API, and then parse them using a DOMParser and then replace the current content of your page (or just a part of it, say not the header and footer, but everything else) with what you just parsed, using the history API

Making this all work nicely together is not straightforward though, and you will never get rid of some level of rendering 'flashes' in some places in most cases.

What you probably want to build is a single page application, I suggest you check out React, Vue or Angular and build from those

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories