Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Load Different Urls One By One After Certain Delay

Post a Comment
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 w

Solution 1:

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;

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

Solution 2:

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><scriptsrc="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;
        functionloadIframe(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><iframeid="iframe"height="100%"width="100%"></iframe></body></html>

Demohttp://plnkr.co/edit/hjx3b234MUDzkSL67RW5?p=preview

Solution 3:

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.

Solution 4:

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

Post a Comment for "Load Different Urls One By One After Certain Delay"