技术探讨:大家是怎么使非IE浏览器支持onresize的
技术探讨:大家是如何使非IE浏览器支持onresize的
项目接近尾声了,今天客户发过来一些Bug要求修改,80%的都是关于UI的,其中有一项是要求
iframe自适应不能有滚动条。结合网上的代码很容易就实现了在Ie下比较完美,其中就利用了
一个table的onresize事件。我们是做企业应用的经理要求我们IE下能够运行就可以了,加上
进度卡的紧所以没敢耽搁没有做兼容性方面的尝试。平时写惯了兼容程序很讨厌这种IEOnly的
东西所以回来后自己有写了一下。虽然平时很痛恨IE的各种离奇的Bug但这个onresize确真的蛮
实用的。好了自己先来一段,大家有什么好的想法请回复
------解决方案--------------------
其他浏览器大部分都支持对窗口resize事件的支持,所以在窗口resize的时候调整相关的元素应该就好了吧
------解决方案--------------------
不好意思语无伦次了,看懂了就成了……
------解决方案--------------------
都是客户的“合理”要求吧,呵呵,感觉在网页上用onresize和onscroll之类的不好
------解决方案--------------------
顶一下
------解决方案--------------------
项目接近尾声了,今天客户发过来一些Bug要求修改,80%的都是关于UI的,其中有一项是要求
iframe自适应不能有滚动条。结合网上的代码很容易就实现了在Ie下比较完美,其中就利用了
一个table的onresize事件。我们是做企业应用的经理要求我们IE下能够运行就可以了,加上
进度卡的紧所以没敢耽搁没有做兼容性方面的尝试。平时写惯了兼容程序很讨厌这种IEOnly的
东西所以回来后自己有写了一下。虽然平时很痛恨IE的各种离奇的Bug但这个onresize确真的蛮
实用的。好了自己先来一段,大家有什么好的想法请回复
- HTML code
<!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>
------解决方案--------------------
其他浏览器大部分都支持对窗口resize事件的支持,所以在窗口resize的时候调整相关的元素应该就好了吧
------解决方案--------------------
不好意思语无伦次了,看懂了就成了……
------解决方案--------------------
都是客户的“合理”要求吧,呵呵,感觉在网页上用onresize和onscroll之类的不好
------解决方案--------------------
顶一下
------解决方案--------------------