Javascript - 重新加载无限循环中的网站

问题描述：

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

<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://*.com/"); 
 
     sleep(5000); 
 
    \t } 
 
    } 
 

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

什么是你想实现这个？ – 2015-03-13 11:56:27

在JS中不使用'thread.sleep'，因为它是单线程的，你将锁定浏览器。改用'window.setTimeout' /'window.setInterval'。 – Jonathan 2015-03-13 11:56:49

答

那么你可以做的是：

<script type="text/javascript"> 

var urls = ["http://www.google.com/", "http://www.yahoo.com/", "https://*.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等。

答

我会做这样的事情：

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

相关推荐