在 AngularJS / Electron 应用程序中设置 $location

Posted 2023-03-22

【中文标题】在 AngularJS / Electron 应用程序中设置 $location

【英文标题】：Set $location in AngularJS / Electron app

【发布时间】：2020-11-06 01:55:21

【问题描述】：

是否可以在 Electon 应用程序中更改 AngularJS 中 $location 的 URL，但不隐式加载该 URL？问题是 Electron 正在本地加载 index.html （和其他资源），这是有意的。但是当然它也会将$location 设置为本地文件系统。

背景： 我需要$location 指向服务器的原因是有一些现有的遗留代码（我不能更改）并且此代码使用例如$location.search。因此，在 Electron 应用启动后，我需要正确设置位置，这样遗留代码才能工作。

更新 17.07.2020

这是请求的示例代码：

我正在尝试使用window.location = "https://example.com?param1=test" 设置位置，以便AngularJS 函数$location.search() 返回param1=test。问题是，如上所述，当设置 window.location 时，Electron 从该服务器加载 index.html 并替换 BrowserWindow 的内容。但我想在本地加载那些资源（index.html、*.js、*.css）我也试过了：

window.location.href = ...
window.location.assign (...)
window.location.replace (...)

但所有这些都在重新加载页面。

【问题讨论】：

一些代码示例说明您正在尝试做的事情以及您所做的事情将有所帮助并被推荐。

谢谢@Zac！刚刚添加了对初始帖子的更新。

【参考方案1】：

我认为您需要为will-navigate 添加一个事件侦听器。可以在here 找到文档。重要的部分：

[will-event 事件将在用户或页面想要开始导航时发出。当 window.location 对象更改或用户单击页面中的链接时，可能会发生这种情况。

我想你的 ma​​in.js 文件看起来像这样，它是简单的，但我希望你能明白。

const 
  app
 = require("electron");

let window;
function createWindow()
    window = new BrowserWindow()...;
    // etc....


app.on("ready", createWindow);

// For all BrowserWindows you make, the inner bindings will be applied to each;
// more information for "web-contents-created" is here: https://www.electronjs.org/docs/api/app#event-web-contents-created
app.on("web-contents-created", (event, contents) => 
    contents.on("will-redirect", (event, navigationUrl) => 

        // prevent the window from changing path via "window.location = '....'"
        event.preventDefault();
        return;
    );
);

仅供参考：这个事件监听器是mainly used for security reasons，但我不明白为什么你不能在你的情况下使用它。

【讨论】：

谢谢扎克！刚刚尝试过，但永远不会触发内部的“将重定向”。另外，如果我这样做：'win.webContents.on("will-redirect", (event, navigationUrl) => ...' （我的意思是没有封装的'web-contents-created'）它是没有触发。相反，当使用“will-navigate”时，event.preventDefault() 确实有效（我过去已经尝试过），但是 window.location 也没有设置为新的 URL。

@Bernd Hm，那么有两个建议。在您的电子应用程序中，您需要为您可能拥有的每条可能的路径制定路线，即。 github.com/reZach/secure-electron-template/blob/master/app/src/…。否则，您需要将 Angular 应用程序更改为始终存在于单个 url，但是您需要更改的参数，您需要将它们作为哈希参数放入您的 url (***.com/a/14974448/1837080)

我不知道我是否正确理解了您的建议。在我的应用程序中，目前只有一条路线显示主页。我谈到的遗留代码是对不同的路由（到外部服务器）执行多个 AJAX 请求，但这不是问题，因为我可以通过捕获 onBeforeRequest 来重写 URL。问题是遗留代码需要 window.location 对象指向外部服务器。但如前所述，我无法将其设置为该服务器，因为 Electron BrowserWindow 会立即被服务器内容替换。

啊，我想我现在明白了。你可能需要重写你的前端应用程序，要么不使用 window.location，要么传入哈希参数（这样页面就不会重新加载）