1、页面上倒计时,例如3秒之后回到首页:
<p style="text-indent: 2em; margin-top: 30px;">
系统将在 <span id="time">5</span> 秒钟后自动跳转至新网址,如果未能跳转,<a href="http://www.jb51.net" title="点击访问">请点击</a>。</p>
<script type="text/javascript">
delayURL();
function delayURL() {
var delay = document.getElementById("time").innerHTML;
var t = setTimeout("delayURL()", 1000);
if (delay > 0) {
delay--;
document.getElementById("time").innerHTML = delay;
} else {
clearTimeout(t);
window.location.href = "http://www.jb51.net";
}
}
</script>
在iframe中的跳转到首页,自己写的,可以参考下:
open_wdaj_modal(" <span class='font_bigger'>感谢您的评价!<br><span id='mes'>3</span>秒后将回到首页</span>");
setTimeout("run()", 1000);
function run(){
var fatherBody = $(window.top.document.body);
var mes = fatherBody.find("#mes");
var sum = fatherBody.find("#mes").html();
var t = setTimeout("run()", 1000);
if(sum > 1 ){
sum--;
fatherBody.find("#mes").html(sum);
}else{
clearTimeout(t);
/* 跳转到首页 */
window.parent.location.href='/sfytj/dist/html/common/sfytj_index.html';
fatherBody.find("#tipsinfo_modal").remove();
fatherBody.find("#backdropId").remove();
}
}
2、iframe中打开模态框,想要在父页面中显示怎么办?
参考文章:
https://mp.weixin.qq.com/s?__biz=MzA4NzgxOTI4MA==&mid=401535898&idx=1&sn=88d2eeaf34633c33bbeb583f720eb227&scene=0&key=710a5d99946419d9eb3b2e5e6939e86f240bf1411b3dfc122e79d695e483397d315184809da74558dd7e0bf2d00213b5&ascene=7&uin=MjkxODU0NjQ0MA%3D%3D&devicetype=android-21&version=26030931&nettype=WIFI&pass_ticket=rx9gFSLXiJcHKzfqcUEJHBuk7s0rbwBhYvbixmN1SoRofQ6zNQjl9G1OV2fXp5pu
根据文章提供的方法,写了打开模态框方法和关闭模态框监听方法:
/* 我的案件弹出模态框 */
function open_wdaj_modal(string){
var fatherBody = $(window.top.document.body); //获取父页面body,也就是iframe外面一层页面的
var id = 'tipsinfo_modal';
var dialog = $('#' + id);
if (dialog.length == 0) {
dialog = $('<div class="modal fade tip_modal" role="dialog" id="' +id+ '" tabindex="-1" aria-labelledby="myModalLabel"/>');
dialog.appendTo(fatherBody);
var html_modal ="<div class=\"modal-dialog modal-sm\" role=\"document\">";
html_modal += "<div class=\"modal-content\">";
html_modal +="<div class=\"modal-header\">"
html_modal +="<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>"
html_modal +="<h4 class=\"modal-title\" id=\"myModalLabel\">提示消息</h4>"
html_modal +="</div>"
html_modal +="<div class=\"modal-body modal_style\">"
html_modal +=""+string+""
html_modal +="</div>"
html_modal +="</div></div>"
dialog.append(html_modal);
}
dialog.modal({backdrop: false}); //backdrop: false去掉打开的iframe中小窗口的遮罩
fatherBody.append("<div id='backdropId' class='modal-backdrop fade in'></div>"); //在父页面上人为补充遮罩
}
function close_wdaj_modal(){
var fatherBody = $(window.top.document.body);
fatherBody.find("#tipsinfo_modal").on('hidden.bs.modal', function (e) {
fatherBody.find("#tipsinfo_modal").remove();
fatherBody.find("#backdropId").remove(); //当模态框关闭时,从父页面remove掉模态框、remove掉遮罩层
});
}
在iframe中要弹出模态框,直接调用这两个方法就行了。
3、当页面嵌入了iframe页面,想要等iframe中的页面加载完成之前显示loading遮罩,iframe加载完成之后,loading去除怎么做?
关键是怎么判断iframe加载完毕。
代码:
$(function(){
var loading_div = $(".loading_div");
var isOnLoad = true;
//当ifrmae加载完成时 遮罩去除,iframe显示;
$("#iframe").load(function(){
isOnLoad = false;
loading_div.remove();
$("#iframe").css("display", "block");
})
});
4、等待中....打点的方法:
/*
等待中打点方法
*/
var dot_timer;
function loading_dots(m){
add_dots(m);
dot_timer = setInterval("setTimeout('add_dots("+m+")',500)", (m+1)*500);
}
function add_dots(n){
if(n==0){
$(".dot", window.parent.document).html("");
return;
}
var val = $(".dot", window.parent.document).html();
var new_val = val+".";
$(".dot", window.parent.document).html(new_val);
setTimeout("add_dots("+n+"-1)",500)
}