title: Detect inactivity with iframe
body: <p>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</p>
  
  <pre><code>onload="setup();"
  </code></pre>
  
  <p>but that didn't work and many others. Here is my code,</p>
  
  <p>Javscript</p>
  
  <pre><code>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();
          }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;main role="main" class="col-md-9 ml-sm-auto col-lg-12 px-0"&gt;
  
              &lt;!-- Featured Content  --&gt;
  
                &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                    &lt;div id="test"&gt;
  
                        &lt;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&gt;&lt;/iframe&gt;
                    &lt;/div&gt;
  
                &lt;/div&gt;
  
          &lt;/main&gt;
  </code></pre>