0

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.

Zachary Vincze
  • 427
  • 7
  • 24
Muzammil Bajaria
  • 109
  • 1
  • 11
  • forgot to mention that i am working on java – Muzammil Bajaria May 03 '16 at 09:50
  • javascript . What ever may be just want to catch that event – Muzammil Bajaria May 03 '16 at 10:38
  • Do you want to do something like this? http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch – Lesley May 03 '16 at 11:32
  • well i have used onbeforeunload function before. I want web page to provide a confirm box only when back/refresh button of browser is pressed. onbeforeunload triggered every time before leaving that page. so I was not able to navigate to other other pages. if i navigate to other jsp it was showing the confirm box which i don't want. I want something that can capture an event of back/refresh button only. that's what exactly i want.. – Muzammil Bajaria May 03 '16 at 12:22
  • Did you try to turn it off once is triggered? window.onbeforeunload = null; – Jose Hermosilla Rodrigo May 03 '16 at 12:45
  • @JoseHermosillaRodrigo , I tried that solution. that kind of worked. now it is not triggered on submission of form but only on back. – Muzammil Bajaria May 03 '16 at 13:44
  • window.onbeforeunload = function() { return "Your work will be lost." }.. Now i m using this. but the problem now is that now i want a confirm box and if user clicks ok then i want to redirect to a url in controller. i.e i want to invalidate the session . but onbeforeload by default gives confirmation box and if i press ok it will go back to previous page which i dont want. Can you help me with this confirm box thing?? – Muzammil Bajaria May 03 '16 at 13:48
  • onbeforeload only returns null or string and we also cannot use confirm inside that...please provide some solution for that... – Muzammil Bajaria May 03 '16 at 14:26

2 Answers2

0

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

Lotus91
  • 1,127
  • 4
  • 18
  • 31
0
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();
            }
        });
    }
});
Muzammil Bajaria
  • 109
  • 1
  • 11