您好,欢迎访问三七文档
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题在页面上用了iframe带来方便的同时也带来了麻烦,在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。为了解决IE,Firefox,chrome,safari中iframe显示高度自适应问题上网海找了一遍,试了好几个方案都不妥,最后发现了一个可以正常解决的方案。首先加入以下的JS代码:functionstateChangeIE(_frame){if(_frame.readyState==complete)//state:loading,interactive,complete{AutoHeight();}}functionstateChangeFirefox(_frame){AutoHeight();}functionAutoHeight(){if(document.readyState!='complete'){setTimeout(function(){AutoHeight();},50);return;}else{try{//IE、fireFox下测试通过varifobj=document.getElementById(mainFrame);ifobj.style.height=ifobj.contentWindow.document.body.scrollHeight+0+px;}//注意,别忘了加最后那个px,不然fireFox下就不起作用了//加的那0是为了让非IE浏览器高度不会一直增加catch(e){}}}其次使用iframe如下:iframesrc=./welcome.htmlname=mainFrameid=mainFrameonreadystatechange=stateChangeIE(this)onload=stateChangeFirefox(this)style=width:100%;height:9pxframeborder=0/iframe更改完成了,关闭浏览器重新打开或刷新页面,即可看到正常显示效果。以上代码在IE6,Firfox3.6.11,Chrome(谷歌浏览器)7.0.544.0,Safari5.0.2版本上显示正常。
本文标题:解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
链接地址:https://www.777doc.com/doc-2040014 .html