javascript一些小例子总结，持续更新...

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