Question

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

在浏览器窗口中加载单个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秒之后，第二个网址的网页应该被加载，这应该无限地继续。

Answer 1

这是一个没有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();

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

Answer 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

Answer 3

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

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

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

Answer 4

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

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

4 个答案: