快捷導(dǎo)航

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

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

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

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

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

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

這個(gè)方法雖然可以解決多次執(zhí)行事件問(wèn)題，但是不完美，最后我找到了一個(gè)jquery插件形式的解決方案；

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

/*
===============================================================================
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導(dǎo)入網(wǎng)頁(yè),把以下代碼拷貝到記事本中，另存為網(wǎng)頁(yè)，然后測(cè)試一下。示例：

復(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://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>