文档章节

4行代码搞定iframe高度自动变化,完美兼容(转)

壹峰
 壹峰
发布于 2017/02/04 23:16
字数 399
阅读 22
收藏 0
本帖转自: http://www.iteye.com/topic/839143
跨域问题 :http://ued.alimama.com/front-end/use-location-hash-to-auto-sizing/

引用
一个iframe高度自动变化的问题搞了我半天,网上找了下资料,不是很好,结合了一下jquery(版本1.3.2),4行代码即可,完美兼容IE、Firefox、Opera、Safari、Google Chrome,js如下:

Js代码  收藏代码

function  heightSet(thisFrame){  
          if($.browser.mozilla || $.browser.msie){  
             // bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;  
              bodyHeight = document.body.clientHeight
          }else{  
              bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;  
              //这行可代替上一行,这样heightSet函数的参数可以省略了  
              //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;  
          }  
           document.getElementById("thisFrameId").height=bodyHeight;    
    }


引用
第一次发帖,还请指教


[quote现在j2ee做web系统,大部分都离不开iframe,除非你全用ajax,但是ajax到处使用但如果用得不好的话,肯定会一大堆问题。唉!技术有限,只能跟着造造轮子

Js代码  收藏代码
<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src="" onload="heightSet(this)">  
         </iframe>

引用
this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用
都在说一个异步的问题,如果你ajax用得特别多,但又不想每次都去设置,那动态改变iframe肯定达不到你的代码清洁要求,没办法,要么你就脱离iframe。我只能说说一般处理方式,毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码  收藏代码

parent.window.heightSet();


本文转载自:http://huqiji.iteye.com/blog/1039738

壹峰
粉丝 9
博文 595
码字总数 9582
作品 0
广州
其他
私信 提问
iframe自适应高度的多种方法方法小结

第一种方法:代码简单,兼容性还可以,大家可以先测试下。 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocume......

华山猛男
2014/03/27
148
0
利用vw+rem实现移动web适配布局

基本概念 1、单位 Px(CSS pixels) 像素 (px) 是一种绝对单位(absolute units), 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的 其实是相对于某个设备而言的,不同设备指定的值...

村长很忙
2018/12/02
0
0
解决iframe显示高度自适应问题

1.解决iframe显示高度自适应问题 2.解决在chrome下ifame跳转高度不能减少 3.解决IE Chrome兼容问题(其它浏览器未测试) HTML: <iframe frameborder="0" scrolling="no" id="iframe" onload=......

happy爱宝贝
2013/02/26
480
0
Iframe高度自适应(兼容IE/Firefox、同域/跨域)

看转贴吧 但是需要说明的是,就是大家不要以为可以用这种方法来控制别人的网页,不行的 这个跨域虽说域名不一样,但必须都是你的,也就是你可以修改的才行,这个跨域这种方法可以实现,但是如...

thinkgood
2013/10/14
337
0
iframe高度自适应内容

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

银月光海
2016/05/23
97
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 自定义登录认证(二)

一、前言 本篇文章将讲述Spring Security自定义登录认证校验用户名、密码,自定义密码加密方式,以及在前后端分离的情况下认证失败或成功处理返回json格式数据 温馨小提示:Spring Security...

郑清
27分钟前
3
0
php yield关键字以及协程的实现

php的yield是在php5.5版本就出来了,而在初级php界却很少有人提起,我就说说个人对php yield的理解 Iterator接口 在php中,除了数组,对象可以被foreach遍历之外,还有另外一种特殊对象,也就是继承...

冻结not
40分钟前
4
0
servlet请求和响应的过程

本文转载于:专业的前端网站➥servlet请求和响应的过程 1.加载 Servlet类被加载到Java虚拟机中,并且实例化。在这个过程中,web容器(例如tomcat)会调用Servlet类的公开无参构造函数,产生一...

前端老手
40分钟前
4
0
golang 1.13 errors 包来了,不用写“err 气功波”代码

引 这篇是对 errors 包 的姿势挖掘 气功波错误代码 从 http.Get()返回的错误 判断 syscall.ECONNREFUSED 错误.以前要对 go 标准库 error 结构有点熟悉,才能写出下面的代码 func CmdErr(err ...

guonaihong
44分钟前
28
0
喜玛拉雅已听书单

时间倒序排 书名 作者 状态 唐砖 孑与2 进行中 死灵之书(克苏鲁神话合集) 阿卜杜拉·阿尔哈萨德 进行中 赡养人类 刘慈欣 完结 赡养上帝 刘慈欣 完结 中国太阳 刘慈欣 完结 中国太阳 刘慈欣...

Alex_Java
45分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部