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

  • 相关阅读:
    基于VitralBox 的 OpenEuler系统 安装增强功能
    OpenEuler 操作系统 安装 银河麒麟GUI界面
    OpenEuler 操作系统的安装
    vscode 安装markdown插件 及 实用markdown语法
    无限技能下的密码系统愿景
    商用密码企业调研
    实验四 Python综合实践 ——20191331刘宇轩
    20191331 《Python程序设计》实验三报告
    9.29载入史册的一天
    人生的四天半
  • 原文地址:https://www.cnblogs.com/xtreme/p/6496533.html
Copyright © 2011-2022 走看看