Question

我在无限循环中重新加载网站列表时遇到问题。当我第一次尝试没有iframe时，第一个网站被加载，没有其他事情发生。我想将列表中的一些网站重新加载到iframe中。应该没有按钮来重新加载网站，它应该是自动的 - ＆gt;显示网站，等待20秒，显示site2，等待60秒......我想有不同的延迟，所以这就是在无限循环中有一个睡眠。在这一点上，我坚持:) 下面是我试图运行的（垃圾:)）示例。任何想法如何做到尽可能容易和小？

<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>

Answer 1

你可以做的是以下几点：

 <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>

除了谷歌和其他人不允许这样做。见How to show google.com in an iframe?。您可能应该控制iframe中的嵌入式网站，或者对要嵌入的网站使用CORS等。

Answer 2

我做这样的事情：

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 - 以无限循环重新加载网站

2 个答案: