iframe高度自适应实现方案

iframe高度动态自适应,一直是个头疼的问题,今天我们从事件监听这个角度,来实现iframe高度实时更新。

方案一:监听iframe体的点击事件

<iframe src="cascade.jsp" onload="addEvt(this)"></iframe>
function addEvt(ifm){
       var addHeight = function(ifmObj){
            if(ifmObj){ }else{ return; }
            var win = ifmObj.contentWindow, 
            doc = win.document, 
       body = doc.body, html
= doc.documentElement, height = html.offsetHeight;
       $.each(body.childNodes,function(index,node){/* 迭代所有可见元素高度累加 */
          var domHeight = node.offsetHeight || 0;
          if(index == 0) height = domHeight;
          else height += domHeight;
       });
            $(ifmObj).height(height);
        }
        var doc=ifm.contentWindow.document;
        doc.onclick=function(){
            addHeight(ifm);
        }
        addHeight(ifm);
        $(ifm).css({width:'100%',border:0}).attr("scrolling","no");/*设置无边框和滚动条*/
        setTimeout(function(){$(doc).trigger("click");},1000);
}

方案二:监听iframe的滚动事件

<iframe class="autoHeight" src="cascade.jsp"></iframe>
$(function(){
     bindIfmScroll();
});
function bindIfmScroll(){
        var addHeight = function(ifm){
            if(ifm){ }else{ return; }
            var win = ifm.contentWindow, 
            doc = win.document, 
            html = doc.documentElement, 
            body = doc.body; 
            var height = Math.max(  //body.scrollHeight, 
                                    //body.offsetHeight,html.clientHeight, 
                                    //html.scrollHeight, 
                                    html.offsetHeight 
                                    ); 
              $(ifm).height(height);
        }
        var ifms = $("iframe.autoHeight"); /*自动检索class为‘autoHeight’的iframe*/
     ifms.css({width:'100%',border:0}).attr("scrolling","no");/*设置无边框和滚动条*/ ifms.each(
function(){ var ifmObj = this; $(ifmObj.contentWindow).scroll(function() { addHeight(ifmObj); }); }); }

试验之后,方案一更好些。以上仅供参考,列位如果有更好方案希望能分享出来o(^▽^)o

posted @ 2017-03-03 14:25  【云】风过无痕  阅读(400)  评论(0编辑  收藏  举报