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

  • 相关阅读:
    强化学习的基本迭代方法
    基于文本描述的事务聚类
    学习强化学习之前需要掌握的3种技能
    其它 华硕 ASAU S4100U 系统安装 win10安装 重装系统 Invalid Partition Table 解决
    数据分析 一些基本的知识
    Python 取样式的内容 合并多个文件的样式 自定义样式
    电商 Python 生成补单公司需要的评论格式3
    SpringBlade 本地图片上传 生成缩略图
    SQL Server 字符串截取
    SpringBlade 本地图片上传
  • 原文地址:https://www.cnblogs.com/xtreme/p/6496533.html
Copyright © 2011-2022 走看看