@ZEAL Blog·厉
We stand alone,
TOGETHER.

用javascript动态调整iframe高度

Posted by zeal on 2005-06-09 11:17 , 1730 characters , Via |  + 1 - 1   English
转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/81 MaDe1nZEAL
标签 ( WebDev ):  ,  , 
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。

首先,在你的主页面上必须包含以下这段javascript代码:

然后对于主页面用到iframe的地方添加代码:

Last Modified on 2007-05-24 17:49
25 条评论:
- 思考 () (link) 于 2005-06-16 16:19
研究了好
- mygod2005-07-29 11:02
为什么引用其它网站的链接就不行呢?
- zeal (link) 于 2005-07-29 17:13
必须是相同域下面的页面。这是浏览器安全限制。
- david () (link) 于 2005-09-20 10:29
xhtml不行,前段时间想解决一个问题,测试好了,放到叶面里面就不行,后来发现是xhtml的问题,去掉第一局话就可以了
- leon.z2005-10-19 11:54
应该用css可以解决吧
- 森林木丁2006-02-08 21:09
如果iFrame中又再嵌套iFrame就不行了。
请问如何实现?
- zeal (link) 于 2006-02-08 21:33
嵌套的话你只能在最底层的iframe叶面调用高度调整函数.然后一层层调上去。也就是说在/myiframesrc.php这个叶面调用parent.dyniframesize('myTestFrameID');而不是直接用<iframe onload=...来改变。
- 森林木丁2006-02-09 16:23
我在第二级嵌套的iFrame中调用dyniframesize后获得iFrame的height,然后附值给上一级iFrame的height来实现的。
谢谢,我用你的方法试一下。
真的很感谢!
- logic () 于 2006-03-23 16:47
可是我使用C#.NET开发aspx文件,iframe没有onload属性啊!!这个该怎么办呢?
- zeal (link) 于 2006-03-23 17:16
没怎么用过.NET环境,不过应该可以通过编辑源文件来手工添加代码吧?
- sun2006-04-07 17:03
good artical,goog man!
- kid () 于 2006-07-20 17:03
如果在myTestFrameID裏面包含多張圖片,在全部載入之前,height為默認值,這段時間的頁面就變得很不美觀,請教這種情況的解決方法,謝謝~
- zeal (link) 于 2006-07-20 21:45
主要要根据你的页面一般的大小来确定好初始的高度吧。
- shrek () 于 2006-09-18 16:14
这个代码太好了,我找了很多这类的代码都是错误的,谢谢
- allen2007-01-29 17:42
在firefox里面不行.
- zeal (link) 于 2007-01-29 18:19
你的代码是怎么写的?请先确定只是Firefox的问题。我在 IE6 / IE7 / Firefox2.0 下测试是没有问题的。
- wangyong () 于 2007-03-01 09:46
我在IE7下不行啊,还是下半截内容显示不出来。
- good2007-11-15 21:46
跨域不行啊,有没有人能够跨域实现iframe高度自适应,并且兼容IE firefox?
- ouming2007-11-20 10:41
如果是由于css引起的高度变化,这样有效果吗?
QQ305596750
- zeal (link) verified2007-11-20 10:47
该脚本是在iframe内容被加载之后触发事件进行高度的计算。实际上你可以把放在onload里面执行的东西在任何需要的时候运行。
- java综合网 (link) 于 2007-12-31 22:02
java综合网
http://www.javazh.cn
不错,不错
- jiasoft2008-02-11 01:14
真的很不错!
- 潇乾2008-02-21 11:51
我把代码原样贴到我的页面里,怎么Firefox里没有效果,只是显示100的高度?IE没有问题!是我哪里弄错了吗?
- heidy2008-04-19 13:46
thanks a lot~~~~~~~
I have been searching for a long time, and you are the best!!!
- 小林 (link) 于 2008-09-03 18:59
谢谢~谢谢~ALAD~呵呵
Since 2005.04.27  梦想 就像鸡蛋 要么孵化 要么臭掉RSS Feed (Entries) | Back To Home | @ZEAL | 沪ICP备05024379号