Javascript - reload sites in infinite loop

Question

I have problem with reloading a list of sites in infinite loop. When in first time I tried do it without iframe, the first site was loaded and nothing else happend. I want to reload some sites from list into iframe. There should be no buttons to reload site, it should be automatic -> show site, wait 20 sec, show site2, wait 60 sec... I want to have different delays, so thats way there is a sleep in infinite loop. In this point I stucked :) Below is my (rubbish :) ) example I tried to run. Any ideas how to do it easy and small as possible ?

<html>
  
<head>
  
  <script language="JavaScript" type = "text/javascript">
    
    function sleep(delay) {
     var start = new Date().getTime();
     while (new Date().getTime() < start + delay);
    }
  
    function changeSites() {
      while(true){
        document.getElementById('myFrame').setAttribute('src', "http://www.google.com/");
        sleep(4000);
        document.getElementById('myFrame').setAttribute('src', "http://www.yahoo.com/");
        sleep(2000);
        document.getElementById('myFrame').setAttribute('src', "http://stackoverflow.com/");
        sleep(5000);
     }
    }

  </script>
  
</head>

<body>
    
  <iframe id="myFrame" width=100% height=100% >
    
   <p>Your browser does not support iframes.</p>
   
  </iframe>

  <script language="JavaScript" type = "text/javascript">
    
    changeSites();

  </script>
  
 </body>
  
</html>

You don't use `thread.sleep` in JS as it is single threaded, you will lock up the browser. Use `window.setTimeout` / `window.setInterval` instead. — Jonathan, Mar 13 '15 at 11:56

score 0 · Answer 1 · edited May 23 '17 at 11:43

Well what you could do is the following:

 <script type="text/javascript">

var urls = ["http://www.google.com/", "http://www.yahoo.com/", "https://stackoverflow.com/"];
var index = 0;
setInterval(function() {
    document.getElementById('myFrame').setAttribute('src', urls[index]);
    index = index+1;
    if(index > urls.length-1) {
        index = 0;
    }
}, 20000);
</script>

Except Google and others won't allow this. See How to show google.com in an iframe?. You should probably have control over embedded sites in iframe or use CORS etc. for sites you want to embed.

oBlissing · Answer 2 · 2015-03-13T15:06:49.760

I'd do something like this:

var sites = [
    { 'src' : 'http://www.google.com', 'delay' : 4000 },
    { 'src' : 'http://www.github.com', 'delay' : 6000 }
];
var index = 0, time, lastUpdate = new Date().getTime();

function showNextSite () {
    document.getElementById('myFrame').setAttribute('src', sites[index].src);
    lastUpdate = new Date().getTime();
    index++;
    if(index >= sites.length)
        index = 0;
}

setInterval(function () {
    time = new Date().getTime();
    if (time >= lastUpdate + sites[index].delay)
        showNextSite();
}, 1000); // lets only check this every second

Javascript - reload sites in infinite loop

2 Answers2