zoukankan      html  css  js  c++  java
  • iframe 自适应高度 IE Firefox 通过

    1、Iframe 自适应高度的含义:
    主页面DIV里包括一个iframe,div的高度要根据iframe的实际高度自动变化,以免出现Iframe所包括内容的溢出问题.

    2、解决办法:
    原来的思路是想获得iframe的实际高度,根据这个高度来设置Div的高度。
    <iframe marginwidth=0 marginheight=0 SRC="UserBase.html" width="100%"  height="100%"  id="IframeUser" name="IframeUserName"    frameborder="0"   scrolling="no" onload="this.height=IframeUserName.document.body.scrollHeight;SetDivHeight(usermainName.document.body.scrollHeight);"></iframe>

    这里的IframeUserName.document.body.scrollHeight在ie里是没有问题的,但在firefox 里却却出现问题,当iframe 的src变化的时候,获得的高度不会随着src实际高度而变化.

    所以只能在src里下功夫了,在src里获得实际高度,然后去修改包含Iframe的的DIV的高度(后来验证,只要设置了iframe的style.height就可以了,不需要设置div的高度了)。建立一个公共的JS文件,在每个scr里包含该JS文件。JS内容如下:

    /*
    设置根据Iframe指定的文件的内容的高度(内容由一个ID为FrameSrc的div包含起来),来设置包含Iframe的Div的高度.
    */

    var height = document.all.FrameSrc.scrollHeight;
    if(height<300) height = 300;
    window.parent.document.getElementById(
    "IframeUser").style.height=height; 


    FrameSrc 是SCR里的DIV的ID。
    if(height<300) height = 300 表示当scr高度小于300px的时候div的高度置为300px

    虽然有点麻烦,但终归实现功能了。

    主页面:

    <div class="MainRightChild">
            
    <iframe marginwidth=0 marginheight=0 src="UserBase.html" width="100%"  height="100%"  id="IframeUser" name="IframeUserName"    frameborder="0"   scrolling="no"></iframe> 
            
    </div>


    下面是scr的样例文件:

    <div id="FrameSrc">
    <table class="List">
    <tr> 
      
    <td width="10%">辖区</td>
      
    <td width="45%" class="Title">名称</td>
     
      
    <td width="20%">创建人</td>
      
    <td width="15%">成员数</td>
      
    <td width="10%" >活动次数</td>
    </tr>
    <tr> 
      
    <td >[上海]</td>
      
    <td> <href="../Group/GroupDetail.html" target="_blank" title="左边固定宽度">左边固定宽度</a></td>
      
    <td ><href="../Group/GroupDetail.html" target="_blank" title="左边固定宽度"><href="../User/UserDetail.html" target="_blank" title=" ">张三</a> <href="../User/UserDetail.html" target="_blank" title="">张三2</a></a></td>
      
    <td >33人</td>
      
    <td ><href="../Group/GroupDetail.html" target="_blank" title="左边固定宽度">31次</a></td>
    </tr>

    </table>   
    </div>  
    <script src="../App_Themes/Script/IframeSrc.js" charset="UTF-8"  type="text/javascript"></script>


    欢迎大家提出意见!

    修正:"后来验证,只要设置了iframe的style.height就可以了,不需要设置div的高度了"
    这个说法有问题:IE里一行两个DIV a 和 b,b里有一个iframe,如果设置了iframe的高度,那么a的高度也将是这个高度,如果a里的内容的高度超过这个高度,将会Hidden.这中情况下需要设置b的高度来代替设置iframe的高度,这样不会影响a的高度了所以必须要设置DIV的高度:

    var height = document.all.FrameSrc.scrollHeight;
    if(height<300) height = 300;
    window.parent.document.getElementById(
    "MainRightChild").style.height=height; 

    <div class="MainRightChild" id="MainRightChild">
            
    <iframe marginwidth=0 marginheight=0 src="UserBase.html" width="100%"  height="100%"  id="IframeUser" name="IframeUserName"    frameborder="0"   scrolling="no"></iframe> 
            
    </div>
  • 相关阅读:
    最小生成树 kruskal算法&prim算法
    Floyd算法解决多源最短路问题
    dijkstra算法解决单源最短路问题
    改进后的作业排序
    第一篇 基本结构
    循环轮转算法
    在线工具生成接入信息mqtt.fx快速接入阿里云
    NodeMCU使用ArduinoJson判断指定键值对存在与否
    NodeMCU获取并解析心知天气信息
    快速导出jekyll博客文件进行上传部署
  • 原文地址:https://www.cnblogs.com/adandelion/p/776803.html
Copyright © 2011-2022 走看看