常量脚本 -> 更改 src iframe (1 分钟, 5分钟) + jQuery
Constant script -> change src iframe (1min, 5min) + jQuery
我在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>-->
相关文章:
- Javascript倒计时计时器倒计时未正确更新秒/分钟
- 如何在不活动5分钟后更改页面位置
- 每小时倒计时一次,但以30分钟为单位
- 角度在60多分钟内路线问题
- 计时器在使用 jQuery 一分钟后没有触发,或者每 1 分钟后给出一些其他解决方案来触发功能
- 制作一个按钮倒计时计时器,该计时器将在5分钟后永久禁用,即使在页面刷新时也应保持禁用状态
- 如何在javascript中将秒转换为分钟和小时
- 如何使用javascript将秒转换为分钟.
- 如何将分钟格式化为小时和分钟,但仅显示小时(如果's>60分钟
- 当转换为Python日期时间时,Node的时间戳落后3分钟
- 引导时间选择器在增加或减少小时和分钟的同时获取 NaN
- Moment.js unix时间戳,以分钟为单位显示以前的时间
- AngularJS-检测到n分钟内没有任何操作并进入默认状态
- 将音频第二次转换为分钟和秒格式
- 视频暂停超过1分钟后重定向到新页面
- 计算JavaScript中的时间差异(天+小时+分钟+秒)
- 根据小时和分钟更改 CSS
- 简单的 Jquery 计时器,同时使用分钟和秒
- 使用 javascript 将指定的分钟数添加到时间
- IE 10 挂起 XMLHttpRequest 6 分钟,然后响应请求(使用 AngularJS 实现 CRSF)