Question

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

所以这不只是刷新网站，而是在没有活动的情况下加载主页面

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

Answer 1

您需要使用JavaScript。有一个jQuery idletimer插件 http://paulirish.com/2009/jquery-idletimer-plugin/

示例：

// 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');

参考： How to change a page location after inactivity of 5 mins

Answer 2

这是简单的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
            }
        };

您可以调整要收听的事件列表以获得最佳性能 Complete list of DOM events.

Answer 3

假设没有活动意味着您没有获得点击，滚动和移动事件。您需要在页面的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();

您可以根据需要绑定事件，以满足您的需求。

这是一个工作示例https://jsfiddle.net/fspayfqt/ 请注意，为了使其完美地工作，主体元素将覆盖导航器的整个窗口，这可以使用css解决，使用固定位置，高度和宽度为100％

HTML - 不活动后刷新页面

3 个答案: