在IE浏览器中resize事件执行多次的解决方法 - Web前端
作者：98wpeu发布时间：2026-06-11分类：网页前端技术浏览：70
导读：这是个让人每次改变页面窗口的大小时很郁闷的方法，尤其在ie浏览器中，稍微动下窗口边框，就会触发很多次事件。更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resiz...
这是个让人每次改变页面窗口的大小时很郁闷的方法，尤其在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导入网页,把以下代码拷贝到记事本中，另存为网页，然后测试一下。示例：
复制代码 代码如下:
<!DOCtypehtml 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>
网上找了好久，都是千律一篇的，到处都是转载的一个方法；以下是网上找到的一个解决方法：
复制代码 代码如下:
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导入网页,把以下代码拷贝到记事本中，另存为网页，然后测试一下。示例：
复制代码 代码如下:
<!DOCtypehtml 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鼠标滑过提示title具体实现代码 - Web前端
- jQueryUI写一个调整分类的拖放效果实现代码 - Web前端
- 幻灯片带网页设计中的20个奇妙应用示例小结 - Web前端
- jQuery.each()用法分享 - Web前端
- 很酷的60款jQuery 幻灯片演示和下载 - Web前端
- jQuery之$(document).ready()使用介绍 - Web前端
- 查看源码的工具 学习jQuery源码不错的工具 - Web前端
- jquery制作搜狐快站页面效果示例分享 - Web前端
- JQuery获取浏览器窗口内容部分高度的代码 - Web前端
- jQuery 1.7.2中getAll方法的疑惑分析 - Web前端
- 网页前端技术排行
-
- 1【第六章】Foundation之按钮和下拉功能 - Web前端
- 2jQuery编写widget的一些技巧分享 - Web前端
- 3在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 4基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 5分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 6jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 9JS网页制作实例:标签云 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性