title: How to reload content according exac time without refreshing the page
body: <p>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?</p>
  
  <p>My page looks like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="refresh" content="900" &gt;
  &lt;title&gt;Signage&lt;/title&gt;
  &lt;style&gt;
  body {
     margin: 0;
     padding: 0;
  }
  &lt;/style&gt;
  &lt;script&gt;
  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 &gt;= 10 &amp;&amp; hour &lt;= 13 &amp;&amp; day &gt;= 1 &amp;&amp; day &lt;=5) {
          Src = Lunch;    
      }       
  
      else if (hour &gt;= 7 &amp;&amp; hour &lt;= 19)   {
          Src = Day;
              }
  
      else  {
          Src = Evening;
              }
  
  document.getElementById('signage').src = Src; 
  
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onLoad="src();"&gt;
  &lt;iframe scrolling="no" id="signage" src="about:blank" width="1920" height="1080" frameborder="0"&gt;&lt;/iframe&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>