15

I am building a Html 5 website using push state and I wondering whether its possible in javascript or JQuery to detect whether the browser's back button has been pushed. I would like to include it in an if statement like so:

if (back_btn clicked){
//do stuff
}
if (forward_btn clicked){

}
Nuvolari
  • 1,103
  • 5
  • 13
  • 29

2 Answers2

21

You're looking for the popstate event.

An example:

window.onpopstate = function(event) {
    alert("location: " + document.location);
}

Or with the ever-popular jQuery:

$(window).on('popstate',function(event) {
    alert("location: " + document.location);
});

This fires whenever history is accessed, such as back/forward. A quick note, in Chrome this also fires on the page load, so a quick way around is to check if the event is null.

if(event.originalEvent.state!=null){
    // do something
}

Another good resource is the History.js jQuery plugin, which has a fallback using hashtags and such. It also makes detection of popstate events very straightforward.

PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40
  • 1
    I don't think it has anything to do with manual back and forward button presses. – gdoron Jan 29 '13 at 15:15
  • 1
    you obviously did not go to the page. or have ever used it. – PlantTheIdea Jan 29 '13 at 15:17
  • 1
    The second option... :), and I just didn't read it carefully. :( – gdoron Jan 29 '13 at 15:17
  • (Not the OP) This is Interesting... Can you abort the action with prevent default in this event? Also does it work with jQuery? – dualed Jan 29 '13 at 15:17
  • @dualed: _"Cancelable- No."_ – gdoron Jan 29 '13 at 15:18
  • @dualed - ah, i misread what you asked, no you cant prevent the action entirely – PlantTheIdea Jan 29 '13 at 15:19
  • Thank you both, LifeInTheGrey and @gdoron – dualed Jan 29 '13 at 15:20
  • 1
    Oh and @LifeInTheGrey the link to the ["pushstate magic"](http://stackoverflow.com/questions/5121666/when-the-back-button-triggers-popstate-how-can-i-prevent-a-page-refresh) was great too ;) – dualed Jan 29 '13 at 15:22
  • haha yeah sorry for deleting it, i didnt want to confuse people. its a good reference nonetheless. – PlantTheIdea Jan 29 '13 at 15:23
  • Hi your code will tell me the current location but what I am really looking for is to tell whether user has gone 'backwards' in history or 'forwards'. – Nuvolari Jan 29 '13 at 16:01
  • Ok nvm it seems it's not possible to access that in javascript for security reasons. – Nuvolari Jan 29 '13 at 16:07
  • 1
    the only way i can think of is through maintaining the log of their locations in sessionStorage as a prevPage array (and if back button has been pressed, nextPage), and then comparing it onpopstate to the target in history once loaded. itd be super hacky though, and ive never done anything like that. – PlantTheIdea Jan 29 '13 at 16:29
  • This _stellarly_ doesn't work for instance in Chrome browsers when the user steps back by using the Back button. – Edward Munch Jan 17 '22 at 18:39
2

And for AngularJS

$window.onpopstate = function(e) {
    $window.alert("location: " + $location.path());
}
LeCanardNoir
  • 19
  • 4