ZEAL Blog·厉
WWW Zeal Blog
We stand alone,
together.
- BAND of BROTHERS

用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的地方添加代码：

This Entry was Last Modified on 2007-05-24 17:49
对于这篇日志有什么看法？我想听听您的高见:
您也可以在页面底部的 Google Friend Connect 工具栏进行评论，体验更好的互动交流 »
首先为了证明您不是没有思想的机器Spammer，请告诉我 4 + 8 = ？
然后任选以下两种方式之一告诉我您的身份：
1. 使用您的 OpenID
2. 使用传统留言格式
(必填) 名字
如何称呼您？
(选填) URL
在此填写您的 Blog / Homepage 的地址，我将非常乐于访问
(选填) Email
Email地址将在经过防SPAM处理后显示在页面。如果您不希望公开自己的Email，请略过此栏
并写下您的见解:
(由于需要进行SPAM过滤，如果评论提交速度慢请耐心等待)
(所有URL都会加 nofollow 标记，保证不被搜索引擎收录，请SEOers不要白费力气)
记住我?

  如何进行评论                   当有新回复时给我发送邮件通知
除了 <b> 和 <i> 之外，其他的HTML标签都将从您的评论中去除. URL 或 Email 地址会被自动加上链接.
当您点击发表或者预览之后，系统会自动保存您此次评论的内容，以便当网络原因发表失败时直接按Ctrl-V重新粘贴上次评论内容。
注意：快捷键及自动拷贝功能仅对IE浏览器有效。
25 条评论:
- 思考 () (link) 于 2005-06-16 16:19
研究了好
- mygod 于 2005-07-29 11:02
为什么引用其它网站的链接就不行呢？
- zeal (link) 于 2005-07-29 17:13
必须是相同域下面的页面。这是浏览器安全限制。
- david () (link) 于 2005-09-20 10:29
xhtml不行，前段时间想解决一个问题，测试好了，放到叶面里面就不行，后来发现是xhtml的问题，去掉第一局话就可以了
- leon.z 于 2005-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环境，不过应该可以通过编辑源文件来手工添加代码吧？
- sun 于 2006-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
这个代码太好了，我找了很多这类的代码都是错误的，谢谢
- allen 于 2007-01-29 17:42
在firefox里面不行.
- zeal (link) 于 2007-01-29 18:19
你的代码是怎么写的？请先确定只是Firefox的问题。我在 IE6 / IE7 / Firefox2.0 下测试是没有问题的。
- wangyong () 于 2007-03-01 09:46
我在IE7下不行啊，还是下半截内容显示不出来。
- good 于 2007-11-15 21:46
跨域不行啊，有没有人能够跨域实现iframe高度自适应，并且兼容IE firefox？
- ouming 于 2007-11-20 10:41
如果是由于css引起的高度变化,这样有效果吗?
QQ305596750
- zeal (link) verified 于 2007-11-20 10:47
该脚本是在iframe内容被加载之后触发事件进行高度的计算。实际上你可以把放在onload里面执行的东西在任何需要的时候运行。
- java综合网 (link) 于 2007-12-31 22:02
java综合网
http://www.javazh.cn
不错，不错
- jiasoft 于 2008-02-11 01:14
真的很不错!
- 潇乾 于 2008-02-21 11:51
我把代码原样贴到我的页面里，怎么Firefox里没有效果，只是显示100的高度？IE没有问题！是我哪里弄错了吗？
- heidy 于 2008-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~呵呵
日志存档
2010年
08 06 04 03 02 01
2009年
12 11 10 09 08 07 06 05 04 03 02 01
2008年
12 11 10 09 08 07 06 05 04 03 02 01
2007年
12 11 10 09 08 07 06 05 04 03 02 01
2006年
12 11 10 09 08 07 06 05 04 03 02 01
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC
署名-非商业性
-相同方式分享
Zeal Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1 开发
Launched @
2005-04-27
Since 2005.04.27  梦想 就像鸡蛋　要么孵化 要么臭掉RSS Feed (Entries) | About me | Back To Home | t.sina/ZEAL | zbird.com | 沪ICP备05024379号