在做系统框架的时候,常常会用到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. NSDate获取当前时区的时间

    [NSDate date]获取的是GMT时间,要想获得某个时区的时间,以下代码可以解决这个问题 NSDate *date = [NSDate date]; NSTimeZone *zone = [NS ...

  2. Flowplayer-playlist

    SOURCE URL: https://flowplayer.org/docs/playlist.html HTML layout Here is a typical setup for a play ...

  3. Xcode代码提示联想功能失效,按command键点不进去类库,提示“?”

    参考文档:这两篇文章很好的解决了问题.可以很好的解决了问题 Xcode代码提示联想功能失效,按command键点不进去类库,提示“?”,代码全是白色 Xcode4中代码补全(Code Completi ...

  4. [资源] Open source packages on SLAM

    OpenSLAM http://openslam.org/ Most main stream open source slam resource can be found on OpenSLAM, w ...

  5. 《BI项目笔记》创建计算成员

    也可以利用脚本来生成计算成员

  6. iOS - Mac Apache WebDav 服务器配置

    前言 Apache 服务器: Web 服务器,可以支持各种脚本(PHP)的执行,目前世界上使用最为广泛的一种 Web 服务器 WebDav 服务器: 基于 http 协议的 "文件" ...

  7. js之oop <三>属性标签

    读取属性标签 获取对象属性标签,用 Object.getOwnPropertyDescriptor方法.getOwnPropertyDescriptor(); 参数:属性所在对象(object),属性 ...

  8. js之oop <二> 对象属性

    js中对象属性可以动态添加和删除.删除对象属性用delete关键字. function obj(){ } var oo = new obj(); oo.a = "a"; oo.b ...

  9. python的类和对象——类成员番外篇

    学完了面向对象的三大特性,已经get了所有屌丝技能的我们也当一回文艺小青年,来看看类的成员和成员修饰符. 今天‘三’这个数字好亲和~~~类成员可以分为三类:字段.方法和属性 一.字段 首先我们来看看字 ...

  10. 作用域链–JS基础核心之一

    JS中的作用域,大家都知道的,分为全局作用域和局部作用域,没有块级作用域,听起来其实很简单的,可是作用域是否能够有深入的了解,对于JS代码逻辑的编写成功率,BUG的解决能力,以及是否能写出更优秀的代码 ...