Обнаружить бездействие с помощью iframe - PullRequest
Новая
       14

Обнаружить бездействие с помощью iframe

0 голосов
/ 27 мая 2018

Я создал сайт, который отображает модель three.js внутри iframe.Я пытаюсь перенаправить пользователя обратно на домашнюю страницу (index.html) всякий раз, когда он неактивен в течение x минут.У меня есть для работы с некоторыми сценариями Java, но проблема в том, что он работает только тогда, когда я активен за пределами iframe.Когда я на самом деле вращаю модель и взаимодействую с ней, она все равно перенаправляет меня.Я исследовал это и не нашел решения.Я пытался вызвать функцию внутри iframe с 

onload="setup();"

, но это не сработало и многие другие.Вот мой код,

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>

1 Ответ

0 голосов
/ 27 мая 2018

События не всплывают через «барьеры» iframe.Я не совсем уверен, что вы используете case, но iframe не кажется лучшим способом для достижения этой цели.

Однако, если это необходимо, тогда я предлагаю послушать, когда содержимое iframeзагружен с событием iframe.onload (или добавьте прослушиватель событий для load), а затем добавьте необходимые события щелчка на вашем iframe.contentWindow (к которому у вас будет доступ только в том случае, если скрипт имеет тот же источник).

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