Question

我在使用jQuery编写脚本时遇到问题。

我的页面中有iFrame需要更改。
对于一分钟，iframe的来源必须为http://www.example1.com，然后在五分钟时切换为http://www.example2.com。这是常量循环。但是我怎么能这样做呢？

我现在有：

jQuery(document).ready(function () {
    setTimeout(function() {
        if($('#iframe').attr('src') == "http://www.example1.com")
        {
            $('#iframe').attr('src',"http://www.example2.com");
        }
        else
        {
            $('#iframe').attr('src',"http://www.example1.com");
        }
    }, 10000);
});

但这并没有做那么多。它只运行一次..

Answer 1

我相信这会奏效。每次调用其中一个函数时，它会为另一个函数设置新的超时。您最初显示1，然后设置1分钟超时。当超时到期时，显示2并且新超时设置为5分钟，此时将再次显示1。

function show1() { 
    iframe.attr('src', 'http://www.example1.com');
    setTimeout(function() { show2(); }, 1000 * 60);
}
function show2() { 
    iframe.attr('src', 'http://www.example2.com');
    setTimeout(function() { show1(); }, 1000 * 60 * 5);
}

jQuery(document).ready(function() {
    show1();
});

Answer 2

将iframe的初始src设置为http://www.example1.com和...

jQuery(document).ready(function () {
   var runme = function() {
      var iframe = $('#iframe');

      setTimeout(function() { // first callback
         iframe.attr('src', 'http://www.example2.com');
      }, 1000 * 60);          // change to example2 after 1 minute

      setTimeout(function() { // second callback
         iframe.attr('src', 'http://www.example1.com');
         runme();             // loop
      }, (1000 + 5000) * 60); // change to example1 after 6 minutes (1 + 5)
   };

   runme();
});

此代码准备两个超时，1分钟后执行一个回调函数，1 + 5 = 6分钟后执行第二个回调。第二次回调“重新启动”这两个超时等等。

如果您不想设置初始src，则代码可以写为

jQuery(document).ready(function () {
   var runme = function() {
      var iframe = $('#iframe');

      iframe.attr('src', 'http://www.example1.com');  // set to example1

      setTimeout(function() {
         iframe.attr('src', 'http://www.example2.com');
         setTimeout(runme, 5000 * 60); // repeat after 5 minutes 
      }, 1000 * 60);          // change to example2 after 1 minute
   };

   runme();
});

Answer 3

(function () {
    var iframe = document.getElementById('iframe')
        , urlA = 'http://www.example1.com'
        , urlB = 'http://www.example2.com'
        , delayA = 60000
        , delayB = 300000
        , delay = iframe.getAttribute('src') === urlA ? delayA : delayB
        , timeoutCallback = function () {
            iframe.setAttribute('src', iframe.getAttribute('src') === urlA ? urlB : urlA);
            delay = delay === delayA ? delayB : delayA;

            // Set new timeout with updated delay
            setTimeout(timeoutCallback, delay)
        };

    // Start.
    setTimeout(timeoutCallback, delay);
}());

Answer 4

您还可以创建一个间隔回调，检查每100毫秒是否有时间显示下一个内容。也许它比其他方法复杂一点。

但如果将其作为外部脚本包含在内，则只需3行代码即可加载您想要的内容。

作为iframe的替代方法，您还可以将外部文件加载到对象标记中。我在下面的演示中使用过它。您还可以找到与jsFiddle here相同的代码。

如果您更喜欢iframe，我已在loadData函数中为其添加了代码作为注释。

（我已将每个内容的演示时间设置为1分钟，但可以随意更改。）

＆＃13;

var timedLoader = (function ($) {
    
    var tick = 100; // 100ms
    
    var that;
    function Scheduler() {
        this.schedule = [];
        this.lastTick = (new Date()).getTime();
        this.currentTask = 0;
        this.currentDuration = 0;
        this.elapsed = 0;
        
        that = this;
        this.startTaskRunner();
    }
    
    Scheduler.prototype.startTaskRunner = function() {
        setInterval(this.taskRunner, tick);
    };
    
    Scheduler.prototype.taskRunner = function() {
        // elapsed time
        var now = (new Date()).getTime();
        that.elapsed = now - that.lastTick;
        
        var sched = that.schedule; // reference to schedule to shorten the code
        
        if ( sched.length > 0 ) {
            // at least one task available
            if ( that.currentDuration == 0 ) {
                that.currentDuration = sched[that.currentTask].displayTime * 60 * 1000; // scale to milli seconds
                console.log('start duration = ' + that.currentDuration);
                console.log('task = ' + that.currentTask);
                
                loadData(sched[that.currentTask].url);
            }
            else
            {
                that.currentDuration -= that.elapsed;
                //console.log(that.currentDuration);   
                if (that.currentDuration <= 0) {
                    // total time elapsed
                    that.currentDuration = 0;
                    that.currentTask++;
                    
                    // check if rollover required
                    if (that.currentTask > sched.length-1) that.currentTask = 0;
                }
            }
        }
        
        that.lastTick = now; // copy new to old
    };
    
    // time in minutes
    Scheduler.prototype.addTask = function(url, time) {
        this.schedule.push({'url': url, 'displayTime': time});
    };
    
    var loadData = function (src) {
        $('#container').html('<object type="text/html" data="'+ src +'"></object>');
        //$('#container').html('<iframe src="'+ src +'"></iframe>');
    };
    
    return {
        loadData: loadData,
        Scheduler: Scheduler
    };
})(jQuery);

$(function () {
    //timedLoader.loadData('http://www.example.com/');
    
    var loader = new timedLoader.Scheduler(); // start and init scheduler
    loader.addTask('http://www.example.com/', 1); // url to load, time in minutes
    loader.addTask('http://www.example1.com/', 1);
    //loader.addTask('http://www.wikipedia.org/', 1);
});

＆＃13;

object, iframe {
    width: 100%;
    height: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

<!-- <object type="text/html" data="http://www.example.com/" ></object>-->

＆＃13;

常量脚本 - ＆gt;改变src iframe（1分钟，5分钟）+ jQuery

4 个答案: