在页面上用了iframe带来方便的同时也带来了麻烦,在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。
为了解决IE,Firefox,chrome,safari中iframe显示高度自适应问题上网海找了一遍,试了好几个方案都不妥,最后发现了一个可以正常解决的方案。
首先加入以下的JS代码:
function stateChangeIE(_frame)
{
if (_frame.readyState=="complete")//state: loading ,interactive, complete
{
AutoHeight();
}
}
function stateChangeFirefox(_frame)
{
AutoHeight();
}
function AutoHeight()
{
if(document.readyState!='complete')
{
setTimeout( function(){AutoHeight();},50 );
return;
}
else
{
try
{ //IE、fireFox下测试通过
var ifobj=document.getElementById("mainFrame");
ifobj.style.height = ifobj.contentWindow.document.body.scrollHeight + 0 + "px";
} //注意,别忘了加最后那个"px",不然fireFox下就不起作用了
//加的那0是为了让非IE浏览器高度不会一直增加
catch(e)
{}
}
}
其次使用iframe如下:
< iframe src="./welcome.html" name="mainFrame" id="mainFrame" onreadystatechange="stateChangeIE(this)" onload="stateChangeFirefox(this)" style="width: 100%; height: 9px" frameborder="0">
</iframe >
更改完成了,关闭浏览器重新打开或刷新页面,即可看到正常显示效果。以上代码在IE6,Firfox 3.6.11,Chrome(谷歌浏览器)7.0.544.0,Safari 5.0.2版本上显示正常。