2

I would like to load a bunch of iframes at different times, not all at the same time but one after another like one at 300000ms, then 209000ms, then 257000ms, etc. They will all need to be loaded at different times after each other and I need to be able to change them later if needed. I would like it to be when I click a button not as an onload event. I have little experience in javascript. Please no jQuery. Thanks!

Edit: I want the iframes to load on top of one another, or replace one another, not load a bunch of them in a list. I will only be putting up around 5 iframes total. Sorry for not being specific enough. Something like this, except for the time working:

<a target='page' href='http://framedsite1'>#1 (visible for 300000ms)</a>
<a target='page' href='http://framedsite2'>#2 (visible for 209000ms)</a>
<a target='page' href='http://framedsite3'>#3 (visible for 257000ms)</a> 
<iframe id='page' name='page' src=''></iframe>

Except for auto playing through them all, not as a bunch of links but by being clicked on and loaded into the iframe after a set amount of time after the previous frames time has gone by, kind of like a playlist. They will all need to be displayed for different amounts of time then load the next iframe, I am emphasizing that they all will be different amounts of time.

1
  • Where is the miliseconds on that situation?
    – rafaels88
    Jul 26, 2014 at 4:24

3 Answers 3

1

You can use setInterval() and loop through to set the source for each iframe:

var iframes = document.getElementsByTagName("iframe"); //retrieves a NodeList of iframes
var i = 0;
var interval = window.setInterval(function(){
    if(i < iframes.length){
        iframes[i].src = "//example.com"; //source of the iframes
        i++;
    }else{
        window.clearInterval(interval);
    }
}, 3000); //interval to load each iframe in milliseconds

Demo

If you want to trigger it with a button click, just wrap it in a function and attach an event listener:

document.getElementById("idOfButton").addEventListener("click", function(){
    var iframes = document.getElementsByTagName("iframe"); //retrieves a NodeList of iframes
    var i = 0;
    var interval = window.setInterval(function(){
        if(i < iframes.length){
            iframes[i].src = "//example.com"; //source of the iframes
            i++;
        }else{
            window.clearInterval(interval);
    }, 3000); //interval to load each iframe in milliseconds
});

Demo

2
  • SetInterval will never stop to run. Even you doing IF inside, it keeps running. It's a bad practice of memory optimization.
    – rafaels88
    Jul 26, 2014 at 3:33
  • @rafaels88 That's true: fixed.
    – AstroCB
    Jul 26, 2014 at 3:37
0
<html>
<head>
    <script>
      var iframes;

      var loadIframes = function(){
        iframes = document.getElementsByClassName('custom-iframe');
        for(var i=0; i<iframes.length; i++){

          var iframe = iframes[i],
              seconds = iframe.getAttribute('data-seconds'),
              src = iframe.getAttribute('data-src');

          run(i, src, seconds);
        }
      }

      var run = function(i, src, seconds){
        setTimeout(function(){
          iframes[i].src = src;
        }, seconds);
      }

    </script>
</head>
<body>
    <button onclick="loadIframes()">Load iframes</button>

    <iframe class="custom-iframe" data-seconds="3000" data-src="http://example.com"></iframe>
    <iframe class="custom-iframe" data-seconds="900" data-src="http://google.com"></iframe>
</body>
</html>

Just change "data-seconds" and "data-src" attributes in each iframe, and put "custom-frame" class in the iframe elements.

When you click the button, they will run based on the iframe custom configs.

1
  • This does not scale: imagine if you had 100 iframes and you had to write a separate function and timeout for each one. The OP says that there are a bunch of iframes, which is ambiguous, but it implies that doing this for all of them would be a bit clunky.
    – AstroCB
    Jul 26, 2014 at 3:40
0
<html>
<head>
  <script>
    var buttons = document.getElementsByClassName('iframe-button');
    var iframe = document.getElementById('my-iframe');

    for(var i=0; i < buttons.length; i++){
       var button = buttons[i];
       button.addEventListener("click", function(){
         var src = button.getAttribute('data-src');
         iframe.src = src;
       });
    }
  </script>
</head>
<body>
    <a href="javascript:void(0);" class="iframe-button" data-src="//example.com">Example.com</a>
    <a href="javascript:void(0);" class="iframe-button" data-src="//google.com">Google.com</a>

    <iframe id="my-iframe"></iframe>
</body>

Just need to repeat those <a> elements. Put "iframe-button" class on them, and "data-src" attribute if the URL value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.