动态设置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>
</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;
}
}
}
}
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;
}
}
}
}