代码改变世界

动态设置iframe的高度

2010-09-08 15:46  追忆似水流年  阅读(1637)  评论(0编辑  收藏  举报

一个经典的页面布局:页头,中间部分,页尾,中间部分又分为左侧和右侧。左侧的内容相对固定,右侧是用iframe嵌套内容页。所以右侧的高度根据加载的页面内容的不同而不同。

这种情况下,要实现右侧当实际高度低于某个固定值时,设为固定的高度,当大于某个固定值,采用此时的实际高度。

<iframe id="contentFrame" name="contentFrame" src="<%=this.Page.ResolveUrl("~/MatchIndex.aspx")%>" frameborder="0" scrolling="no" width="100%" height="100%" onload="Javascript:SetWinHeight(this)">
</iframe>

通过脚本函数SetWinHeight(this)设置页面加载后的高度

var ContentFrame;
function SetWinHeight(obj) 
{
    ContentFrame 
= obj;
    ChangeHeight();
}

function ChangeHeight() 
{
    
var obj = ContentFrame;
    
var height;
    
if (document.getElementById) 
    {
        
if (obj && !window.opera) 
        {
             
if (obj.contentDocument && obj.contentDocument.body.offsetHeight)
             {
                 height 
= obj.contentDocument.body.offsetHeight;//obj是iframe框架id,则使用contentDocument来指它里面的内容页
                 if(height < 750)
                       obj.height 
= 750;
                 
else
                       obj.height 
= height;
              }
              
else if (obj.Document && obj.Document.body.scrollHeight)
              {
                  height 
= obj.Document.body.scrollHeight;
                  
if(height < 750)
                       obj.height 
= 750;
                  
else
                       obj.height 
= height;
               }
          }
    }
}