Set $location in AngularJS / Electron app

Question

Is it possible to change the URL for $location in AngularJS within an Electon app but without implicitly loading that URL? The problem is that Electron is loading index.html (and other resources) locally, which is intended. But then of course it also sets $location to the local file system.

Background: The reason why I need $location to point to the server is that there is some existing legacy code (which I must not change) and this code uses e.g. $location.search. So after the Electron app has started I'd need to set the location correctly, so that this legacy code can work.

UPDATE 17.07.2020

Here is the requested example code:

I'm trying to set the location with window.location = "https://example.com?param1=test" so that the AngularJS function $location.search() returns param1=test. The problem is, as mentioned above, that when setting window.location, Electron loads the index.html from that server and replaces the content of the BrowserWindow. But I want to load those resources (index.html, *.js, *.css locally) I also tried:

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

but all of these are reloading the page as well.

Some code examples of what you are trying to do and what you have done will help and is recommended. — reZach, Jul 17 '20 at 03:44

score 0 · Answer 1 · answered Jul 18 '20 at 03:38

0

I think you'll want to add an event listener for will-navigate. Docs can be found here. The important piece:

[The will-event event will be] emitted when a user or the page wants to start navigation. It can happen when the window.location object is changed or a user clicks a link in the page.

I'd imagine your main.js file will look something like this, it's bare-bones but I hope you get the idea.

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;
    });
});

FYI: This event listener is mainly used for security reasons, but I don't see why you can't use it in your case.

answered Jul 18 '20 at 03:38

reZach

8,945
12
51
97

Thanks Zac! Just tried it, but the inner 'will-redirect' is never triggered. Also if I do it like this: 'win.webContents.on("will-redirect", (event, navigationUrl) => {...}' (I mean without the encasing 'web-contents-created') it is not triggered. Instead when using 'will-navigate', indeed event.preventDefault() works (I tried that already in the past), but then also window.location is not set to the new URL. – Bernd Jul 18 '20 at 08:45
@Bernd Hm, two suggestions then. In your electron app, you need to make a route for every single possible path you may have, ie. https://github.com/reZach/secure-electron-template/blob/master/app/src/core/routes.jsx. Otherwise, you need to change your angular app to always exist at a single url, but parameters you need to change, you will need to put them as hash parameters in your url (https://stackoverflow.com/a/14974448/1837080) – reZach Jul 18 '20 at 19:05
I don't know if I understand your suggestion correctly. In my app there is currently only a single route which displays the main page. The legacy code which I talked about, is doing multiple AJAX requests to different routes (to an external server), but that's not a problem, because I can rewrite the URLs by catching the ````onBeforeRequest````. The problem is that the legacy code needs the window.location object to point to the external server. But as said, I can't set it to that server, because then the Electron BrowserWindow is immediately replaced with the server content. – Bernd Jul 20 '20 at 08:17
Ah, I think I understand more now. You likely need to re-write your front-end app, either to not use window.location, or perhaps pass in hash parameters (so that the page doesn't reload) – reZach Jul 22 '20 at 02:46

Set $location in AngularJS / Electron app

1 Answers1