How to prevent closing browser window?

user_42348 0
Viewed 85848

I tried the following code to get an alert upon closing a browser window:

window.onbeforeunload = confirmExit;
function confirmExit() {
  return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}

It works, but if the page contains one hyperlink, clicking on that hyperlink raises the same alert. I need to show the alert only when I close the browser window and not upon clicking hyperlinks.

onbeforeunload window browser javascript
4 Answers

Another implementation is the following you can find it in this webpage: http://ujap.de/index.php/view/JavascriptCloseHook

<html>
  <head>
    <script type="text/javascript">
      var hook = true;
      window.onbeforeunload = function() {
        if (hook) {
          return "Did you save your stuff?"
        }
      }
      function unhook() {
        hook=false;
      }
    </script>
  </head>
  <body>
    <!-- this will ask for confirmation: -->
    <a href="http://google.com">external link</a>

    <!-- this will go without asking: -->
    <a href="anotherPage.html" onClick="unhook()">internal link, un-hooked</a>
  </body>
</html>

What it does is you use a variable as a flag.

netadictos_317910

Keep your code as is and use jQuery to handle links:

$(function () {
  $("a").click(function {
    window.onbeforeunload = null;
  });
});
M_Utku_ALTINKAYA_409480

I have added an additional code that will to handle further process of if window is closed

let disableConfirmation = false;
window.addEventListener('beforeunload', event => {
  const confirmationText = 'Are you sure?';
  if (!disableConfirmation) {
    event.returnValue = confirmationText; // Gecko, Trident, Chrome 34+
    return confirmationText;              // Gecko, WebKit, Chrome <34
  } else {
    // Set flag back to false, just in case
    // user stops loading page after clicking a link.
    disableConfirmation = false;
  }
});

After Confimation if you want to send any ajax request and you have used jquery

 $(window).on('unload', function() {
   // async: false will make the AJAX synchronous in case you're using jQuery
   axios
     .get('ajax_url')
     .then(response => {});
 });

And if no jquery is used you can use navigator, it require navigator library

navigator.sendBeacon(url, data);

you can download this library from here : https://github.com/miguelmota/Navigator.sendBeacon

Admin1
Related