CODEWITHSUNDEEP
javascriptjquery
mSatyam
mSatyam

Reputation: 541

load different urls one by one after certain delay

Hi I have a array of urls which I want to load in the same browser window one by one. For now I am able to load a single url in a browser window using

window.location = url;

But when I put this window.location in a function and call that function infinitely in a loop with some delay the page just keeps on loading and nothing gets displayed. Code is below:

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

What I want is when I open this script file in my browser then the first url's webpage should get loaded and after 5 secs second url's webpage should get loaded and this should continue infinitely.

Upvotes: 6

Views: 6204

Answers (4)

wrxsti
wrxsti

Reputation: 3494

Here is a method without the While loop; Seems to work well on my end: 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();

Hope this helps! Let me know if you have any questions.

Upvotes: 5

Michael
Michael

Reputation: 532

Expanding on ShankarSangoli's answers since original code will not work. Looping through and doing the set timeout as 5000 will just load those urls simultaneously 5000 seconds from now. You need to increment that value.

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

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

window.location = url; will load the page with full refresh. Once that happens all the script from the previous page will not be available so what you are trying the achieve will never happen.

May be you can have an iframe on the page and change the iframe source every 5 seconds as you need.

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

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

Upvotes: 2

Adam Carr
Adam Carr

Reputation: 688

I don't think what you're trying to achieve can be done by the code you have posted. If you set the location it will navigate to the new page and your JavaScript will cease to function.

You could try using some other systems such as IFRAMES or ajax requests to load and render them on your page. This will lead to issues where the Origin of your page will not match the one you are loading. This will throw an error and the page will fail to load.

For the IFRAMEs the X-Frame-Options of the page you are loading will prevent it from being displayed. Also if your page is HTTPS and the other page is not it will also fail to load.

Upvotes: 1

Related Questions