在做系统框架的时候,常常会用到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. noi 2985 数字组合

    题目链接: http://noi.openjudge.cn/ch0206/2985/ 2985:数字组合 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 有n个正 ...

  2. WPFのInkCanvas作为蒙版透明笔迹不透明

    本人最近利用inkcavas做一个蒙版的功能,结果发现笔迹稀释了,经过一番查找发现:应该讲inkcavas的背景设置为白色,然后透明,而不是将整个控件透明,具体代码: <InkCanvas Na ...

  3. storm配置项目

    java.library.path: “/usr/local/lib:/opt/local/lib:/usr/lib”### storm.* configs are general configura ...

  4. 我的android学习经历35

    这几天又把android的基础知识全部复习了一遍,没有第一次那么难,感觉简单了好多,也发现了许多细节问题,发现了自己在网络编程方面的不足. 下面列举一些小的细节问题: 1.String,StringB ...

  5. 安装openJDK 8

    1.JDK 8 示例 (1.1)Debian, Ubuntu等使用下述安装命令: $ -jre ps : openjdk-8-jre 仅包含JRE,如果需要开发java程序,需要下载openjdk-8 ...

  6. python走起之第二话

    Python基础 一.整数(int) 如: 18.73.84 整数类的功能方法及举例: 带__的方法代表有多种表达方式 1.__abs__ <==> abs() 求整数的绝对值:(-11) ...

  7. js原生实现淡入淡出

         转自http://kb.cnblogs.com/page/90854/ 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, ...

  8. sqlplus无密码登录TNS协议适配器错误

    登录到sqlplus使用无密码登录用户时出现:TNS协议适配器错误 检查自己是否有多个数据库,可能默认登录的数据库服务没有启动,启动即可. 查看当前数据库名  select name from v$d ...

  9. SQL Syntax

    1.limit 语法:限制查询记录,进行分页处理:select * from article limit 0,10;(从0号记录开始,依次取10条记录) 2.like 语法:查询指定字符串的相似匹配记 ...

  10. 【xsy1019】小A的树论

    题意 三种操作: ①区间增值 ②某一个点换父亲 ③求子树和 \(1\leq n\leq 100000\) 分析 Splay维护dfn序. 小结 (1)使用Splay,通常要在Splay的两端各添加一个 ...