在做系统框架的时候,常常会用到iframe,当需求是iframe不能出现纵向滚动条,需要根据加载页面的高度,一致延伸,但是iframe的高度自适应问题比较麻烦,当时也是纠结了好久。
  方案1:当遇到iframe里面嵌套的页面(后面简称内页),内页的高度不会变化,就是只是第一次加载的时候需要自适应的话,只要设置iframe就行了,兼容ie6+、谷歌。
  eg:<iframe src="<c:url value='/role/edit.do'/>" id="iframe_content" onload="this.height=iframe_content.document.body.scrollHeight" class="iframe-content" name="iframe_content" frameborder="0" width="915" height="100%" scrolling="no" ></iframe> 
  方案2:如果遇到情况比较恶心,在第一次加载完iframe的高度后,内页的高度还是会变动,这个时候,只有去实时去监听内页的高度,如果内页的高度改了,再通过js重新设置iframe的高度。
  eg:
    function setHeight() {

      var iframe = document.getElementById("iframe_content");
      try {
         var aHeight = iframe.contentWindow.document.body.scrollHeight;
         var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;
         var height = Math.min(aHeight, bHeight);//取最高值;
         iframe.height = height;
      } catch (e) {}
    }
    window.setInterval("setHeight()", 200);

  总结:其实方案1的原理是在加载内页的时候将高度计算出来,再设置iframe的高度。方案2就是需要去监听内页,再设置iframe的高度。当然,还是建议大家能不用iframe,就不用iframe。如果有更好的iframe的自适应高度解决方案,欢迎给我留言,一起交流,一起进步!

html之小积累-.-iframe自适应高度的更多相关文章

  1. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  2. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

  3. [转载]再谈iframe自适应高度

    Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲: 通过Google搜索iframe 自适应高度,结果5W多条,搜索 ...

  4. 让iframe自适应高度-真正解决

    需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...

  5. [转]让iframe自适应高度-真正解决

    原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...

  6. jquery 清空 iframe 的内容,,iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

  7. jquery iframe自适应高度[转]

      经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...

  8. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  9. Iframe 自适应高度的方法!

    第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

随机推荐

  1. 红字差评系列2.dwarf

    [题目分析] 首先按照题目给出的样例想到只要每个物品的价格都用能够合成他的两个物品来更新,一边读入一边更新就好了,后来又发现如果出现这样的情况:1 2 3在2 5 6 的前面,那我们就需要先更新2在更 ...

  2. 查看占用cpu和内存最多的进程

    linux下获取占用CPU资源最多的10个进程,可以使用如下命令组合: ps aux|head -;ps aux|grep -v PID|sort -rn -k +|head linux下获取占用内存 ...

  3. VS2012解决方案的设置

    用VS开发项目时,一个解决方案可以包含多个项目,在此我记录一下: 1.首先我新建一个Win32Demo的解决方案: 2.勾选"空项目": 3.新建完之后,会默认生成一个Win32D ...

  4. Linux用户与“最小权限”原则

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 作为一个Linux用户来说,我们并不需要特别关心下面的机制.但是,当我们去编写一个 ...

  5. dubbo配置文件xml校验报错

    配置dubbo服务xml后,程序能正常执行,但validate会出现一些异常: Multiple annotations found at this line: - cvc-complex-type. ...

  6. 深入理解HTTP协议、HTTP协议原理分析

    http://blog.csdn.net/g1036583997/article/details/50457441

  7. php_match/preg_match_all 默认有字符串长度限制

    php_match/preg_match_all 默认有字符串长度限制:52500(或许你的服务器环境是更长,或者更短),当字符串长度大于52500,只能匹配到52500数据,超出的部分会被系统自己截 ...

  8. 高级智能研究计划(IARPA):大脑皮层建模

    哈哈,看到了一篇我最感兴趣的领域的新闻报导,可以深挖里面的各种细节. Quanta Magazine: Illuminating Science - 原文出处 卡内基·梅隆大学 - Tai Sing ...

  9. linux笔记:用户和用户组管理-用户管理命令

    useradd(添加用户.在使用useradd添加一个用户后,必须使用passwd给该用户设置密码,该用户才能登陆): passwd(设置或修改用户密码): usermod(修改用户信息): chag ...

  10. mysql 配置 utf8 依然乱码

    mysql 乱码问题排除方案: 1.检查数据库及数据表是不是utf8字符集 2.查看一下jdbc.properties配置的数据库url 是否配置了characterEncoding=UTF-8或者在 ...