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

2019-11-20 23:45:48

字體：大中小

來源：轉載

供稿：網友

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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