Javascript 在一定延迟后逐个加载不同的URL_Javascript_Jquery

Javascript 在一定延迟后逐个加载不同的URL

javascript jquery

Javascript 在一定延迟后逐个加载不同的URL,javascript,jquery,Javascript,Jquery,嗨，我有一个URL数组，我想在同一个浏览器窗口中逐个加载。现在，我可以在浏览器窗口中使用 window.location = url; 但是当我把这个window.location放在一个函数中，并在一个循环中无限地调用该函数时，会有一些延迟，页面只会继续加载，而不会显示任何内容。代码如下： <html> <head> <script> var urls = ["http://www.howstuffworks.com", "http://e

嗨，我有一个URL数组，我想在同一个浏览器窗口中逐个加载。现在，我可以在浏览器窗口中使用

window.location = url;

但是当我把这个window.location放在一个函数中，并在一个循环中无限地调用该函数时，会有一些延迟，页面只会继续加载，而不会显示任何内容。代码如下：

<html>
<head>
    <script>
    var urls = ["http://www.howstuffworks.com", "http://example.com"];
    var i = 0;
        function redirect_url(url)
        {
            window.location = url;
        }

        while (true)
        {
            setTimeout(function() { redirect_url(urls[i]); }, 5000);

            // update the index
            i = (i + 1) % urls.length;
        }

    </script>
</head>


变量URL=[”http://www.howstuffworks.com", "http://example.com"];
var i=0；
函数重定向url（url）
{
window.location=url；
}
while（true）
{
setTimeout（function（）{redirect_url（url[i]）；}，5000）；
//更新索引
i=（i+1）%url.length；
}

我想要的是，当我在浏览器中打开这个脚本文件时，第一个url的网页应该加载，5秒钟后第二个url的网页应该加载，并且应该无限期地继续将加载完全刷新的页面。一旦发生这种情况，上一页中的所有脚本都将不可用，因此您尝试实现的目标将永远不会发生

您可以在页面上设置一个

iframe

，并根据需要每5秒更改一次iframe源

<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
    $(function () {
        var urls = ["http://www.howstuffworks.com", "http://example.com"];
        var i = 0;
        function loadIframe(url)
        {
            $('#iframe').attr('src', url);
        }

        setInterval(function() {
          // update the index
          i = (i + 1) % urls.length; 
          loadIframe(urls[i]); 
        }, 5000);

        loadIframe(urls[i]); 
    });
    </script>
</head>
<body>

    <iframe id="iframe" height="100%" width="100%"></iframe>

</body>
</html>


$（函数（）{
变量URL=[”http://www.howstuffworks.com", "http://example.com"];
var i=0；
函数loadIframe（url）
{
$（'iframe'）.attr（'src'，url）；
}
setInterval（函数（）{
//更新索引
i=（i+1）%url.length；
loadIframe（url[i]）；
}, 5000);
loadIframe（url[i]）；
});

演示

扩展ShankarSangoli的答案，因为原始代码无法工作。循环并将超时设置为5000将在5000秒后同时加载这些URL。你需要增加这个值

<html>
<head>
<script>
var urls = ["http://www.howstuffworks.com", "http://example.com"];
var timeout = 5000;
    function loadIframe(url)
    {
        $('#iframe').attr('src', url);
    }

    for (var i = 0; i < urls.length; i++)
    {
        setTimeout(function() { loadIframe(urls[i]); }, timeout*i);
    }

</script>


变量URL=[”http://www.howstuffworks.com", "http://example.com"];
var超时=5000；
函数loadIframe（url）
{
$（'iframe'）.attr（'src'，url）；
}
对于（var i=0；i







我不认为你所发布的代码可以实现你想要实现的目标。如果您设置了位置，它将导航到新页面，您的JavaScript将停止运行
您可以尝试使用其他一些系统，如iframe或ajax请求，在页面上加载和呈现它们。这将导致页面的来源与正在加载的页面不匹配的问题。这将引发错误，页面将无法加载
对于iFrame，正在加载的页面的X-Frame选项将阻止其显示。另外，如果您的页面是HTTPS，而另一个页面不是HTTPS，则也将无法加载。
这里有一个没有While循环的方法；在我这方面似乎效果不错：
var url=[”http://www.howstuffworks.com", "http://example.com"];
var i=0；
函数重定向_url（）{
如果（哦，我明白你的意思了。有什么办法可以做到这一点。iframe看起来不错。我们可以直接在iframe中加载URL吗？SetTimeout是异步的，我想这就是它不工作的原因。js中的任何其他同步延迟函数都不应该工作。它应该挂起你的浏览器。while
循环永远不会结束，它会不断设置超时永远。最好在处理程序中设置下一个超时（或使用setInterval
）@yoavmatchulsky:谢谢你指出这一点。我完全错过了它。@mSatyam:我已经编辑了我的答案以删除while循环，并使用了setInterval。试试看。这也不起作用，我想是异步的东西让它不起作用。@mSatyam是的，异步是你不能将静态值设置为5000的原因。你还在吗我看到了同样的行为？你能提供一个URL到你测试它的地方吗？@mSatyam做了一些编辑。你的无限时间可能是个问题。如果你像这样迭代，应该总是使用for循环。啊…应该更好地校对我的源代码。Shankars编辑也有问题：Pyes是的…我现在正在尝试用iframes做s在下面的答案中建议了，但这些都还不起作用。可能是您要查看的页面没有设置所需的标题以允许您在IFRAME中显示页面。IFRAME可以用于。因此，除非页面允许，否则它将不会加载到IFRAME中。刚刚发现setTimeout异步工作，这就是为什么它不是我想这是行不通的。JavaScript中的所有内容都是异步的，除非你专门为同步编写代码。如果你在Chrome中打开并使用开发工具，你会看到关于X-FRAME选项的错误消息。我明白了为什么每次重新加载时这些代码都不起作用。我的脚本再次告诉浏览器重新加载…虽然没有找到解决方案，但雪人确实喜欢非常好的递归函数。对我来说很好！虽然可能会编辑它，这样他就不会在列表中反向迭代：）@Kenji谢谢！我会这么做的。额外的“=”如果我想要的正是..谢谢！！
<iframe id="iframe" height="100%" width="100%"></iframe>

var urls = ["http://www.howstuffworks.com", "http://example.com"];
var i = 0;

function redirect_url(){
    if( i <= urls.length ){
        setTimeout(function(){
            $('iframe').attr('src', urls[i]);
            i++;
            redirect_url();
        }, 3000);
    }
}

redirect_url();