Back/Forward buttons of browser

Question

How can I detect that user is pressing Back button in javascript or jquery ? We need to fire an event if the user is pressing the backbutton.

Midhun Tp · Answer

Ok, I made some changes in script. Please check it with below script - $(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, '#'); } } }); window.history.pushState('forward', null, '#'); } });

Sreekanth Reddy · Answer

@Midhun, Excellent work & thanks a lot for your help.

Midhun Tp · Answer

Hi Srikanth, Declare var a outside document.ready

Sreekanth Reddy · Answer

Always getting "a" value as 0(zero). Even though I change the textbox. Onchange its working fine. But that(updated "a" value) value is not coming to $(window).on('popstate'... $(document).ready(function () { var a = 0; $("input[type='text']").change(function () { a = 1; console.log("a is " + a); }); $(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.'); if (a == 1) { alert("a is if part 1" + a); window.history.pushState('forward', null, '#'); } else { alert("a is else part 1" + a);} } } }); if (a == 1) { alert("a is if part 2" + a); window.history.pushState('forward', null, '#'); } else { alert("a is else part 2" + a); } } });

Sreekanth Reddy · Answer

@ Midhun , Your code is working fine. But it's working only for first time. Means I'm able to get the alert for first time only. Not getting the alert from the second time onwards. It's redirecting away from 2nd click. whereas it's stopping only first time.

Vinay Singh · Answer

check the link http://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser http://stackoverflow.com/questions/11379411/how-can-i-detect-the-back-forwards-buttons-being-clicked-when-using-history-js

Midhun Tp · Answer

Hi, Got this piece of code from net. It works for back button. Try it. $(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, '#'); } }); Also please have a look at this link - http://www.w3schools.com/jsref/event_onbeforeunload.asp

Back/Forward buttons of browser

Answers (7)