HTML - 靜止後刷新頁面

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％