Detecting Browser History Actions

Question

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){

}

PlantTheIdea · Accepted Answer · 2013-01-29T15:25:05.427

20

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.

edited Jan 29 '13 at 15:25

answered Jan 29 '13 at 15:12

PlantTheIdea

15,781
5
32
40

1

I don't think it has anything to do with manual back and forward button presses. – gdoron is supporting Monica 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 is supporting Monica 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 is supporting Monica 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

score 2 · Answer 2 · answered Jul 23 '15 at 01:37

2

And for AngularJS

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

answered Jul 23 '15 at 01:37

LeCanardNoir

19
4

score 0 · Answer 3 · answered Mar 24 '22 at 11:03

The popstate event has state property. You should track its value to detect whether Back or Forward button was pressed.

var previousState = 0
window.addEventListener('popstate', (event) => {
  if (event.state > previousState) {
    console.log('Forward button pressed')
  } else {
    console.log('Back button pressed')
  }
  previousState = event.state
})

Detecting Browser History Actions

3 Answers3

Linked