在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 相关文章推荐
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 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模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python元组常见操作示例
2019/02/19 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
C++是不是类型安全的
2014/02/18 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
销售类求职信
2014/06/13 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
素质拓展训练感想
2015/08/07 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书