Zeal Blog - 泽欧里
  WWW Zeal Blog
梦想 就像鸡蛋
要么孵化 要么臭掉

用javascript动态调整iframe高度

zeal 2005-06-09 11:17 于 WebDev , 1730 字 , Via |  + 1 - 1   English
Made In Zeal 转载请保留原始链接：http://www.zeali.net/entry/81
标签 ( Tags )：  ,  , 
当你在页面上使用了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
引用本文(TrackBack): 此功能无限期关闭ing ... 如有引用请在文中标明出处并提供超链接 已有1条引用:
    用javascript动态调整iframe高度 当你在页面上使用了[color=#0000ff]iframe[/color]之后，一般来说会不希望iframe显示... 2006-01-09 14:49 via 逸凤源(thw's BLOG)
(Login to delete trackbacks)
24 条评论:
- 思考 () (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!!!
对于这篇日志您有什么想法？我想听听您的高见。
如果您不是没有思想的机器Spammer，请告诉我 4 + 8 = ？
然后任选以下两种方式之一告诉我您的身份：
1. 使用您的 OpenID
2. 使用传统留言格式
(必填) 名字
如何称呼您？
(选填) URL
在此填写您的 Blog / Homepage 的地址，我将非常乐于访问
(选填) Email
Email地址将在经过防SPAM处理后显示在页面。如果您不希望公开自己的Email，请略过此栏
并写下您的见解:
(由于需要进行SPAM过滤，如果评论提交速度慢请耐心等待)
记住我?

  如何进行评论                   当有新回复时给我发送邮件通知
除了 <b> 和 <i> 之外，其他的HTML标签都将从您的评论中去除. URL 或 Email 地址会被自动加上链接.
当您点击发表或者预览之后，系统会自动保存您此次评论的内容，以便当网络原因发表失败时直接按Ctrl-V重新粘贴上次评论内容。
注意：快捷键及自动拷贝功能仅对IE浏览器有效。
 里,居也。——《说文》    里,邑也。——《尔雅》。李注:“居之邑也。”沪ICP备05024379号 Back To Home All Links Loading