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. Kali Linux安装Google中文输入法（只需5步）
			
    前言: 之前我在kali上安装过中文输入法,并且写了一篇博文(Kali Linux安装中文输入法全纪录),这篇博文里的步骤是当时一边摸索一边记录下的,思路有点混乱,而且还同时安装了两种输入法.今天又安 ...
    
			
    2. 
						
  2. YII框架组件CListView实现分页
			
    效果是普通分页就不截图了... C控制器方法如下: $criteria=new CDbCriteria; $criteria->condition = "`status`={$newS ...
    
			
    3. 
						
  3. Connection reset by peer的常见原因
			
    1,如果一端的Socket被关闭(或主动关闭,或因为异常退出而 引起的关闭),另一端仍发送数据,发送的第一个数据包引发该异常(Connect reset by peer). Socket默认连接60秒 ...
    
			
    4. 
						
  4. Elasticsearch笔记九之优化
			
    Elasticsearch笔记九之优化 ).get(); } curl命令可以在linux中建立一个定时任务每天执行一次,同样java代码也可以建立一个定时器来执行. 2:内存设置之前介绍过es集群有 ...
    
			
    5. 
						
  5. [Usaco2005 nov]Grazing on the Run 边跑边吃草 BZOJ1742
			
    分析: 首先,连续选择一段必定最优... 区间DP,f[i][j]表示从i开始,连续j个被吃掉了,并且,牛在i处,g[i][j]则表示在i+j-1处 f[i][j]可以从g[i+1][j]和f[i+1 ...
    
			
    6. 
						
  6. kmspico_setup.exe运行提示系统资源不足，无法完成请求的服务
			
    在使用KMSpico激活office时,windows下运行exe会提示系统资源不足,无法完成请求的服务. 我的解决方法是:卸载电脑上的wps...
    
			
    7. 
						
  7. input表单中嵌入百度地图
			
    在做项目开发中,常常会用到定位的操作,比如在做一些资产房产等方面的业务的时候,需要知道资产的具体位置,并将位置信息保存下来,这个时候我们可以使用form表单嵌入百度地图的方式来实现这个功能,下面请看详 ...
    
			
    8. 
						
  8. Python 实现文件复制、删除
			
    Python 实现文件复制.删除  转载至:http://www.cnblogs.com/sld666666/archive/2011/01/05/1926282.html 用python实现了一个小 ...
    
			
    9. 
						
  9. 由ORACLE:ORA-28001: the password has expired（密码过期）引起ODI资料库连接失败
			
    今天,连接ODI,出现下面的错误 oracle.odi.core.config.WorkRepositoryResourceFailureException: ODI-10182: 资料档案库访问期间 ...
    
			
    10. 
						
  10. 使用elementUI的时候，使用Upload 上传的时候，使用 list-type 属性来设置文件列表的样式，before-upload方法失效
			
    最近在做项目的时候,使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效. 情况下:使用 list-type 属性来设置文件列表的样式. 最终的优化之后:(演 ...
    
			
    11.