Question

我的电子应用程序在每个.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页面的头部都有一个小节，因此controller.js可以正常工作！我现在的问题是，如何在切换页面时始终不重新加载窗口的情况下做到这一点？

例如，当我转到aaa.html时，感觉在浏览器中有一个白色屏幕几毫秒，然后转到新页面，如何在单击按钮时不使用白色窗口就可以使这项工作正常到新页面？我希望在单击按钮时没有浏览器的感觉时加载内容。

有什么想法可以做到这一点或在这里可以做得更好吗？谢谢

Answer 1

要从技术上回答问题：您可以使用 fetch API 获取页面的内容，然后使用 DOMParser 对其进行解析，然后替换其中的当前内容。您使用 history API

解析的页面（或页面的一部分，不是页眉和页脚，而是其他所有内容）

将所有这些完美地结合在一起并不是一件容易的事，并且在大多数情况下，您永远都不会摆脱某种程度的渲染“闪光”。

您可能要构建的是单页应用程序，我建议您签出 React，Vue或Angular 并从中构建

编辑：

另一种解决方案是先加载所有内容，然后使用javascript注入/删除元素，对于该解决方案，我建议使用模板（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template）

Answer 2

除了解决页面请求问题外，我建议采用支持构建单页面应用程序的可用框架和库。您已经完成了很多工作。

我个人会使用React和react-router包来创建SPA。如果要减少过渡之间的闪烁，则需要避免重新呈现整个页面。这正是React之类的UI库的作用。

切换页面而不重新加载

2 个答案: