2013-07-18 2 views
1

Я пытаюсь обновить страницу или iFrame (либо будет хорошо), как только пользователь простаивает в течение определенного периода времени. Я хотел бы определить, что если мышь находится над фактическим iFrame (без движения), то мое состояние по-прежнему считается активным. Если я нахожусь на другой вкладке браузера, а мышь перемещается или простаивает, я бы хотел, чтобы вкладка, содержащая iFrame, все еще обновлялась.Обновить страницу или iFrame, если пользователь не работает

Я попытался использовать несколько плагинов jquery и другие решения, но все они, похоже, не признают, что когда моя мышь находится над iFrame, тогда она не должна обновляться.

Я начал со следующим кодом из соответствующего ответа (https://stackoverflow.com/a/4644315)

Я использую vimeo.com в качестве примера источника плавающего фрейма.

<html> 
<head> 
<title>iFrame AutoRefresh on idle</title> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script> 
    var time = new Date().getTime(); 
    $(document.getElementById("iFrame1")).bind("mouseover", function(e) { 
     time = new Date().getTime(); 
    }); 

    function refresh() { 
     if(new Date().getTime() - time >= 6000) 
      window.location.reload(true); 
     else 
      setTimeout(refresh, 10000); 
    } 
    setTimeout(refresh, 10000); 
</script> 
<style> 
    body { 
     margin: 0; 
    } 
</style> 
</head> 
<body> 
    <iframe id="iFrame1" src="http://www.vimeo.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe> 
    </iframe> 
</body> 
</html> 

ответ

0

Спасибо, что внесли свой вклад, У меня есть ответ на мой вопрос после сбора более подробной информации из другого вопроса, который я задал в относится к mouseenter/mouseleave события (Ответ: https://stackoverflow.com/a/17717275/2593839).

Если курсор мыши перемещается из окна, таймер начнется и, как только таймер достигнет указанного интервала, он обновит страницу. Если мышь вернется в окно до достижения указанного интервала, таймер сбрасывается.

Для тех, кто хочет получить окончательный код, он внизу. Вы можете просто изменить источник Iframe и частоту обновления, которая составляет 5 секунд (используется для проверки кода), чтобы удовлетворить ваши потребности:

<html> 
    <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script> 
    function refresh() { 
     window.location.reload(true); 
    } 

    var timer; 
    function start() { 
     timer = setTimeout(function(){refresh()}, 5000); 
    } 

    jQuery(document).ready(function() { 
     start(); 
     jQuery('body').mouseenter(function() { 
      clearTimeout(timer); 
     }).mouseleave(function(e) { 
      var pageX = e.pageX || e.clientX, 
        pageY = e.pageY || e.clientY; 
      if(pageX <= 0 || pageY <= 0) { 
       start(); 
      }else { 
       clearTimeout(timer); 
      } 
     }); 
    }); 
    </script> 
    <style> 
    body { 
     margin: 0; 
    } 
    </style> 
</head> 
    <body> 
    <iframe id="iFrame1" src="http://www.website.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe> 
    </body> 
</html> 
0

Если вы знаете точное положение Вашего фрейма на странице, вы можете просто координаты записи движения мыши, если они совпадают, где видео находится отключить обновление.

http://docs.jquery.com/Tutorials:Mouse_Position

Редактировать, что-то подобное, что может быть.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var timer; 
     function start() { 
      timer = setInterval(function(){refresh()}, 5000); 
     } 
     start(); 
     $(document).mousemove(function(e) { 

      if (e.pageX >= X && e.pageX <= Y) { 
       //stop if the coordinates are correct on x intercept 
       clearTimeout(timer); 
      } else if (e.pageY >= Y && e.pageY <= Y) { 
       //stop if the coordinates are correct on y intercept 
       clearTimeout(timer); 
      } else { 
       // not hovering anymore, start counting seconds again... 
       start(); 
      } 
     }); 

     function refresh() { 
      //window.location.reload(true); 
      alert("refresh!!!"); 
     } 
    }); 
</script> 
</head> 
<body> 
    <iframe id="iFrame1" src="http://www.vimeo.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe> 
    </iframe> 
</body> 
</html> 

Y и X значения (в пикселях вы должны выяснить сами, потому что я понятия не имею, о правильных координат.

+0

Функция Iframe является «полный экран», как это было предложено