技术探讨：大家是如何使非IE浏览器支持onresize的
项目接近尾声了，今天客户发过来一些Bug要求修改，80%的都是关于UI的，其中有一项是要求
iframe自适应不能有滚动条。结合网上的代码很容易就实现了在Ie下比较完美，其中就利用了
一个table的onresize事件。我们是做企业应用的经理要求我们IE下能够运行就可以了，加上
进度卡的紧所以没敢耽搁没有做兼容性方面的尝试。平时写惯了兼容程序很讨厌这种IEOnly的
东西所以回来后自己有写了一下。虽然平时很痛恨IE的各种离奇的Bug但这个onresize确真的蛮
实用的。好了自己先来一段，大家有什么好的想法请回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>模拟OnResize</title><style type="text/css">.divTest{ width:30%; height:300px; border:1px solid #339966; float:left; margin-left:20px;}</style><script type="text/javascript">function $(sId){ return document.getElementById(sId);}function sizeAdd(nChange){ var oDiv=$("div1"); oDiv.style.width=parseInt(oDiv.offsetWidth)+nChange+"px"}function handleResize(e){ var evt=e||event; var srcEl=evt.target||evt.srcElement; srcEl.innerHTML=Math.random();}/*-------------------------------------------////*浏览器不支持onresize则进行扫描*/(function(){ if(document.all){ return; } window.onload=function(){ window.setInterval(function(){ var tag,tags=document.body.getElementsByTagName("*"); var resizeSet,oldW,oldH,newW,newH; var _this,_event; for(var i=0,len=tags.length;i<len;i++){ tag=tags[i]; resizeSet=tag.getAttribute("onresize"); if(resizeSet){ oldW=tag.getAttribute("oldW"); oldH=tag.getAttribute("oldH"); newW=parseInt(tag.offsetWidth); newH=parseInt(tag.offsetHeight); if(oldW &&oldH&&((oldW!=newW)||(oldH!=newH))){ try{ _this=tag; _event={ srcElement:tag, target:tag }; resizeSet=resizeSet.replace(/(this|event)(?!=\w+)/g,"_$1"); eval(resizeSet); }catch(e){} } tag.setAttribute("oldW",newW); tag.setAttribute("oldH",newH); } } },200); };})();</script></head><body><input type="button" value="+" onclick="sizeAdd(20,20)"/><input type="button" value="-" onclick="sizeAdd(-20,-20)"/><br/><div id="div1" class="divTest" onresize="this.innerHTML=Math.random();"></div><div id="div2" class="divTest" onresize="handleResize(event);"></div></body></html>
function fitFrmHeight(o){ try{ var oWin = o.name ? window.frames[o.name] : o.contentWindow; if(MSIE) if(oWin.document.readyState == 'complete') o.style.height = oWin.document.body.scrollHeight+'px'; if(Moz) o.style.height = oWin.document.documentElement.offsetHeight+'px'; if(Opera) o.style.height = oWin.document.documentElement.scrollHeight+'px'; if(Safari) o.style.height = oWin.document.documentElement.scrollHeight+'px'; }catch(e){}}window.setInterval(function(){ for(var i=0; i<Menu.Groups.length; i++){ if(Menu.Groups[i].oDiv.style.display != 'none'){ fitFrmHeight(Menu.Groups[i].oDiv.firstChild); break; } }}, 200);
[解决办法]
还是跟我上面说的一样，内容变化是客户操作造成的，这里你进行了AJAX更新，那么在AJAX状态变化到4,也就是新内容下载完毕的时候，你就知道内容要变化了，为什么不在这里调整iframe高度呢？虽然对于现在的计算机来说一般可能感觉不到，但是当应用复杂了之后还是会很明显的，特别是大规模应用JS的情况下。
[解决办法]