浏览器缩放不触发window.onresize事件的BUG

最新推荐文章于 2025-05-15 12:01:03 发布

dh20156

最新推荐文章于 2025-05-15 12:01:03 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文档文章标签：浏览器 function mozilla safari html opera

本文链接：https://blog.youkuaiyun.com/dh20156/article/details/4135167

技术文档专栏收录该内容

57 篇文章

订阅专栏

在帮同事处理一个页面缩放BUG的时候惊奇的发现各种浏览器的缩放不触发window.onresize的BUG，太坏了！

我理解的能正常工作的浏览器有：

IE6
FF3

以下浏览器Ctrl+和Ctrl-时均不触发window.onresize事件，只在窗口大小改变时才触发：

IE8 Beta2，无论是Ctrl+，Ctrl-还是最大化最小化，拖拽改变窗口大小，都无法触发window.onresize事件，真是彻底失效了！

Opera 9.52
Chrome 0.2.149.30
Netscape 9.0.0.6
Mozilla 1.7.13
Safari 3.1.2(525.21)
FF2.x

修正的BUG：

page中有width:auto的区块，当缩放字体大小时，该区块大小不能自动更新！

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3c.org/tr/html4/strict.dtd">
<html>
<head>
<title>wind</title>
<style type="text/css">
html,body {margin:0;padding:0;}
#x {background:red;}
#y {width:76em;}
</style>
<script type="text/javascript">
var eve = {
bindEvent:function(d,e,f,c){
      if(d&&f){
         if(document.attachEvent){
            if(!!d.length){
                  for(var i=0,l=d.length;i<l;i++) d.attachEvent('on'+e,f);
            }else{
                  d.attachEvent('on'+e,f);
            }
         }else{
            if(d.length){
                  for(var i=0,l=d.length;i<l;i++) d.addEventListener(e,f,c);
            }else{
                  d.addEventListener(e,f,c);
            }
         }
      }
},
removeEvent:function(d,e,f,c){
      if(d&&f){
         if(document.attachEvent){
            if(!!d.length){
                  for(var i=0,l=d.length;i<l;i++) d.detachEvent('on'+e,f);
            }else{
                  d.detachEvent('on'+e,f);
            }
         }else{
            if(!!d.length){
                  for(var i=0,l=d.length;i<l;i++) d.removeEventListener(e,f,c);
            }else{
                  d.removeEventListener(e,f,c);
            }
         }
      }
}
}
var rs = function(objID){
var ow = document.documentElement.scrollWidth;
var objID = objID;
var times = 0;
var set = function(){
      times += 1;
      var xx = document.getElementById(objID);
      var w = document.documentElement.scrollWidth;
      xx.style.width = (w>ow)?w+'px':(!/MSIE/s6/.0/.test(navigator.userAgent))?w+'px':(w==ow)?'auto':w+'px';
      if(times>2){
         times = 0;
         eve.removeEvent(window,'resize',rs,false);
         window.setTimeout(function(){eve.bindEvent(window,'resize',rs,false)},0);
      }
}
return function(){
      var xx = document.getElementById(objID);
      xx.style.width = ow+'px';
alert(ow);
      window.setTimeout(set,0);
}
}('x');
eve.bindEvent(window,'resize',rs,false);
</script>
</head>
<body>
<div id="x">
      M A S T H E A D
</div>
<div id="y">
<script>document.write(new Array(1000).join('囧'));</script>
</div>
</body>
</html>
转载请注明出处：http://www.v-ec.com/dh20156/article.asp?id=186