在IE浏览器中resize事件执行多次的解决方法
更新时间：2011年07月12日 23:39:13 投稿：mdxy-dxy
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>
相关文章
这篇文章主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
一些常用的验证脚本2010-07-07
这篇文章主要为大家详细介绍了jQuery实现优雅弹窗效果 的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了Jquery.Form 异步提交表单的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
本文主要给大家详细介绍了jQuery过滤选择器，包含基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等，十分全面,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery语法小结(超实用)，涉及到jquery语法相关知识，对jquery语法相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要为大家详细介绍了jQuery结合Pdo编写login登陆界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
jQuery插件formValidator自定义函数扩展功能实例详解
这篇文章主要介绍了jQuery插件formValidator自定义函数扩展功能,结合实例形式分析了jQuery插件formValidator常见的各种判定与验证技巧,非常简单实用,需要的朋友可以参考下2015-11-11
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。下面通过实例代码给大家介绍jQuery remove()过滤被删除的元素，需要的的朋友参考下吧2017-07-07
本文主要介绍了jquery正整数数字校验正则表达式的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论