在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>
相關(guān)文章
使用jquery.validate自定義方法實(shí)現(xiàn)"手機(jī)號(hào)碼或者固話至少填寫(xiě)一個(gè)"的邏輯驗(yàn)證
這篇文章主要介紹了使用jquery.validate自定義方法實(shí)現(xiàn)"手機(jī)號(hào)碼或者固定電話"的邏輯驗(yàn)證，解決了手機(jī)號(hào)碼或者固定電話字至少填寫(xiě)一個(gè)的驗(yàn)證問(wèn)題，分享給大家2014-09-09
JQuery動(dòng)態(tài)添加和刪除表格行的方法
這篇文章主要介紹了JQuery動(dòng)態(tài)添加和刪除表格行的方法,實(shí)例分析了jQuery中動(dòng)態(tài)操作表格行的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03 
這篇文章主要介紹了jQuery中on()方法用法,實(shí)例分析了on()方法的功能及各種常見(jiàn)的使用技巧,并對(duì)比分析了與bind(),live(),delegate()等方法的區(qū)別,需要的朋友可以參考下
2015-02-02 
jQuery插件Skippr實(shí)現(xiàn)焦點(diǎn)圖幻燈片特效
Skippr 是一個(gè)超級(jí)簡(jiǎn)單的 jQuery 幻燈片插件。只是包括你的網(wǎng)頁(yè)中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能夠自適應(yīng)窗口寬度，而且導(dǎo)航是獨(dú)特的條形導(dǎo)航。
2015-04-04 
jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡(jiǎn)單演示
這篇文章向大家推薦了一個(gè)jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果的簡(jiǎn)單演示，感興趣的小伙伴們可以參考一下
2015-11-11 
jQuery實(shí)現(xiàn)用戶注冊(cè)的表單驗(yàn)證示例
用戶注冊(cè)的表單往往是需要進(jìn)行驗(yàn)證的，否則會(huì)有一些不否合規(guī)則的數(shù)據(jù)入庫(kù)，后果會(huì)不堪設(shè)想，下面為大家詳細(xì)介紹下通過(guò)jquery是如何實(shí)現(xiàn)的，下面有個(gè)示例，感興趣的朋友可以參考下
2013-08-08 
最近做一個(gè)項(xiàng)目，許多功能都是關(guān)于彈出框的，在做的過(guò)程中發(fā)現(xiàn)會(huì)有好多自己考慮不到的問(wèn)題，下面以一個(gè)示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下
2013-08-08 
詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-09-09 
jquery下利用jsonp跨域訪問(wèn)實(shí)現(xiàn)方法
客戶端的跨域訪問(wèn)，可以通過(guò)jsonp方式來(lái)實(shí)現(xiàn)，jquery提供了跨域訪問(wèn)的方法，jQuery.ajax()支持get方式的跨域。當(dāng)然支持跨域還需要服務(wù)器端相應(yīng)的處理。
2010-07-07