Detecting If the User is Idle or Inactive

programming
4

Jane - does this help? https://stackoverflow.com/questions/5645485/detect-mousemove-when-over-an-iframe

I am not in front of a computer to verify, but it seems like it would work :slight_smile:

5

thanks, it would… but my iframe is from a different domain so I am running into a cross domain security[ issue. I have managed to adapt your script and have it half work. The timer starts ticking once an activity is detected on the iframe, but the timer doesn’t reset if the user becomes inactive. So once an activity is detected the page will refresh after 7 mins
here it is if you want to have a look at it or if it can be useful for anyone

<script>
    var timeoutID;
    var myConfObj = {
  iframeMouseOver : false
};

function startTimer() {
    // wait 2 seconds before calling goInactive
    timeoutID = window.setTimeout(goInactive, 70000);
}
function goInactive() {
    location.reload();
       //window.location.replace("https://www.musclemedicine.com.au/make-a-booking");
}
function goActive() {
    // do something 
    startTimer();
}
function resetTimer(e) {
   window.clearTimeout(timeoutID);
   goActive();
}

window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
  resetTimer();
  }
  else {
    goInactive();
   
  }
});

document.getElementById('nookalbooking').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;

});

document.getElementById('nookalbooking').addEventListener('touchmove',function(){
   myConfObj.iframeMouseOver = true; 
});

document.getElementById('nookalbooking').addEventListener('MSPointerMove',function(){
   myConfObj.iframeMouseOver = true; 
});


document.getElementById('nookalbooking').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
    
    
     
});

</script>
6

Sorry for the delay in getting back to you. I’ll look into this tomorrow-ish. I’m personally interested in figuring this out as well, for it’s an interesting problem :slight_smile:

7

I don’t think there’s a way to have both of best world’s - interaction within a x-domain iframe and detection of that interaction in your frame without the other frame’s cooperation. If you want to capture events on your end, you can use an overlay for that, but then you lose interaction within the frame itself. And when interacting with the x-frame you’re locked out of knowing what that interaction is.

1 Like
8

That makes sense. With WebView-like elements in app frameworks/languages/etc. (Electron, Android, iOS, Windows, etc.) there are ways to inject scripts that you can then call from your outer app frame. I was hoping that something similar can be done using iframes! :stuck_out_tongue:

9

You can - using a browser extension. But this would require users of your site to install that extension (not unlike the requirement to install your app)

1 Like
10

Ok, but, if a user is seeing a embbeded video, like youtube or facebook?

11

You can always disable the “idle detection” functionality when a video is playing :slight_smile:

12

Hi,

Code is working perfectly. I just had one question that How to stop the timer to check the Idle time? For example if I am checking certain amount of Idle time and after that I am making user Logged Out from the application. So When User logged out that time I want to stop the timer.

In this case time will continue as it is, So my question is how to stop the timer after certain event?

Regards,
Mihit

13

In the function you have for logging out, just call clearTimeout(timerID) to stop the timer :slight_smile:

14

@kirupa It only cleanTimeout of particular timeId but the problem is in the background setup function is running so whenever you do any event than again resetTimer function called from setup and timer will Start Again.

What I need is after logout of user this code completely stops working(All timer and setup function which called earlier has to stop as well.)

Any Idea!!

15

I am on my phone, so I can’t give you a working solution. One approach might be to have a global toggle variable that all of the timer-related functions listen to. If the toggle variable is set to true, then the code behaves as currently designed. If the toggle value is set to false, then the start timer, reset timer, and related functions never run. Only the code for clearing the timer will run.

Does this help?

16

Hi Kirupa,

Thanks for the swift response. I analyze your scenario and come the below conclusion.

That solution will work for scenario like: either I want to start function or don’t want to start function(based on that flag which you mentioned), What I am looking is after starting the function How can I stop(Currently this function always executed in loop). How can i destroy it?

In the scenario which you mentioned, after setting the flag true, timer will start but when user logout even if i set flag to false, all the function will run as it is. So In short I am looking for how to destroy this complete loop.

Thanks.

17

The resetTimer you are calling clears the timer and starts it all over again. All you are looking for is a way to clear the timer without the “starting all over” part.

That would mean you have a new function that only calls this: window.clearTimeout(timeoutID);

I am a bit confused then if that isn’t what you are trying to do :slight_smile:

18

I think @Mihit_Gandhi wants to remove the event listeners upon logout of a user.
EventTarget.removeEventListener

1 Like
19

Thanks for this, perfect.
Is there a way to display a pop-up with a countdown timer to show that you will redirected if you if your not active?

20

Hey @Salt_Media - welcome to the forums! Yes, that is totally doable. Are you looking to display the countdown timer immediately or after a delay?

21

Hello this approach makes to me more sense, looks great
I mean
If a user is logged in into a php app and the current page is showing his personal details, so far, all the PHP scripts I have seen, will check for the session at next view load action.
Instead the js approach makes much more sense
No user interaction for some timeout? then go to some login page
… would you redirect to some session destroying script? Or … ?
Thank you for sharing your approach

22

Hi @Corsari - welcome to the forums :slight_smile:

It depends on what your goal is. If inactivity means they need to “reauthenticate”, then proactively sending them to a log-in page would seem like a good idea. As part of this, overwriting a cookie value or whatever mechanism you use to keep the user from re-authenticating with each navigation, seems reasonable as well.

:stuck_out_tongue:

23

Hello Kirupa!
Thank you for replying

I mean that a real user inactivity logout mechanism , must check the activity as your script does

Now , I was just asking you, what do you kindly suggest as logout mechanism when it comes to apply your script to a PHP application

In practice , what would you do ? I admit I didn’t studied sessions commands with JS . Do you mean you can do session destroy with JS?
So JS can end with session destroy and redirect to some login page?
Thank you