How can I detect back button in the browser?

Question

I have a function named back() which will be used for ajax calls. Actually I have an array stack contains last 5 search results and that back function will switch to the previous result set (according to that array stack) and it even changes the URL using window.history.pushState() when you click on the back button.

That back button I was talking about, is an element inside the browser which revokes back() function. Now I want to revoke back() function also when user click on the back button of the browser. Something like this:

window.onhashchange = function() { back(); // this function also changes the url }

But sadly window.onhashchange will be revokes twice when I click on the back of the browser. Because window.onhashchange will be revoked when you change the URL using window.history.pushState().

Anyway, how can I detect what things changes the URL? Either my JS code or the back button of the browser?

I don't rely on, I just want to call a function on back button of the browser. — stack
– stack, Commented Jun 19, 2018 at 6:23
@Adelin Seems that's exactly what I was looking for, just do you know any example of using it? — stack
– stack, Commented Jun 19, 2018 at 6:23
Since you say it's what you are looking for I just posted an answer. Usage is straightforward -> read the value at any given point. It is written to once and it is read-only. — Adelin
– Adelin, Commented Jun 19, 2018 at 6:29

Adelin · Accepted Answer · 2018-06-19 06:28:40Z

You can use performance.navigation.type

At any given point, for example on document.onload, you can read the value of type and, if it's:

0 The page was accessed by following a link, a bookmark, a form submission, a script, or typing the URL in the address bar.
1 The page was accessed by clicking the Reload button or via the Location.reload() method.
2 The page was accessed by navigating into the history.
255 any other way.

Just beware that support is limited according to the compatibilty table. However, from the looks of it, it seems the table is outdated. It says it is not supported on chrome and I just tested it and works as expected on my chrome version (67.0)

Thank you .. upvote. Just one question, why window.onhashchange = function() {} doesn't fired when I click on the back button of the browser? Noted that if ("onhashchange" in window) {} is true.
I kept googling. It could be that other events are canceling this one. There's also popstate that you can maybe use. And apparently there are plenty of solutions here as well
popstate works for back button. But it performance.navigation.type returns 1 for both situations (my-website-back-button and the-browser-back-button)

Nikola Lukic · Accepted Answer · 2018-06-19 06:34:38Z

One of solution is to implement onunload event with localstorage option. This is from my head maybe you will need correction but this is base !

var history = []; window.onload = function(){ var handler; if ( localStorage.getItem('history') == null ) { // FIRST TIME history[0] = window.location.href; localStorage.setItem("history", JSON.stringify(history)); } else { handler = localStorage.getItem('history'); handler = JSON.parse(handler); history = handler; // Just compare now if (history[history.length-1] == window.location.href) { // no change } else { history.push(window.location.href); } } } window.onunload = function(){ localStorage.setItem('history', JSON.stringify(history)); }

Note :

Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.

Collectives™ on Stack Overflow

How can I detect back button in the browser?

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related