Browser return button detection

Question

I need to determine if the user clicked the back button or not. For this I use

window.onbeforeunload = function (e) { } 

It works if the user clicks the back button. But this event also fires if the user presses F5 or reloads the browser. How to fix it?

Answer 1

So as for AJAX ...

Disabling when using most web applications using AJAX to navigate certain parts of the page is a HUGE problem. I do not agree that “disabling a button means that you are doing something wrong,” and in fact, developers in various aspects have long encountered this problem. Here is my solution:

 window.onload = function () { if (typeof history.pushState === "function") { history.pushState("jibberish", null, null); window.onpopstate = function () { history.pushState('newjibberish', null, null); // Handle the back (or forward) buttons here // Will NOT handle refresh, use onbeforeunload for this. }; } else { var ignoreHashChange = true; window.onhashchange = function () { if (!ignoreHashChange) { ignoreHashChange = true; window.location.hash = Math.random(); // Detect and redirect change here // Works in older FF and IE9 // * it does mess with your hash symbol (anchor?) pound sign // delimiter on the end of the URL } else { ignoreHashChange = false; } }; } } 

As far as I could tell that this works through chrome, firefox has not tested IE yet .

Answer 2

Try this (if the browser does not support "onbeforeunload"):

 jQuery(document).ready(function($) { if (window.history && window.history.pushState) { $(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, './#forward'); } }); 

Answer 3

Best way i know

  window.onbeforeunload = function (e) { var e = e || window.event; var msg = "Do you really want to leave this page?" // For IE and Firefox if (e) { e.returnValue = msg; } // For Safari / chrome return msg; }; 

Answer 4

Since the back button is a browser feature, it can be difficult to change the default functionality. However, there are some problems. Take a look at this article:

http://www.irt.org/script/311.htm

Generally, the need to disable the back button is a good indicator of a problem / lack of programming. I would like to find an alternative method, for example, setting a session variable or cookie that saves whether the form has already been submitted.

Answer 5

I assume that you are trying to cope with Ajax navigation and not trying to prevent your users from using the "Back" button, which violates almost all principles of user interface development.

Here are some possible solutions: JQuery Salajax History Best Ajax Back Button

Answer 6

I find the back button as follows:

 window.onload = function () { if (typeof history.pushState === "function") { history.pushState("jibberish", null, null); window.onpopstate = function () { history.pushState('newjibberish', null, null); // Handle the back (or forward) buttons here // Will NOT handle refresh, use onbeforeunload for this. }; } 

This works, but I have to create a cookie in Chrome to detect that I first got to the page, because when I enter the page without control with the cookie, the browser does the opposite without clicking any button.

 if (typeof history.pushState === "function"){ history.pushState("jibberish", null, null); window.onpopstate = function () { if ( ((x=usera.indexOf("Chrome"))!=-1) && readCookie('cookieChrome')==null ) { addCookie('cookieChrome',1, 1440); } else { history.pushState('newjibberish', null, null); } }; 

}

AND VERY IMPORTANT, history.pushState("jibberish", null, null); duplicates browser history.

Does anyone know who can fix this?