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>

Answer 1

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";