javascript act on page events

Question

I've javascript error page which the user is getting in some uses-cases(which is valid).

The error page tell to the user what to do and have a link where to go , when user finish to activate some service, he get back to the error page, user click on refresh F5 he get an error, the error because he have "?code=…" in the URL and additional parameters...

I think to catch the F5 event and clear url from the parameters, is it possible? if not which options do I have?

The scenario

user click on the app new page it opened
the page says something like "you are not subscribed to the service click on the link below to learn how"
user click on the link and open new tab run the process and make subscription, now everything is ok.
user back to the error page and hit refresh , now he get the error as the page is already contain some url pararmeters,

How can I solve this kind of issue?

Im using nodejs12 with simple js/html files. not using any ui frameworks....

Refreshing will go to the same page. Clearing the parameters wouldn't be possible, as you're essentially trying to hijack the refresh to lead elsewhere. Instead you can probably redirect when the user lands on the page - either from the backend or from JS, although be ware that the latter might be more unreliable. — VLAZ, Oct 15 '20 at 19:47
Does this answer your question? [How to call javascript on F5 key press](https://stackoverflow.com/questions/56908911/how-to-call-javascript-on-f5-key-press) — Asaf, Oct 15 '20 at 19:55
@VLAZ - what do you mean by "redirect when the user lands on the page", think that the user get an error page that tell him something like "you unsbscribe to the service , click on the link to learn how to do it" , now the user click and open a new page run the subscription and now it's ok but when he refresh the error page he get the error, could your suggestion work? — DavM, Oct 15 '20 at 20:01
@DavM I don't know your stack, nor do I know how your project functions, nor the specifics of how you currently handle this case, so I cannot give you a concrete answer. However, you cannot hijack the refresh - you can run code on leaving the page but that's rather limited in what it can do. Hence, the only sane alternative is to run code on *landing* on the page. Since you want to strip some parameters from the URL, that can be done via a redirect. This redirect can be a redirece (3XX HTTP status codes) or in JS in the browser. You have to determine when to enact the redirect and do it. — VLAZ, Oct 15 '20 at 20:07
@VLAZ - I use nodej12 with very simple js/html file ,`not` using react/vue/angular...not sure that i got your proposal, could you provide an example or reference for it? — DavM, Oct 15 '20 at 20:15
Backend redirect: [How to redirect user's browser URL to a different page in Nodejs?](https://stackoverflow.com/q/11355366) | [Nodejs - Redirect url](https://stackoverflow.com/q/4062260) Browser location change: [How do I redirect to another webpage?](https://stackoverflow.com/q/503093) | [How do I modify the URL without reloading the page?](https://stackoverflow.com/q/824349) | [Change URL parameters](https://stackoverflow.com/q/1090948) — VLAZ, Oct 15 '20 at 20:21
@VLAZ - Thanks, one thing that I miss, when the user click on the link on the error page and open new tab, what should I do in the previous page(error page) ? is it possible(via some event) that when the user click on the link and open a new page I will redirect the error page to other place? — DavM, Oct 15 '20 at 20:35

CleverSkull · Answer 1 · 2020-10-15T21:29:07.413

The basic answer is this:

document.addEventListener('keypress',function(e){
    e = e || window.event;
    if (e.keyCode == 116) {
        window.location.href = window.location.pathname;
    }
},false);

You can use the following code instead of the basic redirect:

if(typeof URLSearchParams != undefined){
    var usp = new URLSearchParams(window.location.search);
    if(usp.get("code")!=null){
        usp.delete("code");
    }
    window.location.href = window.location.pathname+"?"+usp.toString();
} else {
    window.location.href = window.location.pathname;
}

Also you can use this: (this won't refresh the page)

if(typeof URLSearchParams != undefined){
    window.url=window.location.pathname+window.location.search;
    var usp = new URLSearchParams(window.location.search);
    if(usp.get("code")!=null){
        usp.delete("code");
        window.url=window.location.pathname+"?"+usp.toString();
    }
    if(window.history.replaceState){window.history.replaceState(null,null,window.location.href);}
    if(window.history.pushState){window.history.pushState(null,document.title,window.url);}
} else {
    window.location.href = window.location.pathname;
}

Both of the above will refresh the page if the URLSearchParams is not supported.

Because you are using F5 key you can use this one:

document.addEventListener('keypress',function(e){
    e = e || window.event;
    if (e.keyCode == 116) {
        if(typeof URLSearchParams != undefined){
            var usp = new URLSearchParams(window.location.search);
            if(usp.get("code")!=null){
                usp.delete("code");
            }
            window.location.href = window.location.pathname+"?"+usp.toString();
        } else {
            window.location.href = window.location.pathname;
        }
    }
},false);

Thanks, Could you please explain a bit on each section what it does? should I use them together, each section provide diffrent option ? — DavM, Oct 15 '20 at 21:20
You can put one of the bottom ones to the first one. You need to put the code inside the if (replacing the window.location.href.....) Because you are using F5 the page will be refreshed in any way. So you need to use the 2nd code there. You can note the 3rd code somewhere, it can remove a parameter from the url without refreshing. — CleverSkull, Oct 15 '20 at 21:26

javascript act on page events

1 Answers1