实现iframe高度自适应
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高度自适应的更多相关文章
- iframe高度自适应（同域）
今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...
- iframe高度自适应
前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...
- iframe高度自适应内容
JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...
- 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...
- IFrame 高度自适应的两种方式 .
iframe 高度自适应一般是指: iframe 本身的高度 = 内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...
- 兼容firefox的iframe高度自适应代码
网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
- CSS完美实现iframe高度自适应（支持跨域）
Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...
随机推荐
- Spring Webflux: Kotlin DSL [片断]
原文链接:https://dzone.com/articles/spring-webflux-kotlin-dsl-snippets 作者:Biju Kunjummen 译者:Jackie Tang ...
- Android开发的一些总结
Android开发与Java区别 1.执行入口点 AndroidMainfest.xml文件中的intent-filter 2.基于组件 Activity(Fragment), Service, Br ...
- pyc
当运行一个高级程序的时候,需要一个翻译机把高级语言变成计算机能读懂的机器语言的过程.这个过程分为两类: 编译 在程序执行之前,先通过编译器对程序执行一个编译的过程,把程序变成机器语言,运行时就不需要翻 ...
- java Socket多线程聊天程序
参考JAVA 通过 Socket 实现 TCP 编程 参考java Socket多线程聊天程序(适合初学者) 以J2SDK-1.3为例,Socket和ServerSocket类库位于java.net包 ...
- 「WC 2018」州区划分
题目大意: 给一个无向图$G(V,E)$满足$|V|<=21$,对于某一种将$G(V,E)$划分为k个的有序集合方案,若每一个子集$G_i(V_i,E_i)$,$E_i=\{(x,y)|x\in ...
- BZOJ_3438_小M的作物_最小割
BZOJ_3438_小M的作物_最小割 Description 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子 有1个(就是可以种一棵作物) ...
- 三元运算符 与 return
有三元运算符可以很好的代替if else简单语句 但是在使用的时候发现 与 return使用的时候 需要用这种形式 错误形式: $a ? return 1 ? return 0; 正确形式: retu ...
- Django运算表达式与Q对象/F对象
Django运算表达式与Q对象/F对象 1 模型查询 概述: 1 查询集:表示从数据库中获取的对象的集合 2 查询集可以有多个过滤器,通过 逻辑运算符连接 3 过滤器就是一个函数,基于所给的参数限制查 ...
- HttpClient4 TIME_WAIT和CLOSE_WAIT
最近,公司的接口服务器(客户端,向外发送数据)频繁出现了connect timeout 以及readtime out 的情况,经过运维平台检测,并没有网络延时的情况.于是,开始怀疑连接池出了问题. 使 ...
- 在 Less 中写 IE 的css hack
Less中直接在属性后面加hack写法会编译报错的.那么怎么解决呢? 第一种方式: IE7 以display:inline-block为例: less的hack写法: .box{ display: i ...