IE6浏览器下resize事件被执行了多次解决方法


Posted in Javascript onDecember 11, 2012

在IE浏览器下,一次resize事件被执行了多次。这是IE6和IE7的一个比较广为认知的问题,这个问题在这两个版本的浏览器中表现有所不同,通常IE6下会比IE7下更为糟糕。
现在已经有了一个较好的解决方案,让jquery.wresize.js这个jquery插件来帮你:
Js代码

/* 
=============================================================================== 
WResize is the jQuery plugin for fixing the IE window resize bug 
............................................................................... 
Copyright 2007 / Andrea Ercolino 
------------------------------------------------------------------------------- 
LICENSE: php">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 );

如何使用,请看这个例子test page
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://www.hake.cc/kf/201109/"http://jquery.com/src/jquery-latest.pack.js"></script> 
<script type="text/javascript" src=http://www.hake.cc/kf/201109/"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 test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 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 相关文章推荐
jquery中ajax学习笔记4
Oct 16 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 #Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 #Javascript
javascript中window.event事件用法详解
Dec 11 #Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 #Javascript
js控制CSS样式属性语法对照表
Dec 11 #Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 #Javascript
ajax的hide隐藏问题解决方法
Dec 11 #Javascript
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
犀利的js 函数集合
2009/06/11 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python flask框架post接口调用示例
2019/07/03 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
老师推荐信
2013/10/28 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
好人好事演讲稿
2014/09/01 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
文明礼仪主题班会
2015/08/13 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers