让IFRAME根据其中的内容自适应高度
项目的界面采用的是最常规的结构,左边是菜单,右边是内容,而点击菜单,会在右边展示不同的页面,为了减少页面刷新的影响,我们依旧考虑用IFRAME,之前用微软的模板页,可是刷新太频繁,给客户的体验不好。而用IFRAME的时候,又不希望其出现滚动条,就需要其自适应高度。之前JS的基础不好,在网上找到了些解决方案,可是兼容性不好,最近加强了Javascript的学习,今天对程序做了些做了些修改,调试了下,还不错。代码如下:
Code
function iframeAutoFit()
{
var ex;
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++)
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
if(document.documentElement && document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
if (window.ActiveXObject) { h += 4; }
else {h += 4;}
a[i].style.height = h + "px";
window.removeEventListener('resize', iframeAutoFit, false);//兼容谷歌浏览器时要去掉RISZE监听
}
}
}
}
catch (ex){}
}
if(document.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
window.attachEvent("onresize", iframeAutoFit);
}
else
{
window.addEventListener('load', iframeAutoFit, false);
window.addEventListener('resize', iframeAutoFit, false);
}
function iframeAutoFit()
{
var ex;
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++)
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
if(document.documentElement && document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
if (window.ActiveXObject) { h += 4; }
else {h += 4;}
a[i].style.height = h + "px";
window.removeEventListener('resize', iframeAutoFit, false);//兼容谷歌浏览器时要去掉RISZE监听
}
}
}
}
catch (ex){}
}
if(document.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
window.attachEvent("onresize", iframeAutoFit);
}
else
{
window.addEventListener('load', iframeAutoFit, false);
window.addEventListener('resize', iframeAutoFit, false);
}
对以上程序稍做说明:
判断Iframe的高度和其源文件的高度的最大值,给Iframe高度赋最大值。最后在加4个像素.if语句主要是为了判断不同的浏览器。最后的两段IF else是给不同的浏览器添加监听方法。