How can I handle browser tab close event in Angular? Only close, not refresh

This is, tragically, not a simple problem to solve. But it can be done. The answer below is amalgamated from many different SO answers.

Simple Part:Knowning that the window is being destroyed. You can use the onunload event handle to detect this.

Tricky Part:

Detecting if it's a refresh, link follow or the desired window close event. Removing link follows and form submissions is easy enough:

var inFormOrLink;$('a').live('click', function() { inFormOrLink = true; });$('form').bind('submit', function() { inFormOrLink = true; });$(window).bind('beforeunload', function(eventObject) {    var returnValue = undefined;    if (! inFormOrLink) {        returnValue = "Do you really want to close?";    }    eventObject.returnValue = returnValue;    return returnValue;}); 

Poor-man's Solution

Checking event.clientY or event.clientX to determine what was clicked to fire the event.

function doUnload(){ if (window.event.clientX < 0 && window.event.clientY < 0){   alert("Window closed"); } else{   alert("Window refreshed"); }}

Y-Axis doesn't work cause it's negative for clicks on reload or tab/window close buttons, and positive when keyboard shortcuts are used to reload (e.g. F5, Ctrl-R, ...) and window closing (e.g. Alt-F4). X-Axis is not useful since different browsers have differing button placements. However, if you're limited, then running the event coordinates thru a series of if-elses might be your best bet. Beware that this is certainly not reliable.

Involved Solution

(Taken from Julien Kronegg) Using HTML5's local storage and client/server AJAX communication. Caveat: This approach is limited to the browsers which support HTML5 local storage.

On your page, add an onunload to the window to the following handler

function myUnload(event) {    if (window.localStorage) {        // flag the page as being unloading        window.localStorage['myUnloadEventFlag']=new Date().getTime();    }    // notify the server that we want to disconnect the user in a few seconds (I used 5 seconds)    askServerToDisconnectUserInAFewSeconds(); // synchronous AJAX call}

Then add a onloadon the body to the following handler

function myLoad(event) {    if (window.localStorage) {        var t0 = Number(window.localStorage['myUnloadEventFlag']);        if (isNaN(t0)) t0=0;        var t1=new Date().getTime();        var duration=t1-t0;        if (duration<10*1000) {            // less than 10 seconds since the previous Unload event => it's a browser reload (so cancel the disconnection request)            askServerToCancelDisconnectionRequest(); // asynchronous AJAX call        } else {            // last unload event was for a tab/window close => do whatever        }    }} 

On the server, collect the disconnection requests in a list and set a timer thread which inspects the list at regular intervals (I used every 20 seconds). Once a disconnection request timeout (i.e. the 5 seconds are gone), disconnect the user from the server. If a disconnection request cancelation is received in the meantime, the corresponding disconnection request is removed from the list, so that the user will not be disconnected.

This approach is also applicable if you want to differentiate between tab/window close event and followed links or submitted form. You just need to put the two event handlers on every page which contains links and forms and on every link/form landing page.

Closing Comments (pun intended):

Since you want to remove cookies when the window is closed, I'm assuming it's to prevent them from being used in a future session. If that's a correct assumption, the approach described above will work well. You keep the invalidated cookie on the server (once client is disconnected), when the client creates a new session, the JS will send the cookie over by default, at which point you know it's from an older session, delete it and optionally provide a new one to be set on the client.

$window.addEventListener("beforeunload", function (e) {  var confirmationMessage = "\o/";  console.log("closing the tab so do your small interval actions here like cookie removal etc but you cannot stop customer from closing");  (e || window.event).returnValue = confirmationMessage; //Gecko + IE  return confirmationMessage;                            //Webkit, Safari, Chrome});

This is quite debated on whether we can do it or not in a fool proof manner. But technically not a lot of things can be done here since the time you have is quite less and if customer closes it before your actions complete you are in trouble, and you are at mercy of the client completely. Dont forget to inject $window. I advice not to depend on it.

javascript detect browser close tab/close browser

Update:I was researching this issue along with some recommendations. And apart from this above option, the best way you can handle such cases is by creating sessions with no activity timeout of may be 25-30 mins. Convert all your cookies that need to be destroyed into sessions with timeout. Alternately, you can set cookie expiry but then the cookie stays in the browser until next login. Less than 25-30 mins of session inactivity is not completely dependable since you can get logged out if the client is not using the browser for 10-15 mins. I even tried the capturing events from link (<a>) or (<submit>) or (keypress) based events. The problem is it handles page refresh well. But it does not remove the problem of client closing the browser or browser tab before your cookies are deleted. It is something you have to consider in your use case and forcefully trade off due to no control on it. Better to change the design on its dependence to a better architecture than to face mentioned problems later.

Maybe this link will help you http://eureka.ykyuen.info/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/