iframe高度自适应使用场景是类似于微博,新闻等点击加载更多这种功能实现，要求iframe的高度能够跟随内容的变化而变化。

父html文件，也就是引用ifram的文件
src="blog/blog.display.html"  引用的文件
id="blog-display" 全局唯一ID
scrolling="no" 去除滚动条
<iframe src="blog/blog.display.html" id="blog-display" scrolling="no" >

</iframe>

被引用的Html文件

blog.display.html

<html>
　  <head>
　　　　<script src="blog.display.js"></script>    
　　</head>
    <body>

        <div id="content"></div>

        <body id="more-btn">加载更多</body>

    </body>

</html>
blog.display.js  
注意这里使用的id（blog-display）为父iframe 中的 ID。
就是将body的scrollHeight赋给父iframe 的高度height.
$("#more-btn").click(function(){

   IFrameResize(); 
   var  text = "<div stype='backgroung-clour：red; height:100px;'></div>"
　　$("#content").append(text);

})

function() IFrameResize(){

       //alert(this.document.body.scrollHeight); //弹出当前页面的高度

            var obj = parent.document.getElementById("blog-display"); //取得父页面IFrame对象

            //alert(obj.height); //弹出父页面中IFrame中设置的高度

            obj.height = document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度

    },


showMore
												


											
实现iframe高度自适应的更多相关文章
	

    
						
  1. iframe高度自适应（同域）
		
    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...
    
		
    2. 
						
  2. iframe高度自适应
		
    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
    
		
    3. 
						
  3. iframe高度自适应内容
		
    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...
    
		
    4. 
						
  4. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
		
    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
    
		
    5. 
						
  5. IFrame 高度自适应的两种方式 .
		
    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为:  ...
    
		
    6. 
						
  6. 兼容firefox的iframe高度自适应代码
		
    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...
    
		
    7. 
						
  7. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
		
    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
    
		
    8. 
						
  8. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）
		
    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
    
		
    9. 
						
  9. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
		
    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
    
		
    10. 
						
  10. CSS完美实现iframe高度自适应（支持跨域）
		
    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Ubuntu常用命令总结
			
    1. Ubuntu切换到root用户的方法 sudo su or sudo -i 退出root用户 exit 2. mv:移动文件或文件夹 移动文件和文件夹只有只有四种可能: 文件移动到文件(文件重命 ...
    
			
    2. 
						
  2. 如何用VBS编写一个简单的恶搞脚本
			
    windows系统的电脑, 首先右击桌面,选择新建-文本文档,在桌面上新建一个文本文档:     随后打开计算机或者是我的电脑,点击其中的组织(xp系统多为工具),选择下面的文件夹和搜索选项      ...
    
			
    3. 
						
  3. 干货 | Java中获取类名的3种方法！
			
    获取类名的方法 Java 中获取类名的方式主要有以下三种. getName() 返回的是虚拟机里面的class的类名表现形式. getCanonicalName() 返回的是更容易理解的类名表示. g ...
    
			
    4. 
						
  4. RabbitMQ Network Partitions的预警和处理策略
			
    网络分区的意义 RabbitMQ的模型类似交换机模型,且采用erlang这种电信网络方面的专用语言实现.RabbitMQ集群是不能跨LAN部署(如果要WAN部署需要采用专门的插件)的,也就是基于网络情 ...
    
			
    5. 
						
  5. java中读取配置文件ResourceBundle和Properties两种方式比较
			
    今天在开发的时候,需要把一些信息放到配置文件中,方便后续的修改,注意到用的是ResourceBundle读取配置文件的方式,记得之前也见过使用Properties的方式,就比较好奇这两种方式的区别,网 ...
    
			
    6. 
						
  6. Guava新增集合类型-Multimap
			
    Guava新增集合类型-Multimap 在日常的开发工作中,我们有的时候需要构造像Map<K, List<V>>或者Map<K, Set<V>>这样比 ...
    
			
    7. 
						
  7. go语言nsq源码解读五 nsqlookupd源码registration_db.go
			
    本篇将讲解registration_db.go文件. 1234567891011121314151617181920212223242526272829303132333435363738394041 ...
    
			
    8. 
						
  8. 【bzoj 3233】[Ahoi2013]找硬币 ——搜索
			
    Description 小蛇是金融部部长.最近她决定制造一系列新的货币.假设她要制造的货币的面值为x1,x2,x3… 那么x1必须为1,xb必须为xa的正整数倍(b>a).例如 1,5,125, ...
    
			
    9. 
						
  9. BZOJ_2734_[HNOI2012]集合选数_构造+状压DP
			
    BZOJ_2734_[HNOI2012]集合选数_构造+状压DP 题意:<集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x ...
    
			
    10. 
						
  10. 【小白学C#】浅谈.NET中的IL代码
			
    一.前言 前几天群里有位水友提问:”C#中,当一个方法所传入的参数是一个静态字段的时候,程序是直接到静态字段拿数据还是从复制的函数栈中拿数据“.其实很明显,这和方法参数的传递方式有关,如果是引用传递的 ...
    
			
    11.