zoukankan      html  css  js  c++  java
  • 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({'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({'100%',border:0}).attr("scrolling","no");/*设置无边框和滚动条*/ ifms.each(
    function(){ var ifmObj = this; $(ifmObj.contentWindow).scroll(function() { addHeight(ifmObj); }); }); }

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

  • 相关阅读:
    ps-- 制作磨砂背景
    ps -- 证件照
    抠图--薄,透
    60后发送短信的方法
    小项目 -- 验证码.js
    小项目
    小项目 -- phone.js
    基于GDAL提取地物,并生成png,最后加载到网页上(二)
    根据范围获取影像瓦片,并生成GeoTIFF 文件《一》
    Ubuntu 10.4 +NVIDIA GTX 1070 显卡驱动更新
  • 原文地址:https://www.cnblogs.com/xtreme/p/6496533.html
Copyright © 2011-2022 走看看