精华内容
下载资源
问答
  • IFrame自适应内容高度

    2017-07-25 20:38:18
    IFrame自适应内容高度

    关键点:
    1. 加载页面时计算iFrame的高度。
    2. 当网页尺寸发生变化时,重新计算IFrame高度。
    代码如下:
    其中使用到了Bootstrap样式,可自行到Bootstrap官网下载。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title>Bootstrap 实例 - 徽章(Badges)</title>
        <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
        <script src="../jquery/jquery-1.12.0.min.js"></script>
        <script src="../dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div id="main_breadcrumb">
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li class="active">十一月</li>
    </ol>
    </div>
    
    <body>
        <div style="width: 100%">
            <!-- 左侧菜单栏 -->
            <div id="main-Container">
                <div id="sidebar" class="col-md-2 column">
                    <!-- 创建菜单树 -->
                    <div class="col-md-12">
                        <a href="#">Mailbox <span class="badge" style="background-color:red">New</span></a>
                        <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                        <li>
                            <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                                <i class="glyphicon glyphicon-cog"></i>index
                                <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                            </a>
    
                            <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                                <li><a href="#" onclick="menuClick('${base}toViewInfo?id=${s.id}')"><i class="glyphicon glyphicon-user"></i>aaa</a></li>
                                <li><a href="#" onclick="menuClick('${base}toTestList')"><i class="glyphicon glyphicon-th-list"></i>bbb</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#systemSetting1" class="nav-header collapsed" data-toggle="collapse">
                                <i class="glyphicon glyphicon-cog"></i>index1
                                <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                            </a>
                            <ul id="systemSetting1" class="nav nav-list collapse secondmenu" style="height: 0px;">
                                <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>ccc</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-edit"></i>ddd</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>eee</a></li>
                            </ul>
                        </li>
                        </ul>
                    </div>
                </div>
    
                <!-- 左侧菜单栏 -->
                <div class="col-md-10 column" id="main_content">
    
                    <div id="sub_breadcrumb">
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">2013</a></li>
                        <li class="active">十一月</li>
                    </ol>
                    </div>
    
                    <!-- 内容展示页 -->
                    <iframe id="iframepage" src="test_content.html" frameborder="0" scrolling="yes" style="border:0px; width:100%;" onload="changeFrameHeight()"></iframe>
    
                </div>
            </div>
        </div>
    
    <script type="text/javascript">
    function changeFrameHeight(){
        var ifm=document.getElementById("iframepage"); 
        ifm.height=document.documentElement.clientHeight-ifm.offsetTop-document.getElementById("main_breadcrumb").offsetHeight
    -document.getElementById("sub_breadcrumb").offsetHeight;
    //-document.getElementById("main_content").offsetHeight;
    }
    window.onresize=function(){  
        changeFrameHeight();  
    }
    </script>
    </body>
    </html>

    页面高度计算参考资料
    感谢杯中水提供的素材
    这里写图片描述

    说明如下:
    IE中:

    document.body.clientWidth ==> BODY对象宽度

    document.body.clientHeight ==> BODY对象高度

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度

    FireFox中:

    document.body.clientWidth ==> BODY对象宽度

    document.body.clientHeight ==> BODY对象高度

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度

    Opera中:

    document.body.clientWidth ==> 可见区域宽度

    document.body.clientHeight ==> 可见区域高度

    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    没有定义W3C的标准,则

    IE为:

    document.documentElement.clientWidth ==> 0

    document.documentElement.clientHeight ==> 0

    FireFox为:

    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    Opera为:

    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    网页可见区域宽: document.body.clientWidth
    网页可见区域高: document.body.clientHeight
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    网页正文全文宽: document.body.scrollWidth
    网页正文全文高: document.body.scrollHeight
    网页被卷去的高: document.body.scrollTop
    网页被卷去的左: document.body.scrollLeft
    网页正文部分上: window.screenTop
    网页正文部分左: window.screenLeft
    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width
    屏幕可用工作区高度: window.screen.availHeight
    屏幕可用工作区宽度: window.screen.availWidth
    (注意:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

    HTML精确定位:scrollLeft、scrollWidth、clientWidth、offsetWidth

    scrollWidth ==> 获取对象的滚动宽度
    scrollHeight ==> 获取对象的滚动高度
    scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(被卷去的左)
    scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离(被卷去的高)
    offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
    offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    event.clientX ==> 相对文档的水平座标

    event.clientY ==> 相对文档的垂直座标

    event.offsetX ==> 相对容器的水平坐标

    event.offsetY ==> 相对容器的垂直坐标

    document.documentElement.scrollTop ==> 垂直方向滚动的值

    event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量

    展开全文
  • iframe自适应内容高度

    万次阅读 2019-06-11 17:25:41
    iframe <iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;" scrolling="no" height="100%" width="100%"> </iframe> javascript window.onresiz...

    iframe

    <iframe name="menuFrame" id="menuFrame" onload="reinitIframe()" style="overflow:visible;"
       	scrolling="no" height="100%" width="100%">
    </iframe>
    

    javascript

            window.onresize = function () {
                reinitIframe();
            }
            function reinitIframe(){
                var iframe = document.getElementById("menuFrame");
                try{
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                    var height = Math.min(bHeight, dHeight);
                    iframe.height = height+50;
                    // console.log(iframe.height);
                }catch (ex){}
            }
            // 定时触发
            window.setInterval("reinitIframe()", 200);
    
    展开全文
  • iframe 自适应内容高度

    2016-10-14 14:42:00
    在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法。<br/> <pre>  <iframe id="iframe" name="search_1" src="zhaiyao....

        在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法。<br/>

       <pre>

      <iframe id="iframe" name="search_1" src="zhaiyao.html" frameborder="0" scrolling="no"  οnlοad="setIframeHeight(this)"></iframe> 

      <script>

       function setIframeHeight(iframe) {

        if(iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if(iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
              }
            }
    };

      </script>

      </pre> 

          这么写是判断 ,每次iframe的onload事件后自动适应内容改变iframe的高度。

    转载于:https://www.cnblogs.com/7Ezreal/p/5960398.html

    展开全文
  • javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码!  ‍  基于Jquery库的代码很好实现:    $(document).ready(function(){   $("#mainframe").load(function(){   ...
    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! 
    

    ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%"   frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> 
    基于Jquery库的代码很好实现: 
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
          $("#mainframe").load(function(){ 
          $(this).height(0); //用于每次刷新时控制IFRAME高度初始化 
          var height = $(this).contents().height() + 10; 
          $(this).height( height < 500 ? 500 : height ); 
        }); 
    }); 
    </script> 

    ‍基于JS原生代码的实现: 
    <script language="javascript"> 
           if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
    </script> 
    只需在你被iframe调用的文件</body>之后加入上面这段即可! 
    这个也可以控制iframe的高度随内容的多而自动增长 
    <iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" οnlοad="this.height=web.document.body.scrollHeight+20" ></iframe>
    展开全文
  • javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码! ‍<iframe src="index....
  • 以下代码放入body中:function SetCwinHeight(){varbobo=document.... //iframe idif (document.getElementById){if(bobo && !window.opera){if (bobo.contentDocument &&bobo.contentD...
  • 开发系统经常用到左边菜单,右边iframe,的框架结构,如果iframe不随着子页面内容高度随时变化就会出现双滚动条,非常难看。 看了别人的方法有些是可以,但是随着iframe的src 变化,有时高度不能变小,只能变大。...
  • function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != ...
  • iframe align="middle" frameborder=0 name="reportbill" width=100% height="300" onload="document.all['reportbill'].style.height=reportbill.document.body....
  • /Files/Frontview/jquery.iframeAutoHeight.rar 使用方法: $("#detail").iframeAutoHeight();...其中,"detail"为iframe 元素的id属性. 在IE 6/7 ,Firefox下边测试通过. 转载于:https://www.cnblogs.com...
  • iframe 自适应高度

    2011-06-22 08:21:48
    iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
  • iframe自适应内容页面的高度,兼容性好
  • iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
  • 在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe自适应宽、高,会经常用到,网上整理了一份,写在这里备用: ...多层嵌套iframe 高度自适应
  • 主要介绍了javascript原生和jquery库实现iframe自适应内容高度和宽度,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,653
精华内容 3,061
关键字:

iframe自适应内容高度