常量脚本 -> 更改 src iframe (1 分钟, 5分钟) + jQuery

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

本文关键字:分钟 5分钟 jQuery iframe 脚本 src 更改 常量      更新时间:2023-09-26

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

但这并没有多大作用。而且它只运行一次.

我相信

这会起作用。每次调用其中一个函数时,它都会为另一个函数设置新的超时。您最初显示 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();
});

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

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

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

作为 iframe 的替代方法,您还可以将外部文件加载到对象标签中。我已经在下面的演示中使用了它。你也可以在这里找到与jsFiddle相同的代码。

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

(我将演示中每个内容的时间设置为 1 分钟,但可以根据需要进行更改。

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