在做系统框架的时候,常常会用到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 9265 取数游戏

    题目链接:http://noi.openjudge.cn/ch0206/9265/ 题意:从自然数1到N中不取相邻2数地取走任意个数,问方案数. 解法:f[i][1]表示在前i个数中选了第i个的方案数 ...

  2. LabVIEW串口通信

    Instrument I/O 利用LabVIEW内置的驱动程序库和具有工业标准的设备驱动软件,可对 GPIB(通用接口总线).Ethernet(以太网)接口.RS-232(标准串行接口总线)/RS-4 ...

  3. js之规范代码写法

    一.避免多次定义var 例如:var a = 0; var b = 1; 尽量定义为:var a = 0,   b =1; 二.尽量在结尾使用分号(semicolon) 否则编辑器会提示:Unterm ...

  4. java高薪之路__003_集合

    Java集合可分为Collection和Map两大体系 Collection接口 |---- Set: 元素无序.不可重复 |---- List: 元素有序.可重复 (动态数组) |---- Queu ...

  5. NPM 使用介绍

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...

  6. Mac 在命令行中获得Root权限

    Mac 在命令行中获得Root权限 作者 firedragonpzy 13 九月, 2012 2条评论 本文为firedragonpzy原创,转载务必在明显处注明:转载自[Softeware MyZo ...

  7. json对象,数组,字符串总结

    关于json对象,数组,字符串的总结 什么是json? JSON(JavaScript Object Notation)  一种轻量级的数据交换格式,JSON采用完全独立于语言的文本格式...(来自百 ...

  8. solr 6.1 服务端 tomcat 搭建及调用

    一.下载 apache solr6.1.0 最新版本zip,解压缩生成一个solr6.1.0文件夹 二.安装 1.在d:/projects下新建一个solr 2.把solr6.1.0/server/s ...

  9. Creating Materials at runtime And Issue of Shader.Find()

    Creating Materials at runtimehttp://forum.unity3d.com/threads/create-materials-at-runtime.72952/ //通 ...

  10. css样式设计

    1.行内元素(图片.文本)水平居中 通过给父元素设置 text-align:center html代码: <body> <div class="txtCenter" ...