javascript - 如何删除在 Electron 中从 index.html 到 contact.html 的转换过程中创建的空白页？

Question

当我单击一个链接时，例如在 index.html 中单击外部“contact.html”中的“contact”，加载页面“contact.html”所需的时间很慢。这个利兹在加载第二页时创建一个空白页。我正在使用 ubuntu 作为操作系统在 raspberry pi 3 上进行开发。

我的问题是如何删除 electron 中从 index.html 到 contact.html 的转换过程中创建的空白页面，有什么建议吗？

Answer 1

你基本上有两个选择:

选项 1:优化 contact.html 以使用预加载器(内容加载时的等待屏幕)和缓存。

选项 2:使用 BrowserWindow 的 ready-to-show 事件并在显示 contact.html 的同时显示不同的 BrowserWindow > 仍在加载中

选项 2 的代码:

function showExternalPage(url) {
    let externalWindow = new BrowserWindow({
            width: 1280,
            minWidth: 640,
            height: 960,
            minHeight: 480,
            show: false // -> Don't show it, it'll be shown when the content has been loaded (ready-to-show), show the WaitingWindow in the meantime
        }),
        waitingWindow = new BrowserWindow({
            width: 300,
            height: 200,
            transparent: true,
            frame: false,
            alwaysOnTop: true,
            show: false
        });

    externalWindow.loadURL(url);
    waitingWindow.loadURL(url.format({
        pathname: "PATH_TO_WAITING_HTML",
        protocol: 'file:',
        slashes: true
    }));

    // Show the waitingWindow prior to the external window
    waitingWindow.show();

    externalWindow.once('ready-to-show', () => {
        externalWindow.show();
        waitingWindow.destroy();
    });
}