HTML - refresh page after inactivity - html

Question

I am having a touch screen with some very basic html pages. But if there is no activity for maybe 5 minutes, it should reload the main page again.
So it is not just a refresh of the site, but a load of the main page if there is no activity
just a question Where does the script know which site is the main page ?. If someone goes to "site B" - it should after some minutes without any movement move back to "site A"

Answer 1

Here is plain JavaScript implementation, without any dependencies:
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
}
};
You can adjust list of events to listen to achieve best performance.
Complete list of DOM events.

Answer 2

You would need to use JavaScript. There is a The jQuery idletimer plugin at
http://paulirish.com/2009/jquery-idletimer-plugin/
Example:
// 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');
Reference:
How to change a page location after inactivity of 5 mins

Answer 3

Assuming no activity means you do not get click, scroll and movement events. You need to listen to these events in the body element of your page and set a range that calls the page refresh method.
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();
You can bind as may events as you wish to ajust it to your needs.
Here is an working example https://jsfiddle.net/fspayfqt/
Please note that for this to work perfectly the body element will cover the whole window of the navigator and this can be solved with css using fixed position with height and width of 100%