技术探讨：大家是怎么使非IE浏览器支持onresize的-JavaSript-爱易网页

技术探讨：大家是怎么使非IE浏览器支持onresize的

日期：2014-05-16　浏览次数：20457 次

技术探讨：大家是如何使非IE浏览器支持onresize的
项目接近尾声了，今天客户发过来一些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之类的不好
------解决方案--------------------
顶一下
------解决方案-----------------

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

技术探讨：大家是怎么使非IE浏览器支持onresize的

相关资料更多>

推荐阅读更多>