Javascript or Jquery Browser Back Button Click Detector

Jquery when back button is pressed

You can sort of do it using the popstate event:

window.onpopstate = function() {
  alert("pop!");
}

or in jQuery:

$(window).on('popstate', function(event) {
 alert("pop");
});

However this will also trigger when navigating forward, not only backward.

detecting browser back button in javascript/jquery without using any external plugins

That can be simply dropped into your web page, and when the user clicks back, it will call a function. The default function on this call is a javascript alert “Back Button Clicked”.

To replace this functionality, you simply need to override the OnBack function. This can be done by using the code below.

<script type="text/javascript">
bajb_backdetect.OnBack = function()
{
   alert('You clicked it!');
}
</script>

This will now replace the “Back Button Clicked” alert with a “You clicked it!'” alert.

support following browsers
IE8,IE9,FireFox,Chrome

Browser Back Button Detection

Or using jquery

Catching browser back

Using standard javascript

Mastering The Back Button With Javascript

How to call an event when browser back button is clicked

window.userInteractionTimeout = null;
window.userInteractionInHTMLArea = false;
window.onBrowserHistoryButtonClicked = null; // This will be your event handler for browser navigation buttons clicked

$(document).ready(function () {
    $(document).mousedown(function () {
        clearTimeout(window.userInteractionTimeout);
        window.userInteractionInHTMLArea = true;
        window.userInteractionTimeout = setTimeout(function () {
            window.userInteractionInHTMLArea = false;
        }, 500);
    });

$(document).keydown(function () {
        clearTimeout(window.userInteractionTimeout);
        window.userInteractionInHTMLArea = true;
        window.userInteractionTimeout = setTimeout(function () {
            window.userInteractionInHTMLArea = false;
        }, 500);
    });

    if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            if (!window.userInteractionInHTMLArea) {
                // alert('Browser Back or Forward button was pressed.');
                 }
    if(window.onBrowserHistoryButtonClicked ){
    window.onBrowserHistoryButtonClicked ();
            }
        });
    }
});

Javascript or jquery Event For detecting Back button of the browser

This is a way that I currently use for my app, to detect back button on some page which aimed to support modern cross-browsers both desktop and mobile.

Homepage

var isFromView = false;
$(function() {
  // Check if browser supports LocalStorage
  if(typeof(Storage) !== 'undefined') {
    var currentValue = localStorage.getItem('fromSource');
    if (currentValue && currentValue === 'view') {
       // Set isFromDetail to true
       isFromView = true;
    }
    else {
       localStorage.removeItem('fromSource');
    }

    try {
       // Set fromSource in localStorage.
       localStorage.setItem('fromSource', 'home');
    }
    catch (err) {
       // Need this for safari mobile private mode !!
    }
  }
});

Viewpage

$(function() {
  // Check if browser supports LocalStorage
  if(typeof(Storage) !== 'undefined') {
    try {
       // Set fromSource in localStorage.
       localStorage.setItem('fromSource', 'view');
    }
    catch (err) {
       // Need this for safari mobile private mode !!
    }
  }
});

++: I've gone through with history API to perform action on back button. But with no success in supporting some mobile devices browsers.

---

Related Topics