您的位置：首页 > 其它

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

2018-10-12 14:06 645 查看

在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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航