在IE瀏覽器中resize事件執(zhí)行多次的解決方法

更新時間：2011年07月12日 23:39:13 投稿：mdxy-dxy

resize事件是在窗口或框架的大小被調(diào)整時發(fā)生，包括最小化、最大化。在IE和Opera瀏覽器中，只要窗口邊框被拖動，就觸發(fā)該事件，在Mozilla瀏覽器中，resize 事件只是在停止改變窗口大小時才會觸發(fā)。

這是個讓人每次改變頁面窗口的大小時很郁悶的方法，尤其在IE瀏覽器中，稍微動下窗口邊框，就會觸發(fā)很多次事件。更讓人無語的是在resize事件中包含某些頁面內(nèi)容處理或計算導致resize事件再次被觸發(fā)的時候，IE會隨機陷入假死狀態(tài)。
網(wǎng)上找了好久，都是千律一篇的，到處都是轉(zhuǎn)載的一個方法；以下是網(wǎng)上找到的一個解決方法：

復制代碼代碼如下:

var resizeTimer = null;
$(window).resize(function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout("changeHeight()", 500);
});//resize事件延遲500毫秒執(zhí)行

這個方法雖然可以解決多次執(zhí)行事件問題，但是不完美，最后我找到了一個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導入網(wǎng)頁,把以下代碼拷貝到記事本中，另存為網(wǎng)頁，然后測試一下。示例：

復制代碼代碼如下:

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