Rotating URLs within an Iframe

javascript

18,478

Solution 1

<iframe id="rotator" src="http://...first"></iframe>

<script>
// start when the page is loaded
window.onload = function() {

  var urls = [
    "http://...first",
    "http://...second",
    // ....
    "http://...tenth" // no ,!!
  ];

  var index = 1;
  var el = document.getElementById("rotator");

  setTimeout(function rotate() {

    if ( index === urls.length ) {
      index = 0;
    }

    el.src = urls[index];
    index  = index + 1;

    // continue rotating iframes
    setTimeout(rotate, 5000);

  }, 5000); // 5000ms = 5s
};
</script>

Solution 2

Javascript (place in window.onload)

var urls = ['http://www.stackoverflow.com', 'http://www.google.com'];
var pos = 0;

next();

setInterval(next, 5000); // every 5 seconds

function next()
{
  if(pos == urls.length) pos = 0; // reset the counter
  document.getElementById('rotate').src = urls[pos];
  pos++;
}

HTML

<iframe id="rotate"></iframe>

18,478

tonyf

Updated on April 26, 2022

Comments

tonyf about 2 years

I have 10 different urls that I want to feed into an iframe src attribute that I would also like to rotate say every 5 seconds between all the 10 urls within the iframe.

Unsure how to do this using javascript/best approach?

Sorry, should've mentioned that I am using IE6.

Thanks.
- Jeremy McGee
  
  It's worth mentioning that these won't work with modern versions of Chrome: unless you control the page, and explicitly allow embedding, you'll receive "Refused to display document because display forbidden by X-Frame-Options" when you try to use the iFrame.
gblazex almost 14 years

WRONG. becomes funny after the 10000. iframe.src = undefined.... :) now it is a sequence not a rotation...
Ben Rowe almost 14 years

@galambalazs sorry I missed that.
gblazex almost 14 years

arguments.callee is no longer part of the language. function 'f' is useless.
meder omuraliev almost 14 years

"WRONG". The requested URL /t/undefined was not found on this server. because urls.length needs to be urls.length-1
gblazex almost 14 years

you are polluting the global namespace. bad practice :(
meder omuraliev almost 14 years

those are minor and subjective points compared to your broken script :) see my comment.
naikus almost 14 years

This example shows how it could be done. I never said its perfect. I expect the person asking the question would integrate this the way he/she sees fit and not take the code as it is. But thanks for the review anyway, I'll have namespaced objects and functions hereon. I think it should be a habit, no matter what you are coding :)
tonyf almost 14 years

thanks Ben but unfortunately it doesn't seem to be rotating through the URLS, just does the first one only?
tonyf almost 14 years

FYI, I am using IE6 and I believe it's not working b/c of this.
gblazex almost 14 years

:)) thx. No, what I wanted is to start from 1, and increment index after changing the src. It works now.
Serge almost 6 years

Is it possibe to rotate in random order ? Give you another useful plus for your attention.
Warren Sergent about 5 years

@Serge - if still curious, replace the first var index = 1; with var index = Math.floor(Math.random() * Math.floor(urls.length));, remove the if(index == urls.length) check and replace the index = index + 1 with index = Math.floor(Math.random() * Math.floor(urls.length))
Serge about 5 years

@Warren Sergent - YES ! Thx !