Question

我想在不同的时间加载一堆iframe，不是所有的iframe都在同一时间，而是一个接一个，比如300000ms，然后是209000ms，然后是257000ms等。它们都需要在不同的时间加载在彼此之后，我需要能够在以后需要时更改它们。当我点击按钮而不是onload事件时，我希望它是。我在javascript方面经验不足。请不要jQuery。谢谢！

编辑：我希望iframe在彼此之上加载，或者互相替换，而不是在列表中加载一堆iframe。我总共会提出大约5个iframe。对不起，因为不够具体。这样的事情，除了工作时间：

<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>

除了自动播放所有内容外，不是作为一堆链接，而是在经过一段时间之后点击并加载到iframe中之前的帧时间已过去， ，如播放列表 。他们都需要显示不同的时间，然后加载下一个iframe，我强调他们都将是不同的时间。

Answer 1

您可以使用setInterval()并循环设置每个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

如果您想通过单击按钮来触发它，只需将其包装在一个函数中并附加一个事件监听器：

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

Answer 2

<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>

只需更改每个iframe中的“data-seconds”和“data-src”属性，并将“custom-frame”类放在iframe元素中。

当您点击该按钮时，它们将根据iframe自定义配置运行。

Answer 3

<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>

只需要重复那些<a>元素。将“iframe-button”类放在它们上面，如果是URL值，则放入“data-src”属性。

如何以不同的时间间隔（如播放列表）加载iframe

3 个答案: