修正IE6 IE7的window.resize bug

http://blog.csdn.net/cheng5128/article/details/5501879

应该是一个非常著名的bug了，在IE6 IE7中对window进行resize，此事件会执行多次，或者有时夸张地不断重复此回调函数，陷入死循环，造成假死现象。具体可参看这一篇文章《window.onresize hangs IE6 and IE7》。在这篇文章给出的方法是给出一个记数器，用来判断其是否撞上这倒霉事，当i被重复了100次马上移除resize事件进行自救。

在jQuery中的许多插件中，我看到另一种方法，利用setTimeout进行延时操作，目的是让浏览器有个喘息的机会。但治根不治本。

在外国论坛中，我无意看到第三种方法。那高手建用创建一个与视口等大的DIV，把onsize事件转移到这个DIV。不过我想他应该漏了一些东西没有说，我在这里补充一下。原例子的body基本为空，实质上我们操作的页面不可能是这个样子。我们应该让这个页面透明并绝对化。

[javascript]  view plain copy

1. var mask = document.createElement("div");  
2. mask.style.cssText = "width:100%;height:100%;position:absolute;top:0px;left:0px;filter:alpha(opacity=50)";  
3. document.body.appendChild(mask);  
4. mask.onresize = resizeHandle;  

这是一个比较完美的解决办法，但如何知道执行完resize事件呢？总是有一个层罩在上面，其他mousemove,click都用不了。MSDN提供了一个onresizeend事件，但是用不了。可能给VBScript使用的。用定时器判定吗？或者在回调函数的底部添加一个钩子吗？觉得都不好。我想，与其用一个麻烦的即用即弃的元素，不如看看页面上的元素能帮得上忙否。页面上，只要是HTML，总有几个元素都是少不了的。一个HTML元素，一个BODY元素。试了一下HTML，发现不起作用，真见鬼。不过心想，微软总是搞混HTML与BODY，这事没什么大不了，就绑定到body上吧。

[javascript]  view plain copy

1. window.onload = function(){  
2.   if(!+"/v1" && !document.querySelector) { // for IE6 IE7  
3.     document.body.onresize = resize;  
4.   } else {   
5.     window.onresize = resize;  
6.   }  
7.   var text =  document.getElementById("text")  
8.   function resize() {  
9.     text.innerHTML = getWindowSize().join(" : ");  
10.   }  
11. }  

运行代码

[javascript]  view plain copy

1. if(dom.ie){  
2.     dom.events.special.resize = {  
3.         setup: function() {  
4.             var el = this,  
5.             caller = dom.isWindow(el) ? dom.body(el) : el,  
6.             args = slice.call( arguments, 1 ),  
7.             event = dom.events.fix(window.event);  
8.             event.type = "resize";  
9.             args.unshift(event);  
10.             caller.οnresize=function(){  
11.                 dom.events.handle.apply( el, args );  
12.             }  
13.         },  
14.         teardown: function() {  
15.             var caller = dom.isWindow(this) ? dom.body(this) : this;  
16.             caller.onresize = null;  
17.         }  
18.     }  
19. }  

第二版

[javascript]  view plain copy

1. dom.events.special.resize = (function(){  
2.     var size = function() {  
3.         var el = dom(window);  
4.         return {  
5.             w:el.width(),  
6.             h:el.height()  
7.         };  
8.     },  
9.     lock_ = 0, size_, use_,  
10.     setup = function() {  
11.         if (!this.setTimeout)  
12.             return false;  
13.         size_ = size();  
14.         use_ = true;  
15.         (function loop() {  
16.             if (!lock_++) {  
17.                 var now = size();  
18.                 if (size_.w !== now.w || size_.h !== now.h) {  
19.                     size_ = now;  
20.                     var evt = dom.Event("resize");  
21.                     evt.target = evt.originalTarget = evt.currentTarget = window;  
22.                     dom.events.handle.call(this, evt);  
23.                 }  
24.                 setTimeout(function() {  
25.                     lock_ = 0;  
26.                 }, 0);  
27.             }  
28.             if (use_) {  
29.                 setTimeout(loop, 100);  
30.             }  
31.         })();  
32.     },  
33.     teardown=function () {  
34.         if (!this.setTimeout)  
35.             return false;  
36.         use_ = false;  
37.     }  
38.     return {  
39.         setup:setup,  
40.         teardown:teardown  
41.     }  
42. })();