返回首页
当前位置: 首页>网页设计>Css样式>

自适应高度的iframe--兼容IE7

时间:2008-09-08 11:42来源:www.91php.com 作者:爱余永不变 点击:
Javascript Code: //iframe自适应高度[在IE6IE7下测试通过] functionreSetIframe(){ variframe=document.getElementById("iframeId"); try{
  

Javascript Code:

  1. //iframe自适应高度[在IE6 IE7下测试通过] 
  2. function reSetIframe(){
  3.     var iframe = document.getElementById("iframeId");
  4.     try{
  5.         var bHeight = iframe.contentWindow.document.body.scrollHeight;
  6.         var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  7.         var height = Math.max(bHeight, dHeight);
  8.         iframe.height =  height;
  9.     }catch (ex){}
  10. }

HTML Code:

  1. <iframe src="" id="weather" name="weather"  width="278" onload="reSetIframe()" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" border="0" framespacing="0"> </iframe>

当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,在iframe的添加 onload=”this.height=100″,让页面加载的时候先缩到足够矮,然后再同步到一样的高度。
这个值,在实际应用中决定,足够矮但又不能太矮,否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到,只能DOM操作完了之后把高度变小了。

顶一下
(0)
0%
踩一下
(2)
100%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
Google
推荐内容