12

I am currently detecting if a user of my site closes the window/tab or changes the url.

I am using the follwoing code, which works perfectly:

var validNavigation = false;

function endSession() {
  // Browser or broswer tab is closed
  // Do sth here ...
  alert("bye");

}

function wireUpEvents() {

  window.onbeforeunload = function() {
      if (!validNavigation) {
         endSession();
      }
  }

  // Attach the event keypress to exclude the F5 refresh
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 116){
      validNavigation = true;
    }
  });

  // Attach the event click for all links in the page
  $("a").bind("click", function() {
    validNavigation = true;
  });

  // Attach the event submit for all forms in the page
  $("form").bind("submit", function() {
    validNavigation = true;
  });

  // Attach the event click for all inputs in the page
  $("input[type=submit]").bind("click", function() {
    validNavigation = true;
  });

}


$(document).ready(function() {
  wireUpEvents(); 
});

My problem is i would like to change the event from an alert to a overlay. I have setup up a hidden div overlay and replaced the alert in the above code with:

$('.overlay').css('display','block');

This now no longer works, as there is nothing within the div to get the user to stay on the page. (the user doesn't have to click a button within an alert)

Any suggestions on how i can get around this?

Cheers, Dan

danyo
  • 5,686
  • 20
  • 59
  • 119
  • Why don't you simply use `window.onbeforeunload`? I know it's not a fancy `div`, but it's definitely intended for these kind of stuff. – Powerslave May 14 '13 at 10:40
  • window.onbeforeunload was an option but now i need a fancy div that needs styling. – danyo May 14 '13 at 10:42
  • Duplicated to http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own/276739 – Wojciech Bednarski May 14 '13 at 11:38

1 Answers1

8

The window close event is fired as the very last event. Therefore no other events are fired after it.

You can use the beforeunload event with Jquery, to show the overlay on screen.

The following link could help: link

Community
  • 1
  • 1
Harsh Chunara
  • 585
  • 3
  • 10