用戶閒置時重新加載頁面或iFrame

一旦用戶閒置了一段特定時間，我正在嘗試刷新頁面或iFrame（或者很好）。 我想確定一下，如果鼠標懸停在實際的iFrame上（沒有移動），那麼我的狀態仍然處於活動狀態。如果我在瀏覽器的不同選項卡上並且鼠標正在移動或閒置，那麼我希望包含iFrame的選項卡仍然刷新。用戶閒置時重新加載頁面或iFrame

我試圖使用多個jquery插件和其他解決方案，但他們似乎都沒有認識到，當我的鼠標在iFrame上，那麼它不應該刷新。

（https://stackoverflow.com/a/4644315）

我使用vimeo.com作爲iFrame的示例源我已經開始用下面的代碼從一個相關的答案。

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

來源

2013-07-18 Yuvi100

謝謝大家的貢獻，我收到了我詢問的另一個問題的更具體的信息後，我已經回答了我的問題關於mouseenter/mouseleave events （Answer：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>

來源

2013-07-18 23:31:46 Yuvi100

如果你知道你的iframe的頁面上的確切位置，你可以記錄鼠標移動座標，如果匹配，其中視頻位於禁用刷新。

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的值（以像素爲單位，你不得不自己，因爲我不知道正確的座標想法弄清楚。

來源

2013-07-18 04:01:12

IFrame，這是由