Load different urls one by one after a certain delay
Hi I have an array of urls that I want to load in one browser window one at a time. At the moment I can load a single url in the browser window using
window.location = url;
But when I put this window.location in a function and call this function endlessly in a loop with some delay, the page just keeps loading and nothing is displayed. Code 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 web page should load and after 5 seconds the second url page should load and this should continue indefinitely.
source to share
Here's a method without a While loop; Seems to work well from 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.
source to share
window.location = url;
will load the full refresh page. Once this happens, all script from the previous page will be inaccessible, so what you are trying to achieve will never happen.
Perhaps you can have iframe
on the page and change the source of the iframe 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>
source to share
I don't think that what you are trying to achieve can be done with the code you posted. If you set a location, it will go to a new page and your JavaScript will stop working.
You can try using some other systems like IFRAMES or ajax requests to load and render them on your page. This will lead to problems in which the Origin of your page will not match the one you are loading. This will throw an error and the page will not load.
For IFRAMEs, the X-Frame parameters on the loaded page do not allow it to be displayed. Also if your page is HTTPS and the other page won't load.
source to share
Expanding on ShankarSangoli's answers as the original code won't work. Running and executing a given timeout of 5000 will just load these URLs at the same time for 5000 seconds. You need to increase this 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>
source to share