Joe Joe - 3 months ago 10
Ajax Question

How to reload content according exac time without refreshing the page

I'm preparing simple digital signage script which require time scheduling.
I was able to do it with javascript with refreshing every 15 minutes.
But my question is, how can I measure the time and change the content on exact hour without refreshing the page?

My page looks like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="900" >
<title>Signage</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script>
function src() {
var Day = "day.html";
var Lunch = "lunch.html";
var Evening = "evening.html";
var Src;

var hour = new Date().getHours();
var day = new Date().getDay();

if (hour >= 10 && hour <= 13 && day >= 1 && day <=5) {
Src = Lunch;
}

else if (hour >= 7 && hour <= 19) {
Src = Day;
}

else {
Src = Evening;
}

document.getElementById('signage').src = Src;

}

</script>

</head>
<body onLoad="src();">
<iframe scrolling="no" id="signage" src="about:blank" width="1920" height="1080" frameborder="0"></iframe>

</body>
</html>

Answer

If you want your page to refresh automatically after a certain time period, you can use javascript's setInterval() function.

setInterval(function() { window.location.reload(); } , timePeriod );