Question

在我的应用程序的 mainWindow 中，我有angularJS SPA。一切正常，直到我创建新窗口。在每个窗口中，我需要加载URL，这是HTML文档的路径，例如 mainWindow ：

mainWindow = new BrowserWindow({
    width: 790,
    height: 580
});
mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'), // load - index.html angularjs dashboard
    slashes: true
}));

问题是，由于打开 new 窗口后，我的 mainWindow 中有SPA，因此我应该将整个SPA加载到 new 窗口以及在 mainWindow 中，只需重定向到正确的（隐藏的）URL，这样我就可以在这个新内容中添加一些其他内容。我需要加载整个SPA才能访问我需要在 new 窗口中使用的SPA服务，工厂和指令。

let createQuestionWindow = () => {
    questionWindow = new BrowserWindow({
        width: 380,
        height: 300,
        alwaysOnTop: true
    });
    transparentWindow.loadURL(`file://${__dirname}/index.html`);
    // in above line im actually loading same SPA as in mainWindow
    questionWindow.isFocused();
    questionWindow.setFocusable(true);
    mainWindow.restore();
    // here I should also redirect or set url somehow but...
};
createQuestionWindow();

我什至没有尝试在 new 窗口中的克隆SPA中设置正确的url，因为这可能会导致巨大的性能问题，因为最终我会打开2个甚至3个有时会打开的窗口将与SPA完全相同。

这不是一个很好的解决方案I heard about "child window"，但仍然不能为我提供访问父级SPA的能力（我认为）。

如何重构我的应用程序，以便可以从新窗口访问SPA，但不需要一次又一次地加载整个内容？

如果无法通过其他更好的方法来实现，那么如何从应用程序的电子（节点）侧在 new 窗口中设置SPA的网址，但angularJS路由器会捕获它的方式？

Answer 1

不幸的是，这是电子窗口体系结构的缺点：每个窗口就像一个单独的Chrome浏览器，具有自己的过程。因此，它必须重新加载所有HTML，JS和CSS，而不能重用（在内存方面）其他窗口中的任何内容。

对于SPA（单页应用程序），是的，这绝对意味着在新窗口中重新加载了整个SPA，即使您拥有所有代码都可以在以前的窗口中呈现新窗口内容。

与尝试在弹出浏览器窗口中打开SPA的视图非常相似。参见How can I render an Angular directive in a popup window, allow it to communicate with the main window?

电子子窗口也不会有任何帮助。 “子”窗口的概念仅是为了确保用户在关闭“子”之前不能在“子”前面显示“父”窗口。但是子窗口仍然必须加载自己的资产。

当然，您可以简单地避免使用新窗口，而在主窗口中使用某些模式或传统路由（非常类似于普通的浏览器网络应用程序）。

但是，如果您真的想通过打开新窗口来从电子和桌面应用程序体验中受益，那么通常在后者中重新加载整个SPA并不难。与网络应用相反，您的所有资产都可以在本地使用并且可以快速加载（除非您拥有MB大小的应用…）

现在，关于如何将新窗口打开到特定的URL /路由，只需将路由器配置为使用哈希方案即可，以便您可以编写URL来打开公用index.html文件，但使用路由作为哈希部分传递，例如：

newWindow.loadURL(`file://${__dirname}/index.html#!/question`);

然后，当SPA在新窗口中加载时，您的路由器将自动捕获它，并显示相应的视图。

例如参见

电子和angularJS应用架构-在两个窗口中进行SPA克隆

1 个答案: