上一篇
下一篇
浏览器缩放不触发window.onresize事件的BUG
作者:dh20156 日期:2008-09-23
在帮同事处理一个页面缩放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[i].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[i].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[i].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[i].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>
我理解的能正常工作的浏览器有：
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[i].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[i].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[i].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[i].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>
[本日志由 dh20156 于 2008-09-23 11:47 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 浏览器 缩放 window onresize bug
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: 浏览器 缩放 window onresize bug 评论: 2 | 引用: 0 | 查看次数: 3625
回复
到处都在转这篇文章，但是给点说明啊。 
看不懂啊，，，，
dh20156 于 2010-01-27 08:07 PM 回复
看不懂啊，，，， dh20156 于 2010-01-27 08:07 PM 回复你有哪里不明白的呢？ ^_^
发表评论
你这下面的例子 究竟是在解决这个bug
还是想达到什么效果
望说明下
page中有width:auto的区块，当缩放字体大小时，该区块大小不能自动更新！
复制以上代码到各个浏览器中试试看，然后去掉代码中的脚本再试试看。