在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)容處理或計(jì)算導(dǎo)致resize事件再次被觸發(fā)的時候，IE會隨機(jī)陷入假死狀態(tài)。
網(wǎng)上找了好久，都是千律一篇的，到處都是轉(zhuǎn)載的一個方法；以下是網(wǎng)上找到的一個解決方法：
復(fù)制代碼 代碼如下:
var resizeTimer = null;
$(window).resize(function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout("changeHeight()", 500);
});//resize事件延遲500毫秒執(zhí)行
這個方法雖然可以解決多次執(zhí)行事件問題，但是不完美，最后我找到了一個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)頁,把以下代碼拷貝到記事本中，另存為網(wǎng)頁，然后測試一下。示例：
復(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>
相關(guān)文章
使用jquery.validate自定義方法實(shí)現(xiàn)"手機(jī)號碼或者固話至少填寫一個"的邏輯驗(yàn)證
這篇文章主要介紹了使用jquery.validate自定義方法實(shí)現(xiàn)"手機(jī)號碼或者固定電話"的邏輯驗(yàn)證，解決了手機(jī)號碼或者固定電話字至少填寫一個的驗(yàn)證問題，分享給大家2014-09-09
這篇文章主要介紹了JQuery動態(tài)添加和刪除表格行的方法,實(shí)例分析了jQuery中動態(tài)操作表格行的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03 
這篇文章主要介紹了jQuery中on()方法用法,實(shí)例分析了on()方法的功能及各種常見的使用技巧,并對比分析了與bind(),live(),delegate()等方法的區(qū)別,需要的朋友可以參考下
2015-02-02 
jQuery插件Skippr實(shí)現(xiàn)焦點(diǎn)圖幻燈片特效
Skippr 是一個超級簡單的 jQuery 幻燈片插件。只是包括你的網(wǎng)頁中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能夠自適應(yīng)窗口寬度，而且導(dǎo)航是獨(dú)特的條形導(dǎo)航。
2015-04-04 
jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡單演示
這篇文章向大家推薦了一個jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果的簡單演示，感興趣的小伙伴們可以參考一下
2015-11-11 
jQuery實(shí)現(xiàn)用戶注冊的表單驗(yàn)證示例
用戶注冊的表單往往是需要進(jìn)行驗(yàn)證的，否則會有一些不否合規(guī)則的數(shù)據(jù)入庫，后果會不堪設(shè)想，下面為大家詳細(xì)介紹下通過jquery是如何實(shí)現(xiàn)的，下面有個示例，感興趣的朋友可以參考下
2013-08-08 
最近做一個項(xiàng)目，許多功能都是關(guān)于彈出框的，在做的過程中發(fā)現(xiàn)會有好多自己考慮不到的問題，下面以一個示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下
2013-08-08 
詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法，具有一定的參考價值，有興趣的可以了解一下
2017-09-09 
jquery下利用jsonp跨域訪問實(shí)現(xiàn)方法
客戶端的跨域訪問，可以通過jsonp方式來實(shí)現(xiàn)，jquery提供了跨域訪問的方法，jQuery.ajax()支持get方式的跨域。當(dāng)然支持跨域還需要服務(wù)器端相應(yīng)的處理。
2010-07-07