浏览器后退按钮上的确认框

Question

I want to catch the event on back or refresh button of browser. I didn't found any perfect solution that catches only back event and which is compatible with all browsers. please provide some solution.

Thanks in advance.

Answer 1

You can use the event handler onpopstate from HTML5 history API, like this :

$(document).ready(function() {

if (window.history && window.history.pushState) {

$(window).on('popstate', function() {
  //confirmation box
  confirm('Back button clicked!');
});
 }
});

Note that you need to have a page to go back to...

Answer 2

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) {
                //document.location.href = "logOff.htm";
                setTimeout(function(){  var answer = confirm("Are you Sure?? This will expire your session");
                if(answer == true)
                    {
                    document.location.href = "logOff.htm";  
                    }
                },100 );


                //alert('Browser Back or Forward button was pressed.');
            }
            if (window.onBrowserHistoryButtonClicked) {

                window.onBrowserHistoryButtonClicked();
            }
        });
    }
});