iframe高度自适应实现方案

时间:2021-10-21 05:47:49

iframe高度动态自适应,一直是个头疼的问题,今天我们从事件监听这个角度,来实现iframe高度实时更新。

方案一:监听iframe体的点击事件

<iframe src="cascade.jsp" onload="addEvt(this)"></iframe>
function addEvt(ifm){
var addHeight = function(ifmObj){
if(ifmObj){ }else{ return; }
var win = ifmObj.contentWindow,
doc = win.document,
       body = doc.body,
html = doc.documentElement,
height = html.offsetHeight;

       $.each(body.childNodes,function(index,node){/* 迭代所有可见元素高度累加 */
          var domHeight = node.offsetHeight || 0;
          if(index == 0) height = domHeight;
          else height += domHeight;
       });

            $(ifmObj).height(height);
}
var doc=ifm.contentWindow.document;
doc.onclick=function(){
addHeight(ifm);
}
addHeight(ifm);
$(ifm).css({width:'100%',border:0}).attr("scrolling","no");/*设置无边框和滚动条*/
setTimeout(function(){$(doc).trigger("click");},1000);
}

方案二:监听iframe的滚动事件

<iframe class="autoHeight" src="cascade.jsp"></iframe>
$(function(){
bindIfmScroll();
});
function bindIfmScroll(){
var addHeight = function(ifm){
if(ifm){ }else{ return; }
var win = ifm.contentWindow,
doc = win.document,
html = doc.documentElement,
body = doc.body;
var height = Math.max( //body.scrollHeight,
//body.offsetHeight,html.clientHeight,
//html.scrollHeight,
html.offsetHeight
);
$(ifm).height(height);
}
var ifms = $("iframe.autoHeight"); /*自动检索class为‘autoHeight’的iframe*/
     ifms.css({width:'100%',border:0}).attr("scrolling","no");/*设置无边框和滚动条*/
ifms.each(function(){
var ifmObj = this;
$(ifmObj.contentWindow).scroll(function() {
addHeight(ifmObj);
});
});
}

试验之后,方案一更好些。以上仅供参考,列位如果有更好方案希望能分享出来o(^▽^)o

iframe高度自适应实现方案的更多相关文章

  1. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  2. CSS完美实现iframe高度自适应(支持跨域)

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  3. Iframe高度自适应(兼容IE&sol;Firefox、同域&sol;跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  4. iframe高度自适应(同域)

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  5. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

  6. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

  7. IFrame 高度自适应的两种方式 &period;

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  8. 兼容firefox的iframe高度自适应代码

    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...

  9. 跨域iframe高度自适应&lpar;兼容IE&sol;FF&sol;OP&sol;Chrome&rpar;

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

随机推荐

  1. ASP&period;NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  2. jQuery Mobile&lowbar;表单元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 二十、ValueStack的常用方法

    二十.ValueStack的常用方法 void set(String key,Object value):先获取根栈栈顶的Map,如果不存在,压入一个新的Map public String execu ...

  4. yii 缓存探究

    1.在配置文件中 //在权威指南上是'cache' 其实可以根据不同的缓存组件起不同的名称 //memcache缓存 'memcache' => array( 'class' => 'sy ...

  5. MSSQL-并发控制-1-Transaction

         MSSQL并发控制原先打算分为两个部分写:隔离级别及锁,写的过程中,发现需要提及下事务的相关内容,故加多一篇博文,共3篇.         如果转载,请注明博文来源: www.cnblogs ...

  6. this的指向问题

    在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象. 例 1: var name = "windowsName"; function ...

  7. BAT面试题:使用数组实现一个简单的阻塞队列

    这道题是我亲身经历的一道大厂面试题,非常值得分享! 这道题可以分为两个步骤进行编码解答,第一步是基于数组实现一个队列,第二步是实现线程阻塞. 如果是基于数组实现栈的数据结构,那么我们只需要一个指针进行 ...

  8. 51nod蜥蜴与地下室(1498)(暴力搜索)

    题意:一个数组s,再给你a,b值,除了s1和sn外,你可以攻击其他元素,你对这个元素的伤害为a,那么他两边的元素会受到b的牵连伤害,si-a,si-1-b,si+1-b: 求最小的次数,使得这个数组的 ...

  9. shell 关系运算符

    关系运算符 关系运算符只支持数字,不支持字符串,除非字符串的值是数字. 下表列出了常用的关系运算符,假定变量 a 为 10,变量 b 为 20: 运算符 说明 举例 -eq 检测两个数是否相等,相等返 ...

  10. &lbrack;转&rsqb; iOS文字排版&lpar;CoreText&rpar;那些事儿

    文章转载自 http://www.cocoachina.com/applenews/devnews/2014/0521/8504.html iOS文字排版(CoreText)那些事儿 转自阿毛的蛋疼地 ...