How to call an event when browser back button is clicked

Question

How to call a jquery event when browser back button is clicked. I am using a single page application in asp.net mvc and i want to show a confirm box to leave the screen when user press the back button of the browser. How can i call a jquery function on browser back button. Please help. I have searched and found push state event but i did not get how to use it in my case described above.

possible duplicate of [JS or Jquery browser back button click detector](http://stackoverflow.com/questions/17594413/js-or-jquery-browser-back-button-click-detector) — Manwal, Sep 05 '14 at 09:29
Check this out http://www.webdevelopmenthelp.net/2013/12/browser-back-button-click-event.html — Rakesh Shetty, Sep 05 '14 at 09:29
You can use jQuery unload method. http://api.jquery.com/unload/ $( window ).unload(function() { alert( "Handler for .unload() called." ); }); — Finoy Francis, Sep 05 '14 at 09:40

score 6 · Answer 1 · edited May 23 '17 at 12:33

6

jQuery(document).ready(function($) {

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

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

JavaScript or jQuery browser back button click detector

edited May 23 '17 at 12:33

Community

1
1

answered Sep 05 '14 at 09:27

Charles-Antoine Fournel

1,713
1
25
37

1

This code shows alert even if i navigate on click of anchor tag and very first time on page load. I want it to be executed only on back button of browser. – Ankit Sahrawat Sep 05 '14 at 09:37
the window.history checking is here to determine if you have already loaded a new page. if not window.history is null and you can't trigger the alert message. you probably have an error in you js script, so check the javascript console from browser – Charles-Antoine Fournel Sep 05 '14 at 09:45

score 2 · Accepted Answer · edited Jul 08 '15 at 08:24

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

This is not working for me.. neither is it giving any error :( — Simone, Jul 08 '15 at 07:22

How to call an event when browser back button is clicked

2 Answers2

Linked

Related