title: How to show alert on browser back button click event using jquery
body: <p>I want to show alert while clicking on the back button in the browser. it only works before clicking on the back button, when you click to somewhere else on the page, otherwise, it will go to the previous page without alert message.</p>
  
  <p>I have added my code here. I want to go back when the page loads.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function() {
          if (window.history &amp;&amp; window.history.pushState) {
          //window.history.pushState('', null, './');
          window.history.pushState(null, "", window.location.href);
          $(window).on('popstate', function() {
              alert('Warning! Your data will lose.');
              document.location.href = 'www.redirecturl.com';
  
          });
       }
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Disable Browser Back Button Using JavaScript&lt;/title&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"&gt;
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="Page2.html"&gt;Click Here...&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using JQuery here</p>