javascript - Identifying Between Refresh And Close Browser Actions

Question

When we refresh the page (F5, or icon in browser), it will first trigger ONUNLOAD event. When we close the browser (X on right top icon),It will trigger ONUNLOAD event. Now when ONUNLOAD event is triggered, there is no way to distinguish between refresh the page or close the browser. If you have any solution then give me.

Answer 1

There is a solution.

I wanted to disconnect the user on the server when the tab or browser window was closed, but not when the page was reloaded (you may want to differentiate reload/close events for a different purpose but you may benefit from my solution). I ended up with the following process, based on HTML5's local storage and client/server AJAX communication:

1. on your page, add an onunload to the window to the following handler (pseudo-javascript):

   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
   }
   

2. on your page, add a onloadon the body to the following handler (pseudo-javascript):

   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 you want (I do nothing here)
           }
       }
   } 
   

3. 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.

Note that I use the unload event instead of the beforeUnload event in order to manage links to attachments properly: when a user clicks on a link to an attachment (e.g. PDF file), the beforeUnload event is dispatched, then an open/save popup is raised, and nothing more (the browser does not change the displayed page and does not dispatch the unload event). If I were using the beforeUnload event (as I did before), I would have detected a page change when there is none.

This approach is limited to the browsers which support HTML5 local storage, so you would probably use specific approaches for old browsers such as MSIE7.

Other approaches based on the event.clientY are not reliable because this value is negative when clicking on the 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). Relying on the event X position is also not reliable because the buttons are not placed at the same position on every browser (e.g. close button at the left).