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. 

 

Answer 1

Ok,

I made some changes in script. Please check it with below script -

<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, '#');

}

});

</script>

Answer 2

@Midhun,

Excellent work & thanks a lot for your help.

Answer 3

Hi Srikanth,

Declare var a outside document.ready

Answer 4

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);

}

}

});

Answer 5

@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.

Answer 6

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

Answer 7

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