动态设置iframe的高度

一个经典的页面布局:页头,中间部分,页尾,中间部分又分为左侧和右侧。左侧的内容相对固定,右侧是用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;
               }
          }
    }
}

 


你可能感兴趣的:(iframe)