How to check if user is currently on the page with JavaScript?

Question

How to check using javascript if the user is currently on the page or on another Tab?

I would like to chat add the new message notification, but only if the user is on another Tab.

maybe you could try to set your logic in window onblur/onfocus events — A. Wolff, Jan 04 '14 at 13:32
This is not duplicate with the mentioned answer above. The answer in the link is about: Checking if the user has active in a time period (of 30 seconds) while this question is about: Checking if the user is currently active on the page (like if the page is on focus). — Jacob, Apr 20 '17 at 09:19

score 3 · Answer 1 · edited Mar 08 '14 at 23:39

3

You can use the chat box as the function.

Get its focus or blur event and then add the function for the notification.

If you still want to stick to that, try these: window.onblur or window.onfocus events and add the function or not.

edited Mar 08 '14 at 23:39

BenMorel

34,448
50
182
322

answered Jan 04 '14 at 13:34

Afzaal Ahmad Zeeshan

15,669
12
55
103

I think this only works for those who CLICK on a page (`onfocus`), rather than move the mouse onto the page. With this, you can only see if the user is on the page if he/she clicks on it. This will fail if there are not many clickable items on the page (`buttons`, `links`, etc.). – IPSDSILVA Jul 02 '20 at 15:26

score 2 · Accepted Answer · 2014-01-04T14:25:43.823

Given what you are asking for, which is confirming whether the user is on your page or another tab, I don't think that checking the focus on the chat box is suitable. If a user clicked outside the box at all, then their status would change to inactive.

Mouseover Triggers

Instead, I would detect mouseover events on the <body> element. Your triggers would look something like this:

<body style="min-height:600px; width:100%;" onmouseover="changeStatus(true);" onmouseout="changeStatus(false);">

Obviously you would have to improve the css or setup a javascript function to make sure that the <body> element fills the whole screen.

Event Handler

Then you would setup a javascript function that handles the triggers, like this:

<script type="text/javascript">
  var i=0;
  var pageStatus=true;

  function changeStatus(status) { 
    i+=1;
    if (status==true) {
      console.log(i+' Page is active');
      pageStatus=true;
      /* change the users status to active */
    } else {
      pageStatus=false;
      window.setTimeout(function() { if(pageStatus==false) { console.log(i+' Page is inactive'); /* change the users status to inactive */ } }, 1000);
    }
  }
</script>

I suggest that you have some kind of delay for the onmouseout trigger before it changes the user's status, as sometimes the mouse will go off the page for a second without the user switching to another tab or program. The function I've written above is a little rough round the edges, but should form a sound base to develop the full event handler.

score 0 · Answer 3 · answered Jan 04 '14 at 13:33

0

You can set a cookie onload, and delete it onbeforeunload. That way, if the cookie is already set onload, you know the user is already visiting your page.

answered Jan 04 '14 at 13:33

Janus Troelsen

20,267
14
135
196

How to check if user is currently on the page with JavaScript?

3 Answers3