How to detect is that back button OR forward button clicked by javascript? - Stack Overflow

admin管理员组

文章数量:1332889

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

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

• javascript
• back-button

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Feb 3, 2017 at 23:16 curiousBoycuriousBoy 6,83466 gold badges5151 silver badges6060 bronze badges 7

• 1 Possible duplicate of How do I retrieve if the popstate event es from back or forward actions with the HTML5 pushstate? – pizzarob 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! – curiousBoy Commented Feb 3, 2017 at 23:37
• You are right, its 2012, but it is still the way to detect history navigation. – Ibu Commented Feb 3, 2017 at 23:51
• you'll have to manually keep track of some sort of index – pizzarob Commented Feb 4, 2017 at 5:26
• 1 I put some up-to-date code there, in case it helps. – Michael Allan Commented Mar 16, 2018 at 21:25

 |  Show 2 more ments

1 Answer 1

Sorted by: 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 !

本文标签： How to detect is that back button OR forward button clicked by javascriptStack Overflow