在做系统框架的时候,常常会用到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. BFS AOJ 0558 Chess

    AOJ 0558 Chess http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=0558    在H * W的地图上有N个奶酪工厂,每个 ...

  2. JAVA线程同步辅助类CountDownLatch

    一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在当前计数到达 ...

  3. Linux 各文件夹介绍

    http://www.cnblogs.com/amboyna/archive/2008/02/16/1070474.html linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命 ...

  4. anaconda win10安装报错:UnicodeDecodeError解决方法

    Traceback (most recent call last): File , in <module> import conda.cli File , in <module> ...

  5. 【leetcode❤python】 67. Add Binary

    class Solution(object):    def addBinary(self, a, b):        """        :type a: str  ...

  6. C++字符串与转移字符

    先看以下代码: #include<iostream> #include<string> using namespace std; int main() { string str ...

  7. 《BI那点儿事》数据仓库建模:星型模式、雪片模式

    数据仓库建模 — 星型模式Example of Star Schema 数据仓库建模 — 雪片模式Example of Snowflake Schema 节省存储空间 一定程度上的范式 星形 vs.雪 ...

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

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

  9. bootstrap笔记-栅格布局

    1.   .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...

  10. 习题-任务2初始ASP.NET MVC项目开发

    一.选择题 1.在ASP.NET MVC项目的RouteConfig.cs文件中,(    )方法注册了默认的路由配置. A.RegisterMap    B.RegisterRoutes    C. ...