A better solution to catch the back button of browser across all browser and platform

Question

I want to catch the browser back button before any thing happened to page. I have looked into many solutions, some catch this event when the previous page is loaded fully, I don't need that. I need to catch it before even any thing happen. I found another good solution,

$(window).on('popstate', function() {
  var hashLocation = location.hash;
  var hashSplit = hashLocation.split("#!/");
  var hashName = hashSplit[1];

  if (hashName !== '') {
    var hash = window.location.hash;
    if (hash === '') {
        alert('Back button was pressed.');
    }
  }
});
window.history.pushState('forward', null, '#b');
}

Quite effective solution, this catch back button event before even anything happened to the page but this write #b with my URL, which is not acceptable.
Need help, to catch any browser back button, before even any thing happen to the page.

Actually, my complete story is, When back is pressed i store a variable in cookie. Soon script is first hit on page load, i check cookie, theni reload the whole page. So that a server side is call generated instead of cache. Any alternative solution?

I am looking for a solution for a quite long time, but no effective solution found yet. Thanks in advance.

All i want to set a cookie, when some one press back button, there is really no way to do it? — Muhammad Bashir, Jul 19 '16 at 17:33
unload is hit, when you simply redirect to another page, so Useless. — Muhammad Bashir, Jul 19 '16 at 17:35
Actually, my complete story is, When back is pressed i store a variable in cookie. Soon script is first hit on page load, i check cookie, theni reload the whole page. So that a server side is call generated instead of cache. Any alternative solution? — Muhammad Bashir, Jul 19 '16 at 17:44
So you want to prevent client side caching? that's an important piece of info. Your best bet is to make sure the server always tells the client that the file isn't the same as the last time they hit. see http://stackoverflow.com/questions/5496801/disable-client-side-caching or http://serverfault.com/questions/256558/is-there-a-way-to-turn-off-client-browser-caching-for-specific-websites The first one assumes ASP and c3 in the back end though. the second has a more general answer - but it looks like a simple enough http header to add to the response. — Richard Barker, Jul 19 '16 at 17:49
@MuhammadBashir no alternate solution. Browsers grab from cache because it's efficient. You just have to ensure that your scripts are robust enough to handle when they're navigated to via history, that's how you deal with it. — Patrick Roberts, Jul 19 '16 at 17:50
@PatrickRoberts or you tell the client that their cache is outdated and they need to update it. — Richard Barker, Jul 19 '16 at 17:51
@RichardBarker that's one thing when you're randomly navigating to a page, but via back button, that's a different story. — Patrick Roberts, Jul 19 '16 at 17:53
@PatrickRoberts see http://stackoverflow.com/questions/1313788/how-does-the-back-button-in-a-web-browser-work — Richard Barker, Jul 19 '16 at 17:56
@RichardBarker I understand how the back button works, which was part of my point. You can't control what the back button does, it navigates to whatever URI you were last on, regardless of whether or not it makes sense with the site's breadcrumbs or whatever. So there's really no point in disabling cache unless you expect the last URI to serve content that was different than a few minutes ago (like a news website or active forum). My recommendation is that this person is going about trying to solve his problem in the wrong manner, he needs to focus on what the script on the other page is doing — Patrick Roberts, Jul 19 '16 at 18:17
@PatrickRoberts You're assuming he has access to the source of the previous page. What the back button does exactly is browser dependent. But from what the OP has asked and added, it appears that he wishes to prevent caching of the pages in his control. My link was meant to bring attention to the last paragraph of the selected answer that basically says that navigating to the last URI means that the browser will - most likely - do new GET or POST to that page if not cached. So if the OP wants to prevent caching he can regardless of the back button -- the back button doesn't matter here. — Richard Barker, Jul 19 '16 at 18:44

score 0 · Accepted Answer · answered Jul 20 '16 at 10:16

Finally i found solution for i was looking for. I need to handle back button because i don't want to load page from cache. I cannot stop caching, because i want my browser to cache CSS and jquery, but not html. stop caching only HTML is not possible so far i think.

So i found a solution, I add a cookie in my server side, RequestedFrmServer. Set it 1 each time my code at server is hit (or when server side request is generated), soon my client side script is hit, i set it back 0 only. I placed a condition, if the value is 0 then reload the whole page.

here is the code.

var _historyBack = $.cookie('RequestedFrmServer');
if (_historyBack != undefined && _historyBack == "1")
{
    setCookie("RequestedFrmServer", "0");
}
else if(_historyBack != undefined && _historyBack == "0")
{
    window.location.reload(true);
}

worked in my case. If work for you, i deserve a thumb up. :)

A better solution to catch the back button of browser across all browser and platform

1 Answers1