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. Windows Server 2008取消登录前的Ctrl+Alt+Delete组合键操作
			
    前言: 在Windows Server 2008服务器中,为了防止人们登录服务器时错误的将账户和密码输入其他地方导致信息泄漏,所以在我们登录Windows Server 2008服务器操作系统时会要求 ...
    
			
    2. 
						
  2. sessionStorage的保存和获取
			
    保存一组数组,需要转换为字符串格式: var arr = [1,2,3]; var str = JSON.stringify(arr); window.sessionStorage.setItem(' ...
    
			
    3. 
						
  3. html和js，外部js 的下载执行顺序
			
    当用户开始访问,首先下载html资源和外部js资源,在chrome中显示的是html先下载,然后下载外部js,外部js的下载顺序安引用顺序,但是下载到达情况则视情况而定,接着才是图片和其他资源,但是要 ...
    
			
    4. 
						
  4. ASP.NET Core 2 学习笔记（一）
			
    来势汹汹的.NET Core似乎要取代.NET Framework,ASP.NET也随之发布.NET Core版本.虽然名称沿用ASP.NET,但相对于ASP.NET确实有许多架构上的差异,可以说除了 ...
    
			
    5. 
						
  5. Python3.6安装报错 configure: error: no acceptable C compiler found in $PATH
			
    安装python的时候出现如下的错误: [root@master ~]#./configure --prefix=/usr/local/python3.6 checking build system  ...
    
			
    6. 
						
  6. Python软件目录结构规范
			
    设计项目目录结构和'代码编码风格'一样, 是为了达到以下两点: 可读性高 可维护性高 目录组织方式 Stackoverflow上有一些比较好的范式.
    
			
    7. 
						
  7. .net core微服务之基于Docker+Consul+Registrator服务注册服务发现
			
    一.Docker部分: 先拉最新的asp.net core的镜像: docker pull microsoft/aspnetcore 将下载下来的镜像重命名,为什么要重命名?等会讲Registrato ...
    
			
    8. 
						
  8. Java中的异常简介
			
    Java中异常的分类 Java中的异常机制是针对正常运行程序的一个必要补充,一般来说没有加入异常机制,程序也能正常运营,但是,由于入参.程序逻辑的严谨度,总会有期望之外的结果生成,因此加入异常机制的补 ...
    
			
    9. 
						
  9. js的赋值问题：值传递还是引用传递？
			
    ECMAScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型--Object,Object本质上是由一 ...
    
			
    10. 
						
  10. SpringBoot---页面跳转之WebMvcConfigurerAdapter
			
    摘要:在springboot中定义自己的方法继承WebMvcConfigurerAdapter方法可以实现扩展springMvc功能,要全面实现接管springmvc就要在自己的方法上加上@Enabl ...
    
			
    11.