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

javascript - 在一定延迟后逐个加载不同的URL,第1张

您好我有一系列网址,我想逐个加载到同一个浏览器窗口中。现在我可以使用

在浏览器窗口中加载单个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>

我想要的是当我在浏览器中打开此脚本文件时,第一个网址的网页应该被加载,并且在5秒之后,第二个网址的网页应该被加载,这应该无限地继续。

最佳答案:

4 个答案:

答案 0 :(得分:4)

这是一个没有While循环的方法;似乎在我的最后工作:http://jsfiddle.net/77617znz/2/

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();

希望这有帮助!如果您有任何问题,请告诉我。

答案 1 :(得分:2)

window.location = 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>

演示 http://plnkr.co/edit/hjx3b234MUDzkSL67RW5?p=preview

答案 2 :(得分:1)

我不认为您尝试实现的目标可以通过您发布的代码完成。如果您设置了位置,它将导航到新页面,您的JavaScript将停止运行。

您可以尝试使用其他系统(如IFRAMES或ajax请求)在页面上加载和呈现它们。这将导致页面的原点与您正在加载的页面的原点不匹配的问题。这将引发错误,页面将无法加载。

对于IFRAME,您正在加载的页面的X-Frame-Options将阻止它显示。此外,如果您的页面是HTTPS而另一页不是,那么它也将无法加载。

答案 3 :(得分:0)

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

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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复