No activity on web page > redirect

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

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?

1 Like
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)
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.