2

Stack Overflow has several questions related to detecting back button presses, the most relevant one being a list of libraries for doing exactly that:

https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin

The problem is, when I tried using libraries from that thread (and elsewhere) they all either:

  • didn't work (anymore; they must have worked once)
  • didn't support IE8
  • broke Backbone's router

The problem seems to be that Backbone's router watches for hashchange events, and so do these other libraries, and they do so in a way which affects Backbone's Router (eg. one made the back button completely stopp working).

So, my question is, does anyone know of a way to detect back-button presses, that works in IE8+, which (and this is the key part) doesn't break the Backbone Router?

Or failing that, can anyone even explain or point me to an explanation of how to implement back-button-prevention myself on a Backbone.Router-powered site?

Community
  • 1
  • 1
machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Did you use hash while navigating between views. http://caniuse.com/#feat=hashchange IE8 and above has the support – prashanth Jul 02 '13 at 23:37
  • Is there any particular reason you cannot leverage the `pushState` API? It looks like Backbone.js supports this out of the box - http://backbonejs.org/#History – dana Jul 09 '13 at 16:25
  • The problem is precisely that: Backbone's Router uses the pushState API, so if I try the usual tricks for detecting back button clicks I wind up breaking Backbone. – machineghost Jul 10 '13 at 03:04

2 Answers2

1

If you're trying to eliminate particular clicks from being retriggered with the back button (like delete events), easiest approach is to prevent them from being added to history in the first place with preventDefault() as part of your onclick event function.

If that's your issue this would be a good article to read: http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/

Here's a fairly simple method for detecting a back click with Backbone: backbone routing detecting whether forward or back pressed

Community
  • 1
  • 1
KevJ
  • 31
  • 3
  • Thanks for the suggestion, but in my case I'm really more concerned about the case of 1) user types a ton of info in to a giant form on our site, 2) user clicks back button on accident, 3) user loses all their work. I know there are tricks one can do with pushing a special state on to the stack so that when the user clicks back, instead of going back one page they go to the page they were on (and don't lose their data) ... but when I've tried to implement that sort of thing myself, I wind up breaking Backbone's routing (which is integral to our site) :-( – machineghost Jul 10 '13 at 03:07
  • For that you probably want to use [window.onbeforeunload](https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload) – evilcelery Feb 28 '14 at 16:26
1

If you are using pushState, you can use window.onpopstate

window.onpopstate = function(event) {
  console.log(document.location);
};
kehers
  • 4,076
  • 3
  • 30
  • 31
  • Thanks, but you missed the point about working with Backbone. It's far from trivial to just "use window.onpopstate" without impacting the Backbone Router. – machineghost Feb 03 '14 at 18:45