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?

You could try [`performance.navigation.type`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation/type) — Adelin, Jun 19 '18 at 06:16
I don't rely on, I just want to call a function on back button of the browser. — stack, Jun 19 '18 at 06:23
@Adelin Seems that's exactly what I was looking for, just do you know any example of using it? — stack, Jun 19 '18 at 06: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, Jun 19 '18 at 06:29
Possible duplicate of [detect back button click in browser](https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser) — Dinesh Ghule, Jun 19 '18 at 07:57

score 4 · Answer 1 · answered Jun 19 '18 at 06:28

4

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)

answered Jun 19 '18 at 06:28

Adelin

7,809
5
37
65

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`. – stack Jun 19 '18 at 06:30
Most probably the hash didn't change. – Adelin Jun 19 '18 at 06:36
Well it does .. I see the change in the URL as well. – stack Jun 19 '18 at 06:36
1

I kept googling. It could be that other events are canceling this one. There's also [`popstate`](https://developer.mozilla.org/en-US/docs/Web/Events/popstate) that you can maybe use. And apparently there are plenty of solutions [here](https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser) as well – Adelin Jun 19 '18 at 06:41
`popstate` works for back button. But it `performance.navigation.type` returns `1` for both situations (my-website-back-button and the-browser-back-button) – stack Jun 19 '18 at 07:06

score 1 · Answer 2 · answered Jun 19 '18 at 06:34

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.

How can I detect back button in the browser?

2 Answers2