在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 相关文章推荐
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
js完整倒计时代码分享
Sep 18 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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 文件上传系统手记
2009/10/26 PHP
解析PHP提交后跳转
2013/06/23 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php检测url是否存在的方法
2015/04/14 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python合并多个Excel数据的方法
2018/07/16 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
残疾人小组计划书
2014/04/27 职场文书
快餐公司创业计划书
2014/04/29 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书