Javascript 如何创建包含多个部分的Electron应用程序

我正在尝试创建一个具有多个“页面”的电子应用程序

在我的例子中，我正在尝试制作一个有不同部分的边栏应用程序。单击某个节后，主窗口的内容将更改，以呈现该节的相应内容

我是JS新手，如果这是一个愚蠢的问题，我很抱歉，但现在，每当我尝试进入应用程序的某个部分时，在所有内容再次加载之前，我都会看到一个白色的闪屏

例如：

我知道这与电子重新加载Chrome引擎有关，但是当点击某个部分时，内容会自动显示，没有任何“闪烁”或奇怪的东西，我怎么能做到这一点呢

基本上：如何使用Electron构建包含大量组件的GUI

我的

index.html

的代码是：

破裂工具
1单击生成器
活动
检查分数
设置
帮助/常见问题解答
家

不久前，我编写了一些代码来实现这一点（不幸的是，它相当复杂，但实现起来应该不会太难）

您将此功能放在每页上：

function loadPageWithIframe (url) {
    var hiddenPage = document.createElement("iframe");
    hiddenPage.setAttribute("src", url);
    hiddenPage.style.display = 'none';
    document.body.appendChild(hiddenPage);
    hiddenPage.onload = function () {
        var frameDocument = hiddenPage.document;
        if (hiddenPage.contentDocument) {
            frameDocument = hiddenPage.contentDocument;
        } else if (hiddenPage.contentWindow) {
            frameDocument = hiddenPage.contentWindow.document;
        }
        document.open();
        document.write(frameDocument.documentElement.innerHTML);
        document.close();
        window.history.pushState("", document.title, url.replace('https://' + window.location.hostname, ''));
    }
}

电子文件中的代码：

mainWindow.webContents.on('will-navigate', function (evt, url) {
    evt.preventDefault();
    mainWindow.webContents.executeJavaScript('loadPageWithIframe("' + url + '");');
});

如果你正确地输入代码，它应该自动工作，而不需要任何额外的代码

其工作方式是，当您想要转到url时，调用

loadPageWithIframe

函数，然后它生成一个iframe并加载页面，从iframe复制所有html，并用iframes html覆盖当前页面的html

但不是每次单击时手动调用

loadPageWithIframe

功能，而是使用Electron的

导航

事件，让我们知道它将进入另一个页面，然后调用

loadPageWithIframe

（这就是我发布的Electron代码的目的）

---

我希望这能有所帮助：）

电子应用程序与网络应用程序非常相似。正如您所注意到的，在HTML文档之间导航的传统方式对应用程序不起作用。这就是为什么现在web应用程序被开发为SPA（SPA）。这仅仅意味着在用户导航时使用JavaScript手动加载和替换页面的某些部分。有几种方法可以实现这一点，但下面是一个如何为代码实现这一点的示例：

// Get all the navigation links to an array
const naviLinks = Array.from(document.getElementsByClassName("nav-group-item"));
const contentEl = document.getElementsByClassName("pane")[0];

naviLinks.forEach((linkEl) => {
    // Listen click event for the navigation link
    linkEl.addEventListener("click", e => {
        // Prevent default behavior for the click-event
        e.preventDefault();
        // Get the path to page content file
        const href = linkEl.getAttribute("href");
        if (href) {
            // Use node.js fs-module to read the file
            const fs = require("fs");
            fs.readFile(href, (err, data) => {
                if (err) {
                    throw err;
                }
                // show the selected page
                contentEl.innerHTML = "";
                contentEl.insertAdjacentHTML("beforeend", data);
            })
        }
    })
})

请注意，页面内容HTML文件（accounts.HTML等）应仅包含“pane”

div

的内容。在主进程中创建

BrowserWindow

-对象时，还需要通过

nodeIntegration:true

，以便使用

require

加载

fs

-模块：

new BrowserWindow({
    webPreferences: {
        nodeIntegration: true
    }
}

如果页面内容文件很大，导航速度可能会很慢，因为每次单击都会读取文件并呈现页面。有一种优化方法可以帮助您在页面加载时读取文件并在屏幕外创建页面元素，然后在

单击

-events时交换元素。或者，您可以将页面内容放入

-元素中并交换它们。如果你有兴趣的话，我会把这些留给你自己试一下

---

有很多JavaScript框架可以帮助您创建SPA。目前流行的有React、Angular和Vue。“如何构建包含大量组件的GUI？”是前端JavaScript框架可以回答的问题之一，但当然还有一个学习曲线。当您觉得需要开始将GUI拆分为可重用或分层的组件时，最好研究一下这些JavaScript框架。

它奏效了！非常感谢你！但是由于某些原因，如果控制台中没有定义

require is not defined

错误，我仍然无法加载第二个页面。有什么想法吗？由于某些原因，我也不能完全在它们之间来回切换。如果我尝试来回切换，我会不断出现错误，例如

electron已声明

，并且无法从脚本标记正确加载内容。