码迷,mamicode.com
首页 > 其他好文 > 详细

前端小结(5)---- iframe

时间:2015-10-14 18:11:22      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

iframe对应的div:

 <div id="iframezone">
      <iframe id="iframe" frameborder=‘0‘ scrolling=‘no‘ height="0" width="0" onload="autoHeight();"></iframe>
 </div>
 <li>
     <a data-toggle="tab" href="javascript:void(0)" onclick="IframeAddSrc(‘/Customer/SMSRecord‘, this)"> 记录 </a>
 </li>

点击加载页面到iframe。对应的js:

//iframe自适应高,onload会在iframe没加载完时就触发,所以要加上setTimeout,防止自适应高度出现为零的情况
function autoHeight() {
    setTimeout(function () {
        var iframe = document.getElementById("iframe");
        if (iframe.Document) {//ie自有属性
            iframe.style.height = iframe.Document.documentElement.scrollHeight;
        } else if (iframe.contentDocument) {//ie,firefox,chrome,opera,safari
            iframe.height = screen.availHeight;// $(iframe).contents().find("body").height() + 30;
            iframe.width = "100%";//screen.availWidth * 0.97 - 216.4;
        }
    }, 1);
}

function IframeAddSrc(src, obj) {
    $.post("/Home/ValidateStatus").done(function (data) {
        if (data == undefined || data == null || data.status != "ok") {
            return;
        }

        $(".tabActive").removeClass("tabActive");
        $(obj).addClass("tabActive");
        src = src + (src.indexOf(‘?‘) > 0 ? "&r" : "?r") + "=" + Math.random();
        $("#iframe").removeAttr("src");
        $("#iframe").attr("src", src);
        if ($("#iframe").onload)
            $("#iframe").onload();
    });
}

 

前端小结(5)---- iframe

标签:

原文地址:http://www.cnblogs.com/endlessdream/p/4878013.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!