HTML-不活动后刷新页面

我有一些非常基本的html页面触摸屏。但是如果5分钟内没有活动，它应该重新加载主页

因此，这不仅仅是对站点的刷新，如果没有活动，它还会加载主页

---

---

只是一个问题，脚本在哪里知道哪个站点是主页？。如果有人去“站点B”-它应该在几分钟后没有任何移动就返回到“站点A”

您需要使用JavaScript。jqueryidletimer插件在

例如：

// idleTimer() takes an optional argument that defines the idle timeout
// timeout is in milliseconds; defaults to 30000
$.idleTimer(10000);


$(document).bind("idle.idleTimer", function(){
 // function you want to fire when the user goes idle
});


$(document).bind("active.idleTimer", function(){
 // function you want to fire when the user becomes active again
});

// pass the string 'destroy' to stop the timer
$.idleTimer('destroy');

参考：

---

这里是简单的JavaScript实现，没有任何依赖关系：

 var inactivityTime = function () {
            var timer;

            window.onload = timerReset;
            document.onkeypress = timerReset;
            document.onmousemove = timerReset;
            document.onmousedown = timerReset; 
            document.ontouchstart = timerReset;
            document.onclick = timerReset;
            document.onscroll = timerReset;
            document.onkeypress = timerReset;

            function timerElapsed() {
                console.log("Timer elapsed");
                location.reload();
            };

            function timerReset() {
                console.log("Reseting timer");
                clearTimeout(timer);
                timer = setTimeout(timerElapsed, 5 * 60 * 1000); // 5 mins
            }
        };

您可以调整事件列表以获得最佳性能。

---

假设没有活动意味着您没有点击、滚动和移动事件。您需要在页面的body元素中侦听这些事件，并设置调用页面刷新方法的范围

var timeOut = null;
var activityMade = function(){

clearInterval(timeOut); //first clears the interval
  timeOut = setInterval(function(){ console.log("Page Refreshed"); }, 3000); //logs to the console at every 3 seconds of inactivity
}

var bindEvents = function(){
  var body = document.getElementById("app");
  // bind click move and scroll event to body
  body.addEventListener('click', activityMade);
  body.addEventListener('mousemove', activityMade);
  body.addEventListener('scroll', activityMade);
  activityMade(); // assume activivity has done at page init
}

bindEvents();

您可以根据自己的需要绑定任意事件

下面是一个工作示例

---

请注意，要使其完美工作，body元素将覆盖导航器的整个窗口，这可以通过css使用高度和宽度为100%的固定位置来解决。

Hi，您是否尝试将click和mousemove事件附加到页面的body？也许您也应该执行此功能：）（例如，立即调用的函数表达式）