快捷導(dǎo)航

IE6瀏覽器下resize事件被執(zhí)行了多次解決方法

更新時(shí)間：2012年12月11日 17:44:12 作者：

在IE瀏覽器下，一次resize事件被執(zhí)行了多次,這是IE6和IE7的一個(gè)比較廣為認(rèn)知的問題，這個(gè)問題在這兩個(gè)版本的瀏覽器中表現(xiàn)有所不同，通常IE6下會(huì)比IE7下更為糟糕,接下來將介紹解決方法，需要的朋友可以參考下

在IE瀏覽器下，一次resize事件被執(zhí)行了多次。這是IE6和IE7的一個(gè)比較廣為認(rèn)知的問題，這個(gè)問題在這兩個(gè)版本的瀏覽器中表現(xiàn)有所不同，通常IE6下會(huì)比IE7下更為糟糕。
現(xiàn)在已經(jīng)有了一個(gè)較好的解決方案，讓jquery.wresize.js這個(gè)jquery插件來幫你：
Js代碼

復(fù)制代碼代碼如下:

 
/* 
=============================================================================== 
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 ); 

如何使用，請(qǐng)看這個(gè)例子test page：
Js代碼

復(fù)制代碼代碼如下:

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