前端小结（5）---- iframe

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