jQuery Plugin To Detect Back Button Click In Browser - backDetect

jQuery Plugin To Detect Back Button Click In Browser - backDetect

backDetect is a jQuery plugin used to detect and fire a callback function when the user clicks on the back button in the browser. Useful to display a confirmation dialog when the users are about to leave the current webpage.

See also:

How to use it:

1. Include the jQuery backDetect plugin after jQuery library.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.backDetect.js"></script>

2. It's a very simple and straightforward plugin, just call on it in the following way. It can be attached onto any DOM element at either document.ready or window.load, but I would recommend attaching this function to the body at window.load in the following fassion:

$(window).load(function(){
  $('body').backDetect(function(){
    alert("Look forward to the future, not the past!");
  });
});

3. You can also set a delay to the back detect like this:

$(window).load(function(){
  $('body').backDetect(function(){
      // Callback function
  });
}, 1000); // <- 1 second delay

4. Integrate the plugin with Bootstrap modal.

$(window).load(function(){
  $('body').backDetect(function(){
    $('#myModal').modal('show')
  });
});

Change log:

2018-01-16

  • JS update & improvement

2016-11-14

  • removed the need for the 1x1.png image for IE

This awesome jQuery plugin is developed by ianrogren. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 16.01.2018
  • Source