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 = ["", ""];
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.
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.", "http://example."];
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.
Share asked Jun 11, 2015 at 15:08 mSatyammSatyam 54111 silver badges30 bronze badges 1- I got the point why this code won't work as at each reload my script again tells browser to reload...though not found a solution yet – mSatyam Commented Jun 11, 2015 at 15:40
4 Answers
Reset to default 5Here is a method without the While loop; Seems to work well on my end: http://jsfiddle/77617znz/2/
var urls = ["http://www.howstuffworks.", "http://example."];
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.
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./jquery-2.1.4.min.js"></script>
<script>
$(function () {
var urls = ["http://www.howstuffworks.", "http://example."];
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
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.
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.", "http://example."];
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>