16

Just to ensure, I am NOT asking how to catch back/forward button events. 

window.addEventListener('popstate', function (e) { alert("Yahoooo!!!!"); });

That function above is triggered either it is browser's back button or browser's forward button but I cannot detect which one was clicked? Was it back button or forward button?

Is there any specific event for them that I can detect it was "back" or "forward" button specifically?

EDIT: While I appreciate the "duplicate question" suggestion, the similar question posted here on stackoverflow but the accepted answer is from January 2012!! A lot of things changed since then. Maybe there is already easier way for this!

Thanks

Improve this question
7
  • 1
    Possible duplicate of How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate? Commented Feb 3, 2017 at 23:22
  • The accepted answer is "walk around" and 4 years old for that question!! There may be some easier way around by the time of now! Commented Feb 3, 2017 at 23:37
  • You are right, its 2012, but it is still the way to detect history navigation. Commented Feb 3, 2017 at 23:51
  • you'll have to manually keep track of some sort of index Commented Feb 4, 2017 at 5:26
  • 1
    I put some up-to-date code there, in case it helps. Commented Mar 16, 2018 at 21:25

1 Answer 1

Reset to default
1

I had the same issue, and i found the answer using modern javascript.

The code is available here on GitHub

You can detect browser back and forward button pressed in any js app that relies on popstate / pushstate using :

// e.detail.direction will be the "backward" or "forward" String according the pressed button window.addEventListener('nav::user_asked_history', function(e) { console.log('nav::direction=', e.detail.direction); })

You can show / hide your own in-app back and forward buttons using :

is_nav_forward_possible() is_nav_backward_possible()

And you can also navigate around your in-app user history using

let nav_position; let nav_history;

Have fun with modern JS !

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for your efforts. Only issue I have with that library is that it uses snake_case instead of camelCase, which is very much against JS convention.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.