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. JavaScript-//FOR/IN循环。当使用for/in循环遍历关联数组时，就可以清晰地体会到for/in的强大之处。
			
    <script> //FOR/IN循环.当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处. function getvalue(portfolio){ var ...
    
			
    2. 
						
  2. Can I use MyBatis to generate Dynamic SQL without executing it?
			
    Although MyBatis was designed to execute the query after it builds it, you can make use of it's conf ...
    
			
    3. 
						
  3. nodejs模板加载的问题
			
    JADE模板:http://jumplink.github.io/jade2html2jade/ HTML转JADE,跟imooc上一步步来就搞定了 直接加载HTML静态资源: var express ...
    
			
    4. 
						
  4. jQuery.on() 函数详解  【转载】
			
    注意事项 1:on()为指定元素的一个或多个事件绑定事件处理函数.(可传递参数) 2:从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). d ...
    
			
    5. 
						
  5. Javaweb之 servlet 开发详解1
			
    1.1  Tip:Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个 ...
    
			
    6. 
						
  6. 巩固java(六)----java中可变参数方法(非常实用哦)
			
    java提供了可变参数的方法,即方法的参数个数可以不确定,用"..."定义. import java.util.ArrayList; import java.util.List;  ...
    
			
    7. 
						
  7. Android 深入理解Android中的自定义属性
			
    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45022631: 本文出自:[张鸿洋的博客] 1.引言 对于自定义属性,大家肯定 ...
    
			
    8. 
						
  8. util.go 源码阅读
			
        }     h := md5.New()     baseString, _ := json.Marshal(obj)     h.Write([]byte(baseString))      ...
    
			
    9. 
						
  9. channel.go
			
    )         c.RLock()         client, ok := c.clients[msg.clientID]         c.RUnlock()         if ok  ...
    
			
    10. 
						
  10. CLOSE_WAIT问题-TCP
			
    环境简述 要说清楚问题,先要简单说下生产环境的网络拓扑(毕竟是个网络问题对吧) 看,挺简单的对吧,一个OpenResty做SLB承受客户端请求,反响代理到几台应用服务器.由于业务要求,必须要同步调用第 ...
    
			
    11.