如何以不同的时间间隔加载 iframe，例如播放列表答案

【问题标题】：How do I load iframes at different time intervals like a playlist如何以不同的时间间隔加载 iframe，例如播放列表
【发布时间】：2014-07-26 03:05:16
【问题描述】：

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

编辑：我希望 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，我强调它们的时间都不同。

【问题讨论】：

这种情况下的毫秒数在哪里？

标签： javascript iframe onclick

【解决方案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

【讨论】：

SetInterval 永远不会停止运行。即使你在里面做 IF，它也会继续运行。这是一种糟糕的内存优化做法。
@rafaels88 确实如此：已修复。

【解决方案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 自定义配置运行。

【讨论】：

这无法扩展：想象一下，如果您有 100 个 iframe，并且您必须为每个 iframe 编写一个单独的函数和超时。 OP 说有a bunch of iframes，这是模棱两可的，但这意味着对所有这些都这样做会有点笨拙。

【解决方案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”属性。

【讨论】：