解決IE6下resize事件執行多次的問題

在IE瀏覽器下,一次resize事件被執行瞭多次。這是IE6和IE7的一個比較廣為認知的問題,這個問題在這兩個版本的瀏覽器中表現有所不同,通常IE6下會比IE7下更為糟糕。
 
現在已經有瞭一個較好的解決方案,讓jquery.wresize.js這個jquery插件來幫你:
 
Js代碼 
/*   
=============================================================================== 
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 ); 
 如何使用,請看這個例子test page:
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>  
   
<p id="content" style="border: 1px dashed silver; position:absolute; overflow:auto;">  
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test   
</p>  
  
 </body>  
</html> 

作者“四庸青年”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *