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系统下安装CodeBlocks
			
    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=616 1 添加CodeBlocks的软件仓库 sudo add-apt-repository ppa:damien- ...
    
			
    2. 
						
  2. consistent.go 源码阅读
			
    ) > len(c.circle) {         hashes = nil     }     for k := range c.circle {         hashes = app ...
    
			
    3. 
						
  3. 复写的Object常用方法
			
    复写的Object常用方法 在Java中Object类是所有类的父类,其中有几个需要override的方法比如equals,hashCode和toString等方法.每次写这几个方法都要做很多重复性的 ...
    
			
    4. 
						
  4. POJ_2318_TOYS&&POJ_2398_Toy Storage_二分+判断直线和点的位置关系
			
    POJ_2318_TOYS&&POJ_2398_Toy Storage_二分+判断直线和点的位置 Description Calculate the number of toys th ...
    
			
    5. 
						
  5. BZOJ_1662_[Usaco2006 Nov]Round Numbers 圆环数_数位DP
			
    BZOJ_1662_[Usaco2006 Nov]Round Numbers 圆环数_数位DP Description 正如你所知,奶牛们没有手指以至于不能玩“石头剪刀布”来任意地决定例如谁先挤奶的顺 ...
    
			
    6. 
						
  6. 电梯调度设计之初感想——蔡迎盈&&曹玉松
			
    突然拿到这个问题,蒙了好久,索性走一步,再走一步好了,希望在这天下第一庄里,会看到晴空.   查了好多资料,终于还是整理出一个很草稿的版本,这只能算是我们初步的设计.   四部电梯载重和乘客限制不同, ...
    
			
    7. 
						
  7. Postman----打开postman console控制台，查看接口测试打印log
			
    经常在脚本中使用变量时,你可能需要看到变量获取到的值,你可以使用Postman Console去实现的.操作步骤:应用菜单-->View--->Show Postman Console,去 ...
    
			
    8. 
						
  8. C语言sprintf和sscanf函数用法
			
    以前刚用C语言的时候,觉得字符串很难处理,后来用多了,发现其实并非如此,C语言也提供了许多函数给程序员使用.今天记录一下两个常用的两个字符串处理函数:sprintf和sscanf 1. sprintf ...
    
			
    9. 
						
  9. 腾讯云centos服务器不能登录的解决过程
			
    在腾讯云上申请了一个centos服务器,最基础的配置,1 核 1 GB 1 Mbps,50G硬盘,主要用来测试程序,练手用.在上面配置了一个mysql数据库,一直使用都没什么问题. 1 问题描述 过了 ...
    
			
    10. 
						
  10. 【Python3爬虫】常见反爬虫措施及解决办法（三）
			
    上一篇博客的末尾说到全网代理IP的端口号是经过加密混淆的,而这一篇博客就将告诉你如何破解!如果觉得有用的话,不妨点个推荐哦~ 一.全网代理IP的JS混淆 首先进入全网代理IP,打开开发者工具,点击查看 ...
    
			
    11.