Menu
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.
822
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.
74
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
45
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
