Best way to detect when a user leaves a web page

Question

What is the best way to detect if a user leaves a web page   The onunload JavaScript event doesn t work every time  the HTTP request takes longer than the time required to terminate the browser    Creating one will probably be blocked by current browsers

User · Answer

I know this question has been answered  but in case you only want something to trigger when the actual BROWSER is closed  and not just when a pageload occurs  you can use this code   window onbeforeunload   function  e            if   window event clientY  lt  0                   window localStorage clear                  alert  Y coords      window event clientY                 In my example  I am clearing local storage and alerting the user with the mouses y coords  only when the browser is closed  this will be ignored on all page loads from within the program

User · Answer

For What its worth  this is what I did and maybe it can help others even though the article is old   PHP   session start       SESSION  ipaddress       SERVER  REMOTE ADDR     if isset   SESSION  userID          if  strpos   SESSION  activeID     -               SESSION  activeID       SESSION  userID    -    SESSION  activeID           elseif  isset   SESSION  activeID            SESSION  activeID     time        JS  window setInterval function                var userid     lt  php echo   SESSION  activeID      gt                var ipaddress     lt  php echo   SESSION  ipaddress      gt                var action    data                  ajax                   url  activeUser php                   method  POST                   data  action action userid userid ipaddress ipaddress                   success function response                          alert response                                                                   5000     Ajax call to activeUser php  if isset   POST  action          if isset   POST  userid               stamp   time             activeid     POST  userid             ip     POST  ipaddress              query    SELECT stamp FROM activeusers WHERE activeid       activeid    LIMIT 1            results   RUNSIMPLEDB  query            if  results- gt num rows  gt  0                query    UPDATE activeusers SET stamp     stamp  WHERE activeid       activeid    AND ip     ip  LIMIT 1               RUNSIMPLEDB  query            else               query    INSERT INTO activeusers  activeid stamp ip                      VALUES      activeid      stamp    ip                 RUNSIMPLEDB  query                       Database   CREATE TABLE  activeusers       id  int 11  NOT NULL     activeid  varchar 20  NOT NULL     stamp  int 11  NOT NULL     ip  text   ENGINE MyISAM DEFAULT CHARSET utf8    Basically every 5 seconds the js will post to a php file that will track the user and the users ip address  Active users are simply a database record that have an update to the database time stamp within 5 seconds  Old users stop updating to the database  The ip address is used just to ensure that a user is unique so 2 people on the site at the same time don t register as 1 user   Probably not the most efficient solution but it does the job

User · Answer

Mozilla Developer Network has a nice description and example of onbeforeunload   If you want to warn the user before leaving the page if your page is dirty  i e  if user has entered some data    window addEventListener  beforeunload   function e      var myPageIsDirty          you implement this logic      if myPageIsDirty          following two lines will cause the browser to ask the user if they       want to leave  The text of this dialog is controlled by the browser      e preventDefault      per the standard     e returnValue         required for Chrome         else  user is allowed to leave without a warning dialog

User · Answer

Try the onbeforeunload event  It is fired just before the page is unloaded  It also allows you to ask back if the user really wants to leave  See the demo onbeforeunload Demo   Alternatively  you can send out an Ajax request when he leaves

User · Answer

One  slightly hacky  way to do it is replace and links that lead away from your site with an AJAX call to the server-side  indicating the user is leaving  then use that same javascript block to take the user to the external site they ve requested   Of course this won t work if the user simply closes the browser window or types in a new URL   To get around that  you d potentially need to use Javascript s setTimeout   on the page  making an AJAX call every few seconds  depending on how quickly you want to know if the user has left

User · Answer

What you can do  is open up a WebSocket connection when the page loads  optionally send data through the WebSocket identifying the current user  and check when that connection is closed on the server

User · Answer

In the case you need to do some asynchronous code  like sending a message to the server that the user is not focused on your page right now   the event beforeunload will not give time to the async code to run  In the case of async  I found that the visibilitychange and mouseleave events are the best options  These events fire when the user change tab  or hiding the browser  or taking the courser out of the window scope    x000D   x000D  document addEventListener  mouseleave   e  gt   x000D         do some async code x000D     x000D   x000D  document addEventListener  visibilitychange   e  gt   x000D       if  document visibilityState      visible     x000D       report that user is in focus x000D        else   x000D         report that user is out of focus x000D          x000D     x000D   x000D   x000D

User · Answer

Here s an alternative solution - since in most browsers the navigation controls  the nav bar  tabs  etc   are located above the page content area  you can detect the mouse pointer leaving the page via the top and display a  before you leave  dialog  It s completely unobtrusive and it allows you to interact with the user before they actually perform the action to leave     document  bind  mouseleave   function e        if  e pageY -   window  scrollTop    lt   1                    BeforeYouLeaveDiv   show                The downside is that of course it s a guess that the user actually intends to leave  but in the vast majority of cases it s correct

User · Answer

Thanks to Service Workers  it is possible to implement a solution similar to Adam s purely on the client-side  granted the browser supports it  Just circumvent heartbeat requests      The delay should be longer than the heartbeat by a significant enough amount that there won t be false positives const liveTimeoutDelay   10000 let liveTimeout   null  global self addEventListener  fetch   event   gt      clearTimeout liveTimeout    liveTimeout   setTimeout      gt        console log  User left page          handle page leave      liveTimeoutDelay       Forward any events except for hearbeat events   if  event request url endsWith   heartbeat          event respondWith        new global Response  Still here

[javascript] Best way to detect when a user leaves a web page?

Examples related to javascript