Preventing back button navigation in SPAs20 Mar 2016
For sites using a SPA (Single Page Application) architecture on the client-side, it’s difficult to come up with an alternative to
window.onbeforeunload event which is provided by the browser. When the client is merely switching different views and not actual pages, there is no
window.onbeforeunload event to tap into.
So what do you do if you want to prevent users from navigating away from a certain view using the back-button? I’m going to talk about strategy which will allow us to mimick behavior offered by
window.onbeforeunload. It basically relies on adding a random hash to the URL and then tapping into the
window.onhashchange event when that hash is removed.
Here’s how it works:
TL;DR: Scroll to the bottom for a link to the demo
First when you load a view from which you want to prevent your users from navigating away with the back-button, call a function to add a random hash to the URL:
You’ll notice that we prefixed our random hash with
#ng- and added a
navGuard attribute to the history, this is done mainly so we can detect navigation events related to our nav guard logic and prevent things like tracking page events in Google Analytics or initializing 3rd party modules, etc.
So now you want to subscribe to the hash change event. When it changes, show a native
confirm dialog similar to what you see with the
So what you see there is, if they confirm the prompt, we take them back to the previous page if there is one.
window.history.length should be greater than 2 because we have to count the current URL without the hash and the previous URL with the hash.
That’s it. It’s a bit of a hack but that’s the best I could could think of. I’d love to hear of any other techniques that you guys are using.
Demo: https://jsfiddle.net/qz2p9b63/3/ (To test, hit your browser’s back button)