在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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jquery实现倒计时功能
Dec 28 Javascript
JavaScript Array对象详解
Mar 01 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
express 项目分层实践详解
2018/12/10 Javascript
python实现各进制转换的总结大全
2017/06/18 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python匿名函数及应用示例
2019/04/09 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python可迭代对象去重实例
2020/05/15 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
详解python中的异常捕获
2020/12/15 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
员工薪酬激励方案
2014/06/13 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
毕业生评语大全
2015/01/04 职场文书
前台接待员岗位职责
2015/04/15 职场文书
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android