Переключение страниц без перезагрузки

Question

В приложении My Electron есть меню на каждой странице .html, которой управляет 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";
  });
});

На каждой HTML-странице, которую я имею в разделе head, чтобы controller.js мог работать! Теперь у меня вопрос, как сделать это без перезагрузки все время окна при переключении страницы?

Например, когда я захожу в aaa.html, в браузере появляется ощущение, что на несколько миллисекунд есть белый экран, затем он переходит на новую страницу, как я могу сделать это без белого окна, когда нажимаю кнопку, чтобы перейти на новую страницу? Я хочу, чтобы содержимое загружалось, когда я нажимал кнопку без ощущения браузера.

Любые идеи, как я могу сделать это или что я могу сделать лучше здесь? Спасибо

Answer 1

Помимо решения проблемы запроса страницы, я бы посоветовал принять доступные фреймворки и библиотеки, которые поддерживают создание одностраничных приложений. Много работы уже сделано для вас.

Лично я бы использовал React с пакетом реактив-маршрутизатором для создания SPA. Если вы хотите уменьшить вспышки между переходами, вам нужно избегать повторного рендеринга всей страницы. Это именно то, что делают библиотеки пользовательского интерфейса, такие как React.

Answer 2

Чтобы ответить на вопрос технически: вы можете получить содержимое ваших страниц с помощью API выборки , а затем проанализировать их с помощью DOMParser , а затем заменить текущее содержимое вашей страницы. (или только его часть, скажем, не верхний и нижний колонтитулы, но все остальное) с тем, что вы только что проанализировали, используя History API

Сделать так, чтобы все это хорошо работало вместе, непросто, и в большинстве случаев вы никогда не избавитесь от некоторого уровня рендеринга 'вспышек' в некоторых местах.

То, что вы, вероятно, хотите построить, - это одностраничное приложение , я предлагаю вам проверить React, Vue или Angular и собрать из них

---

Редактировать:

Другое решение - загрузить все заранее и затем внедрить / удалить элементы, используя javascript , для этого решения я бы рекомендовал использовать templates (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)