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


Posted in Javascript onJuly 12, 2011

这是个让人每次改变页面窗口的大小时很郁闷的方法,尤其在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>
Javascript 相关文章推荐
extjs 04_grid 单击事件新发现
Nov 27 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 #Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 #Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 #Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 #Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 #Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 #Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 #Javascript
You might like
PHP数组交集的优化代码分析
2011/03/06 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
2014自主招生自荐信策略
2014/01/27 职场文书
优秀企业获奖感言
2014/02/01 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
导游欢迎词范文
2015/01/23 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL