如何在给定的不活动时间后自动重新加载页面

Question

如果在给定时间段内页面上没有活动,我该如何自动重新加载网页？

Answer 1

这可以在没有javascript的情况下完成,使用此metatag:

<meta http-equiv="refresh" content="5" >

其中content ="5"是页面等待刷新的秒数.

但是你说只有在没有活动的情况下才能进行什么样的活动？

Answer 2

如果您想在没有活动的情况下刷新页面,那么您需要弄清楚如何定义活动.假设我们每分钟刷新一次页面,除非有人按下某个键或移动鼠标.这使用jQuery进行事件绑定:

<script>
     var time = new Date().getTime();
     $(document.body).bind("mousemove keypress", function(e) {
         time = new Date().getTime();
     });

     function refresh() {
         if(new Date().getTime() - time >= 60000) 
             window.location.reload(true);
         else 
             setTimeout(refresh, 10000);
     }

     setTimeout(refresh, 10000);
</script>

Answer 3

我已经构建了一个完整的JavaScript解决方案,不需要jquery.可能会把它变成一个插件.我用它来进行液体自动清新,但看起来它可以帮助你.

JSFiddle AutoRefresh

// Refresh Rate is how often you want to refresh the page 
// bassed off the user inactivity. 
var refresh_rate = 200; //<-- In seconds, change to your needs
var last_user_action = 0;
var has_focus = false;
var lost_focus_count = 0;
// If the user loses focus on the browser to many times 
// we want to refresh anyway even if they are typing. 
// This is so we don't get the browser locked into 
// a state where the refresh never happens.    
var focus_margin = 10; 

// Reset the Timer on users last action
function reset() {
    last_user_action = 0;
    console.log("Reset");
}

function windowHasFocus() {
    has_focus = true;
}

function windowLostFocus() {
    has_focus = false;
    lost_focus_count++;
    console.log(lost_focus_count + " <~ Lost Focus");
}

// Count Down that executes ever second
setInterval(function () {
    last_user_action++;
    refreshCheck();
}, 1000);

// The code that checks if the window needs to reload
function refreshCheck() {
    var focus = window.onfocus;
    if ((last_user_action >= refresh_rate && !has_focus && document.readyState == "complete") || lost_focus_count > focus_margin) {
        window.location.reload(); // If this is called no reset is needed
        reset(); // We want to reset just to make sure the location reload is not called.
    }

}
window.addEventListener("focus", windowHasFocus, false);
window.addEventListener("blur", windowLostFocus, false);
window.addEventListener("click", reset, false);
window.addEventListener("mousemove", reset, false);
window.addEventListener("keypress", reset, false);
window.addEventListener("scroll", reset, false);
document.addEventListener("touchMove", reset, false);
document.addEventListener("touchEnd", reset, false);

Answer 4

<script type="text/javascript">
  var timeout = setTimeout("location.reload(true);",600000);
  function resetTimeout() {
    clearTimeout(timeout);
    timeout = setTimeout("location.reload(true);",600000);
  }
</script>

除非调用resetTimeout(),否则上面每10分钟刷新一次页面.例如:

<a href="javascript:;" onclick="resetTimeout();">clicky</a>

Answer 5

基于arturnt的公认答案。这是一个稍微优化的版本，但实际上具有相同的功能：

var time = new Date().getTime();
$(document.body).bind("mousemove keypress", function () {
    time = new Date().getTime();
});

setInterval(function() {
    if (new Date().getTime() - time >= 60000) {
        window.location.reload(true);
    }
}, 1000);

唯一的区别是此版本使用setInterval代替setTimeout，这使代码更加紧凑。

Answer 6

var bd = document.getElementsByTagName('body')[0];
var time = new Date().getTime();

bd.onmousemove = goLoad;
function goLoad() {
if(new Date().getTime() - time >= 1200000) {
    time = new Date().getTime();
    window.location.reload(true);
    }else{
        time = new Date().getTime();
    }
}

每次移动鼠标时,它都会检查您上次移动鼠标的时间.如果时间间隔大于20',它将重新加载页面,否则它将更新最后一次移动的鼠标.