Question

我有10个不同的网址，我想要输入iframe src属性，我也想旋转说iframe中所有10个网址之间每隔5秒。

不确定如何使用javascript / best方法执行此操作？

很抱歉，应该提到我使用的是IE6。

感谢。

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

Answer 2

Javascript（放在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>

Answer 3

有很多方法，所以最佳可供讨论。自提到JavaScript以来，请查看setInterval()。我写了一个方法，通过它的id属性getElementById()在页面上获取iframe，并将src属性更改为URL数组中的下一个网址。

Answer 4

<!doctype html>
<html>
    <body>
        <iframe id="foo"></iframe>
        <script>
            (function() {
                var e = document.getElementById('foo'),
                    f = function( el, url ) {
                        el.src = url;
                    },
                    urls = [
                    'http://www.msn.com/',
                    'http://www.mtv.com/'
                    ],
                    i = 0,
                    l = urls.length;

                    (function rotation() {
                        if ( i != l-1 ) { 
                            i++
                        } else {
                            i = 0;
                        }
                        f( e, urls[i] );
                        setTimeout( arguments.callee, 5000 );
                    })();
            })();
        </script>
    </body>
</html>

Answer 5

您好我认为您需要完全加载页面才能启动计时器以加载下一个网址，否则您最终会在现有网页显示之前显示下一个网址（具体取决于你的互联网速度）。其次，您说要旋转 URLS。以下是经过测试的代码：

  <html>
     <head>
        <title></title>
        <style type="text/css">

        </style>
        <script type="text/javascript">
           var urls = [
              "http://www.google.com"
              ,"http://www.yahoo.com"
              ,"http://www.ajaxian.com"
              ,"http://www.ebay.com"
           ];



           function showUrl(idx) {
              alert(idx + " Showing " + urls[idx]);
              var f = document.getElementById("f");

              // call the next load  after 5 seconds only after 
              // this iframe loads
              f.onload = function()   {
                 var next = ++idx % urls.length;
                 setTimeout(function(){
                    showUrl(next);
                 }, 5000);  
              }
              // set the src
              f.src = urls[idx];
           }

        </script>
     </head>
     <body onload="showUrl(0)" class="app-chrome">
        <iframe id="f" src="about:blank"></iframe>
     </body>
  </html>

添加更紧凑的版本：（适用于IE6，FF，Opera，Chromium）

         <script type="text/javascript">

      window.onload = (function(urls, interval) {
             var idx = 0;
             var bAttached = false;
             return function showUrl() {
                var f = document.getElementById("f");

                var onLoad = function()   {     // loading only after previous page loads
                   idx = ++idx % urls.length; // rotation
                   setTimeout(showUrl, interval);  
                }

                if(! bAttached) {
                   if(navigator.userAgent.indexOf("MSIE") !== -1) {
                         f.attachEvent("onload", onLoad);
                         bAttached = true;
                   }else  {
                      f.onload = onLoad;
                   }
                   bAttached = true;
                }
                f.src = urls[idx];
             };
          })([
             "http://www.google.com" ,"http://www.yahoo.com" ,
             "http://www.sun.com" ,"http://www.ebay.com"
             ], 5000
          );      
     </script>

Answer 6

是否有理由在每次旋转时重新加载iframe？如果这个特定的项目与体验质量有关，我可以预先加载所有iframe并简单地旋转它们的显示。

Answer 7

我不打算为你做所有事情，而是按要求提供一个例子：使用Jquery轻松。

代码：

<script type="text/javascript">
    //sets a var to 0//
    var MyInt = 0
    //sets some URLS//
    var url1 = 'http://UR1L.com';
    var url2 = 'http://URL2.com';
    var url3 = 'http://URL3.com';

 function RunEveryTenSecs {
     // Increases var by 1//
     MyInt + 1;
     //Checks var value if 1 runs if not goes to next//
     if (MyInt == 1) {
        $('#MyElementID').html('<iframe src="' + url1+ '"></iframe>');
     }
     if (MyInt == 2) {
        $('#MyElementID').html('<iframe src="' + url2+ '"></iframe>');
     }
     if (MyInt == 3) {
        $('#MyElementID').html('<iframe src="' + url3+ '"></iframe>');
        MyInt = 0;
     }
 }

window.setTimeout(RunEveryTenSecs, 10000);
</script>

HTML：

<div id="MyElementID">
IFRAME WILL GO HERE.
</div>

它可能不是最好的其他方法，但它是简单易懂的东西。 URL不必分离，但将来更容易更改它们。

在iframe中旋转网址

7 个答案: