Constant script -> change src iframe (1min, 5min) + jQuery

问题

I'm having problems writing a script in jQuery.

I have an iFrame in my page that needs to change.
The source of the iframe has to be http://www.example1.com for ONE minute and then switched to http://www.example2.com for FIVE minutes. This in a constant loop. But how can I do this?

I now have:

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

But this doesn't do so much. And it only runs once ..

回答1:

I believe this will work. Each time one of the functions is called, it sets a new timeout for the other function. You initally show 1, then set a 1 minute timeout. When that timeout expires, 2 is shown and a new timeout is set for 5 minutes, at which point, 1 will be shown again.

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

回答2:

Set initial src of iframe as http://www.example1.com and ...

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

This code prepares two timeouts, with one callback function executed after 1 minute and second callback executed after 1 + 5 = 6 minutes. Second callback 'rearms' these two timeouts and so on..

If you do not want to setup initial src, the code can be written as

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

回答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);
}());

回答4:

You could also create one interval callback that checks every 100ms if it's time to show the next content. Maybe it's a bit more complicated than the other approaches.

But if you include this as an external script it's only 3 lines of code to load what you want.

As alternative to an iframe you could also load the external file into an object tag. I have used it in the demo below. You can also find the same code as jsFiddle here.

If you prefer the iframe I have added the code for it in the loadData function as comment.

(I've set the time in the demo to 1 minute for each content but this can be changed as you like.)

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

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

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

来源：https://stackoverflow.com/questions/27159682/constant-script-change-src-iframe-1min-5min-jquery

标签

javascript

jquery

loops

iframe

settimeout