Is there a way to prevent leaving a webpage with the browser back button?

Question

1) I'm trying to find a way to show a confirm pop-up at leaving the page through the browsers back button. The unload event doesn't seem to fire in this case. I'm using angular2. I have tried subscribing to all navigation events:

this.router.events.pairwise().subscribe((e) => {
  if (e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart) {
    console.log(e[0].id + " " + e[0].url + ", " + e[1].id + " " + e[1].url);
    if (!this.whateverService.canNavigateAway) {
      //var b = confirm("You have unsaved changes. Navigate away?");
    }
  }
});

But I can't seem to cancel the navigation.

2) If there is no way to cancel navigating away with the back button, other problems arise. How do I distinguish between back and forward, or going back 3 pages? Then it would be good to know the positions of the pages being navigated to and from in the local browser history. I would like to know for example that there are 7 pages total in the history and we are navigating from the page at index 5 to the page at index 4. That way I could navigate back to where I want without messing up the history.

You could have a look at the history api. https://developer.mozilla.org/en-US/docs/Web/API/History_API You could potentially use the pushState to place a fake URL entry. You could possibly also do this with a fake #anchor tag, on page load maybe trigger a fake click on an achor.. — Keith, Nov 16 '16 at 15:50
You can look into the History API, certainly, but be aware that the History API doesn't do what *you* want; it wants *you* to do what *it* wants. It's weird and challenging. — Pointy, Nov 16 '16 at 21:25

Mike · Accepted Answer · 2016-11-16T16:11:25.080

As far as I know, short of using fake url's as @keith suggested, there isn't much you can do to control them. The navigation buttons exist outside the realm of our total control seeing as they are a part of the browser itself and not the webpage, therefore they can't be explicitly halted on our request. These are things built into the browser that really should not be messed with as you don't want to cause unpredictable behavior. It is smarter to develop your application around this fact rather than try and combat it.

In addition, to all that, you do not want to be intrusive on the browser. As soon as you start dealing with things you didn't explicitly create or were given access to, you're crossing a line into the land of assumption and that is a very dangerous place as I've come to learn.

If you are trying to keep a stateful system then that can be managed on the back end on a user to user basis that is not intrusive at all and makes for a pleasant user experience that doesn't impede normal browser operation,

Thank you for your answer, I will try to convince my team of this. — Zsolt Z., Nov 16 '16 at 17:04

score 2 · Answer 2 · edited May 23 '17 at 12:25

2

If it's enough to show an un-customized alert/prompt before leaving you could do this:

window.onbeforeunload = function() {
    return 'Something that is not undefined';
}

Tested in Chrome, and it seems you cannot set the text in the alert that shows up.

Edit: I didn't post the sources, as it didn't seem to work as they described, but here is the MDN documentation and a StackOverflow answer.

edited May 23 '17 at 12:25

Community

1
1

answered Nov 16 '16 at 16:05

ArneHugo

6,051
1
26
47

If he uses this, he will have to deal with it at every refresh or submit or page change. – Incepter Nov 16 '16 at 16:06
This alert only shows up when leaving the domain (anything before the first slash in the url changes). Perhaps that's not what was asked for? – ArneHugo Nov 16 '16 at 16:14
Hi, I need it to show up every time the user presses the back button. Even if they navigate from /myapp/form1 to /myapp/form2. – Zsolt Z. Nov 17 '16 at 08:53
I see. Then ignore my answer. – ArneHugo Nov 17 '16 at 11:39

Is there a way to prevent leaving a webpage with the browser back button?

2 Answers2