在IE浏览器中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>

赞 (0)

相关推荐

  • 在IE浏览器中resize事件执行多次的解决方法

    这是个让人每次改变页面窗口的大小时很郁闷的方法,尤其在IE浏览器中,稍微动下窗口边框,就会触发很多次事件.更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候,IE会随机陷入假死状态. 网上找了好久,都是千律一篇的,到处都是转载的一个方法:以下是网上找到的一个解决方法: 复制代码 代码如下: var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeo

  • IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题

    本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题:分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文. var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("alert('mm')",

  • textarea 在浏览器中固定大小和禁止拖动的实现方法

    HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小.但是过分拖动大小会影响页面布局,使页面变得不美观. 可以通过添加如下两个样式禁用拖动,固定大小: 1:彻底禁用拖动(推荐) resize: none; 2:只是固定大小,右下角的拖动图标仍在 wi

  • Jquery on方法绑定事件后执行多次的解决方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • 在django中使用apscheduler 执行计划任务的实现方法

    对于任何软件开发人员而言,为将来计划任务都是必不可少的工具. 尽管我们创建的许多编程旨在响应明确的触发或用户事件,但定期执行的后台进程也同样重要. "每个星期一早晨更新结果." "每天晚上分批下单." 甚至具有每日请求限制的第三方API也隐式要求这种行为. "我们只能每五分钟请求一次更新." 幸运的是,许多聪明的人已经解决了这个问题,并且不难找到python本地解决方案. Advanced Python Scheduler(APS)是一个很好的选

  • 关闭页面window.location事件未执行的原因及解决方法

    1.问题描述: JS中定义widow.location = function(),页面关闭时,logout()函数未执行. window.onunload = function() { logout(); } function logout(reqParam, callback){ var userManageServiceUrl = "http://" + getServerAddr() + "/axis2/services/UserManageService";

  • jquery trigger函数执行两次的解决方法

    jquery trigger函数执行两次的解决方法

    本文实例讲述了jquery trigger函数执行两次的解决方法.分享给大家供大家参考,具体如下: 一.问题如下: 有如下代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{margin:0;pa

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • HTTP 错误 403.1禁止访问:禁止执行访问的完美解决方法

    HTTP 错误 403.1禁止访问:禁止执行访问的完美解决方法

    HTTP 错误 403.1 - 禁止访问:执行访问被拒绝. 解决方法该页无法显示 您试图从目录中执行 CGI.ISAPI 或其他可执行程序,但该目录不允许执行程序. 请尝试以下操作: 如果您认为该目录应该允许执行访问权限,请与网站管理员联系. HTTP 错误 403.1 - 禁止访问:执行访问被拒绝. 技术信息(为技术支持人员提供) 转到 Microsoft 产品支持服务并搜索包括"HTTP"和"403"的标题. 打开"IIS 帮助"(可在 II

  • Android中EditText 设置 imeOptions 无效问题的解决方法

    有时候我们需要在EditText  输出完之后 需要在键盘出现 右下角变成"Go"或"前往 搜索时:通常我们需要设置Android:imeOptions属性.Android:imeOptions的值有actionGo. actionSend .actionSearch.actionDone等 但是今天我发现设置了无效  那是因为我设置了 android:maxLines="1" 解决方法 就是去掉 android:maxLines="1"

随机推荐