在IE浏览器中resize事件执行多次的解决方法

更新时间：2011年07月12日 23:39:13 作者：

resize事件是在窗口或框架的大小被调整时发生，包括最小化、最大化。在IE和Opera浏览器中，只要窗口边框被拖动，就触发该事件，在Mozilla浏览器中，resize 事件只是在停止改变窗口大小时才会触发。

这是个让人每次改变页面窗口的大小时很郁闷的方法，尤其在IE浏览器中，稍微动下窗口边框，就会触发很多次事件。更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候，IE会随机陷入假死状态。
网上找了好久，都是千律一篇的，到处都是转载的一个方法；以下是网上找到的一个解决方法：

复制代码代码如下:

 
var resizeTimer = null; 
$(window).resize(function() { 
if (resizeTimer) clearTimeout(resizeTimer); 
resizeTimer = setTimeout("changeHeight()", 500); 
});//resize事件延迟500毫秒执行 

这个方法虽然可以解决多次执行事件问题，但是不完美，最后我找到了一个jquery插件形式的解决方案；

复制代码代码如下:

 
/* 
=============================================================================== 
WResize is the jQuery plugin for fixing the IE window resize bug 
............................................................................... 
Copyright 2007 / Andrea Ercolino 
------------------------------------------------------------------------------- 
LICENSE: http://www.opensource.org/licenses/mit-license.php 
WEBSITE: http://noteslog.com/ 
=============================================================================== 
*/ 
( function( $ ) 
{ 
$.fn.wresize = function( f ) 
{ 
version = '1.1'; 
wresize = {fired: false, width: 0}; 
function resizeOnce() 
{ 
if ( $.browser.msie ) 
{ 
if ( ! wresize.fired ) 
{ 
wresize.fired = true; 
} 
else 
{ 
var version = parseInt( $.browser.version, 10 ); 
wresize.fired = false; 
if ( version < 7 ) 
{ 
return false; 
} 
else if ( version == 7 ) 
{ 
//a vertical resize is fired once, an horizontal resize twice 
var width = $( window ).width(); 
if ( width != wresize.width ) 
{ 
wresize.width = width; 
return false; 
} 
} 
} 
} 
return true; 
} 
function handleWResize( e ) 
{ 
if ( resizeOnce() ) 
{ 
return f.apply(this, [e]); 
} 
} 
this.each( function() 
{ 
if ( this == window ) 
{ 
$( this ).resize( handleWResize ); 
} 
else 
{ 
$( this ).resize( f ); 
} 
} ); 
return this; 
}; 
} ) ( jQuery ); 

你可以把上面的代码另存为jquery.wresize.js导入网页,把以下代码拷贝到记事本中，另存为网页，然后测试一下。示例：

复制代码代码如下:

 
<!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" style="overflow:hidden;"> 
<head> 
<title> test window resize </title> 
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script> 
<script type="text/javascript" src="jquery.wresize.js"></script> 
<script type="text/javascript"> 
jQuery( function( $ ) 
{ 
function content_resize() 
{ 
var w = $( window ); 
var H = w.height(); 
var W = w.width(); 
$( '#content' ).css( {width: W-20, height: H-20} ); 
} 
$( window ).wresize( content_resize ); 
content_resize(); 
} ); 
</script> 
</head> 
<body> 
<div id="content" style="border: 1px dashed silver; position:absolute; overflow:auto;"> 
test test testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div> 
</body> 
</html> 

PHP+jquery+ajax实现分页
这篇文章主要为大家详细介绍了PHPjquery+ajax实现分页的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Jquery 获取checkbox的checked问题
这个郁闷了，今天写这个功能的时候发现了问题，上网找了好多资料对照，更加纠结
2011-11-11
JQuery表单验证插件EasyValidator用法分析
这篇文章主要介绍了JQuery表单验证插件EasyValidator用法,以实例形式系统分析了EasyValidator的功能特性及具体用法,是非常实用的jQuery插件,需要的朋友可以参考下
2014-11-11
jquery+ajax实现省市区三级联动效果简单示例
这篇文章主要介绍了jquery+ajax实现省市区三级联动效果,结合实例形式分析了jQuery结合ajax实现省市区三级联动功能的具体步骤与相关操作技巧,需要的朋友可以参考下
2017-01-01
jQuery提示效果代码分享
这里给大家分享几段JQuery提示效果的代码，非常的简单实用，有需要的小伙伴直接拿走吧
2014-11-11
使用jQuery.fn自定义jQuery翻页插件
第一次写jQuery插件;自己感觉写的也不怎么样。写jQuery插件利用的就是这个东东jQuery.fn,写的过程很详细，感兴趣的朋友可以了解下，希望本文对你使用自定义插件有帮助
2013-01-01
jQuery验证插件validate使用详解
这篇文章主要为大家详细介绍了jQuery验证插件validate的使用方法，jQuery.validate.js插件用于对表单输入进行验证，对验证插件感兴趣的小伙伴们可以参考一下
2016-05-05
简述jQuery Easyui一些用法
这篇文章主要介绍了jQuery Easyui一些用法，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-08-08
jQuery事件注册的实现示范
jQuery为我们提供了方便的事件注册机制，它的优点，操作简单，且不用担心事件覆盖等问题。缺点，普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法
2022-07-07
使用Jquery来实现可以输入值的下拉选单雏型
最近案子中，需要使用下拉选单，但问题是，里面选项都会有各其他：，然後可以让 user 在输入
2011-12-12