Detect inactivity with iframe

Question

I created a website that displays a three.js model inside of an iframe. I am trying to redirect a user back to the homepage(index.html) whenever they're inactive for x amount of minutes. I've got it to work with some java script but the problem is that it only works when I am active outside of the iframe. When I actually rotate the model and interact with it, it still redirects me. I've been researching this and haven't found a solution. I've tried calling the function inside the iframe with

onload="setup();"

but that didn't work and many others. Here is my code,

Javscript

var timeoutID;

        function setup() {
            this.addEventListener("mousemove", resetTimer, false);
            this.addEventListener("mousedown", resetTimer, false);
            this.addEventListener("mouseover", resetTimer, false);
            this.addEventListener("mouseout", resetTimer, false);
            this.addEventListener("keypress", resetTimer, false);
            this.addEventListener("DOMMouseScroll", resetTimer, false);
            this.addEventListener("mousewheel", resetTimer, false);
            this.addEventListener("touchmove", resetTimer, false);
            this.addEventListener("MSPointerMove", resetTimer, false);

            startTimer();
        }

        function startTimer() {
            // wait 5 seconds before calling goInactive
            timeoutID = window.setTimeout(goInactive, 5000);
        }

        function resetTimer(e) {
            window.clearTimeout(timeoutID);

            goActive();
        }

        function goInactive() {
            // do something
            window.location = "index.html";
        }

        function goActive() {
            // do something

            startTimer();
        }

HTML

<main role="main" class="col-md-9 ml-sm-auto col-lg-12 px-0">

            <!-- Featured Content  -->

              <div class="embed-responsive embed-responsive-16by9">
                  <div id="test">

                      <iframe style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none;
                   margin:0; padding:0; overflow:hidden; z-index:0;" class="embed-responsive-item" src="models/model.html" onload="setup();" allowfullscreen></iframe>
                  </div>

              </div>

        </main>

Garrett Johnson · Accepted Answer · 2018-05-27T20:54:38.873

3

Events do not bubble up through the "barriers" of an iframe. I'm not exactly sure what you use case is, but an iframe doesn't seem like the best way to achieve this.

However, if it is a necessity, then I suggest listening for when the iframe content has loaded with the iframe.onload event (or add an event listener for load) and then add the necessary click events on your iframe.contentWindow (which you'll only have access to if the script is from the same origin).

const frame = document.createElement('iframe');
document.body.appendChild(frame);
frame.addEventListener('load', function() {

  frame.contentWindow.addEventListener("mousemove", resetTimer, false);
  frame.contentWindow.addEventListener("mousedown", resetTimer, false);
  //..other events...

});

// ...
frame.src = ".../file.html";

edited May 27 '18 at 20:54

answered May 27 '18 at 02:01

Garrett Johnson

2,413
9
17

When you say "add the necessary click events" do i just put my code for the "mouseover..etc" part or would i create a new function? – Jagr May 27 '18 at 16:56
You should be able to just use your same `resetTimer` function. I've updated the example. – Garrett Johnson May 27 '18 at 20:53
hmm I added the reset function inside the code but this time it's not redirecting at all. I've tried adding my code in there with yours and its the same result. – Jagr May 27 '18 at 23:16
It's hard without a set of code I can easily run, but if it's not redirecting at all now, then it sounds like your time is getting reset more frequently. I'd add print statements in the reset timer function to see which of the callbacks are getting fired. – Garrett Johnson May 27 '18 at 23:20
It wasn't doing anything because there was nothing that was triggering the "load" function. I modified the pen here: https://codepen.io/anon/pen/MGNNGX. Note that I added content to the iframe via `srcdoc`, which triggers the load. If you keep clicking etc in the iframe, it will never print that it's redirecting. – Garrett Johnson May 27 '18 at 23:37
I put that exact same code and when I move around in the iframe, it still redirects. Is it cause i have to change the "srcdoc"? from "hello" to something else? – Jagr May 27 '18 at 23:58
Hmm. So do you mean you copy the code over to your personal (non codepen) project and it doesn't work? Does the codepen I posted behave as desired? Are there any console errors? You can either use `srcdoc` or `src` on the iframe, as long as the src url is loaded from the same origin. – Garrett Johnson May 28 '18 at 00:38
I copied the code from the codepen you edited and I it still redirects you when you are interacting with the iframe. I checked the console and there is no errors. – Jagr May 28 '18 at 17:15
If the codepen is working as expected for you, then it sounds like there may be something else going on. I would make sure that the `resetTimer()` function is getting called as you expect by adding print statements into it. – Garrett Johnson May 28 '18 at 17:54
what do you mean "by adding print statements into it"? its being called with the "frame.contentWindow.addEventListener("MSPointerMove", resetTimer, false);" code – Jagr May 28 '18 at 17:56
Add a print statement like `console.log('RESETTING', e.type);` inside of the `resetTimer` function. I've updated my example to show. It's just a way to know for sure that the function is getting called the way you expect that it is. – Garrett Johnson May 28 '18 at 19:09
I did that and I didn't get anything in the console. I've been researching and i saw this "https://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript" saying there isnt really a good way to do it ? – Jagr May 29 '18 at 02:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171948/discussion-between-garrett-johnson-and-jagr). – Garrett Johnson May 29 '18 at 02:52
I got it to work, problem was that i needed to put this code in the actual "three.js" file and redirect put of the iframe when inactive. Thanks for the help! – Jagr May 29 '18 at 15:33

Detect inactivity with iframe

1 Answers1