iframe自适应高度计算-兼容低版本IE以及各浏览器

 Html5并没有真正的废弃iframe标签，还是能够使用iframe标签的。当然利用jQuery的load也能实现iframe 所实现的。但现如今还没有更好的标签替代，frame使用起来很简单。虽然它会阻塞页面渲染，可以利用一个延时函数setTimeout(function() {}, 10);

或者一个load绑定事件：window.addEventListener('load', function() {});去避免页面阻塞。当然也会有其他跟好的方法。我不建议使用过多的iframe但不反对用，合理的运用不失为一种良策。

 

1.原生javascript方法：

　　

<iframe id="iframeId" name="content" src="" width="500" visibility="hidden" frameborder="0" onload="adaptiveFrameHeight()"></iframe>


function adaptiveFrameHeight() { 
            var iframeId = document.getElementById("iframeId"); 
            var icd =iframeId.contentWindow.document ? iframeId.contentWindow.document : iframeId.contentDocument; 
            iframeId.style.visibility = 'hidden';
            iframeId.style.height = "10px";
            icd = icd || document; 
            var height = Math.max( icd.body.scrollHeight, icd.body.offsetHeight,icd.documentElement.clientHeight, icd.documentElement.scrollHeight, icd.documentElement.offsetHeight ); 
            iframeId.style.height = height + "px"; 
            iframeId.style.visibility = 'visible';
        } 

 

 

1.jQuery实现方法：

　　

<iframe id="iframeId" name="content" src="" width="500" visibility="hidden" frameborder="0"></iframe>

$(function() {
            $("#iframeId").load(function() {
                var height = $(this).contents().find("body").height()+20;
                $(this).height(height);
          });
        });