Fatal编程技术网
  • javascript/
  • Javascript 如何像播放列表一样以不同的时间间隔加载iFrame

Javascript 如何像播放列表一样以不同的时间间隔加载iFrame

javascript iframe

Javascript 如何像播放列表一样以不同的时间间隔加载iFrame,javascript,iframe,onclick,Javascript,Iframe,Onclick,我想在不同的时间加载一组iFrame，不是同时加载，而是一个接一个地加载，比如30000ms、209000ms、257000ms等等。它们都需要在彼此之后的不同时间加载，如果需要，我需要能够稍后更改它们。我希望它是当我点击一个按钮，而不是作为一个onload事件。我对javascript几乎没有经验。 请不要用jQuery。 谢谢 编辑：我想让iFrame一个接一个地加载，或者相互替换，而不是在列表中加载一堆iFrame。我只会提出大约5个iFrame总数。对不起，我说得不够具体。类似这样的事情

我想在不同的时间加载一组iFrame，不是同时加载，而是一个接一个地加载，比如30000ms、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，我要强调的是，它们都需要不同的时间量。



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


变异框架；
var loadIframes=函数（）{
iframes=document.getElementsByClassName（'custom-iframe'）；
对于（var i=0；i，您可以使用并循环设置每个
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



var-iframes=document.getElementsByTagName（“iframe”）；//检索iframe的节点列表
var i=0；
var interval=window.setInterval（函数（）{
if（i



如果要通过单击按钮触发它，只需将其包装在函数中并附加事件侦听器：


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
});



document.getElementById（“idOfButton”）.addEventListener（“单击”，函数（）{
var iframes=document.getElementsByTagName（“iframe”）；//检索iframe的节点列表
var i=0；
var interval=window.setInterval（函数（）{
if（i



var buttons=document.getElementsByClassName（'iframe-button'）；
var-iframe=document.getElementById（'my-iframe'）；
对于（变量i=0；i


只需要重复那些
元素。在它们上面放上“iframe button”类和“data src”属性。SetInterval将永远不会停止运行。即使您在内部运行，它也会继续运行。这是内存优化的一个糟糕做法。@rafaels88这是正确的：已修复。这不可缩放：想象一下，如果您有100个iFrame，并且必须为每个iFrame编写单独的函数和超时。OP说有一堆iFrame帧
，这是不明确的，但这意味着对所有帧执行此操作会有点笨拙。在这种情况下，毫秒在哪里？ 
<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>