No activity on web page > redirect


#1

I’m trying to re-direct to another page if a web page visitor leaves the page displayed after X amount of time with no activity. I’ve tried this with no redirect. What am I missing?

<script type="text/javascript">
	(function() {

	    const idleDurationSecs = 60;    // X number of seconds
	    const redirectUrl = 'https://......com';  // Redirect idle users to this URL
	    let idleTimeout; // variable to hold the timeout, do not modify

	    const resetIdleTimeout = function() {

	        // Clears the existing timeout
	        if(idleTimeout) clearTimeout(idleTimeout);

	        idleTimeout = setTimeout(() => location.href = redirectUrl, idleDurationSecs * 1000);
	    };

	    // Init on page load
	    resetIdleTimeout();

	    // Reset the idle timeout on any of the events listed below
	    ['click', 'touchstart', 'mousemove'].forEach(evt =>
	        document.addEventListener(evt, resetIdleTimeout, false)
	    );

	})();
</script>

I look forward to any assistance.


No activity pop up message
#2

Code works as expected for me. Are there any errors in the console (maybe caused by another script on the page)?


#3

Thanks for taking the time to test and reply.
I checked for errors, as suggested, in the other script on the page, and now it works. thanks again


#4

Is there a fix to this to get it to work in IE? Works well in Chrome, FF, Edge and mobiles.
Thank you.


#5

Try this:

(function() {
  var idleDurationSecs = 60;
  var redirectUrl = 'https://......com';  // Redirect idle users to this URL
  var idleTimeout;

  var resetIdleTimeout = function() {
    if(idleTimeout) clearTimeout(idleTimeout);

    idleTimeout = setTimeout(function(){
      location.href = redirectUrl
    }, idleDurationSecs * 1000);
  };

  resetIdleTimeout();

  ['click', 'touchstart', 'mousemove'].forEach(evt =>
    document.addEventListener(evt, resetIdleTimeout, false)
  );
})();

Untested, as I don’t have IE handy.


#6

Did not work in IE - did work in other browsers though.


#7

Are there any errors in the console?

You can accessed this via F12, then click on the “Console” tab.

Also, which version of IE are you using?


#8

No errors in the console. I am testing it on the latest version of IE 11.0.100


#9

Ah, missed an arrow function. Try this:

(function() {
  var idleDurationSecs = 60;
  var redirectUrl = 'https://......com';  // Redirect idle users to this URL
  var idleTimeout;

  var resetIdleTimeout = function() {
    if(idleTimeout) clearTimeout(idleTimeout);

    idleTimeout = setTimeout(function(){
      location.href = redirectUrl
    }, idleDurationSecs * 1000);
  };

  resetIdleTimeout();

  ['click', 'touchstart', 'mousemove'].forEach(function(evt) {
    document.addEventListener(evt, resetIdleTimeout, false)
  });
})();

Does that work?


#10

That did it - thank you!


#11

No worries. Can I ask why you need to support Internet Explorer? What percentage of your traffic does it account for?


#12

Surprisingly almost 18% so that is why I try to still code with it. I would like to steer users to just use Edge, Chrome and FF. Can’t seem to find - is there reliable JS that won’t allow users to open pages that displays message that IE is not supported?


#13

Tricky. Up to IE 10 you could do this reliably with conditional comments:

<!--[if (IE)]>  Please upgrade your browser <![endif]-->

But unfortunately, these no longer work in IE 11.

Your best bet would be to try one of the top answers here:

Or to attempt some kind of feature detection, e.g.:

Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject)