關於自動刷新CSS

因爲最近系統調整大量的css,但願用戶在瀏覽的時候能即時看到css的更改，而不是繼續看到的是客戶機上的緩存css.

在網絡上找了下，發現不少人推薦一個叫cssrefresh的小工具。

http://www.oschina.net/p/cssrefresh

網上說很好用，因此我就下載了試試。

但按網上的進行了引用以後，卻沒有即時的顯示。

查看了下內部實現，發現是由於實現時時去檢查請求頭的文件的Last-Modified的值，可是跟蹤發現，裏面並不存在該屬性，

固然就不能實現即時的顯示。

看網文，說是請求頭裏面有ETag的屬性，一樣是標識文件是否有修改的，具體的不是很清楚。

因此我就更改了下，以ETag爲判斷依據。

而後發現是能夠的。

/*    
 *    CSSrefresh v1.0.1
 *    
 *    Copyright (c) 2012 Fred Heusschen
 *    www.frebsite.nl
 *
 *    Dual licensed under the MIT and GPL licenses.
 *    http://en.wikipedia.org/wiki/MIT_License
 *    http://en.wikipedia.org/wiki/GNU_General_Public_License
 */

(function() {

    var phpjs = {

        array_filter: function( arr, func )
        {
            var retObj = {}; 
            for ( var k in arr )
            {
                if ( func( arr[ k ] ) )
                {
                    retObj[ k ] = arr[ k ];
                }
            }
            return retObj;
        },
        filemtime: function( file )
        {
            var headers = this.get_headers( file, 1 );
            return (headers && headers['ETag']) || false;
        },
        get_headers: function( url, format )
        {
            var req = window.ActiveXObject ? new ActiveXObject( 'Microsoft.XMLHTTP' ) : new XMLHttpRequest();
            if ( !req )
            {
                throw new Error('XMLHttpRequest not supported.');
            }

            var tmp, headers, pair, i, j = 0;

            try
            {
                req.open( 'HEAD', url, false );
                req.send( null ); 
                if ( req.readyState < 3 )
                {
                    return false;
                }
                tmp = req.getAllResponseHeaders();
                tmp = tmp.split( '\n' );
                tmp = this.array_filter( tmp, function( value )
                {
                    return value.toString().substring( 1 ) !== '';
                });
                headers = format ? {} : [];
    
                for ( i in tmp )
                {
                    if ( format )
                    {
                        pair = tmp[ i ].toString().split( ':' );
                        headers[ pair.splice( 0, 1 ) ] = pair.join( ':' ).substring( 1 );
                    }
                    else
                    {
                        headers[ j++ ] = tmp[ i ];
                    }
                }
    
                return headers;
            }
            catch ( err )
            {
                return false;
            }
        }
    };

    var cssRefresh = function() {

        this.reloadFile = function( links )
        {
            for ( var a = 0, l = links.length; a < l; a++ )
            {
                var link = links[ a ],
                    newTime = phpjs.filemtime( this.getRandom( link.href ) );

                //    has been checked before
//                if ( !link.last )
//                {
                    //    has been changed
                    if ( link.last != newTime )
                    {
                        //    reload
                        link.elem.setAttribute( 'href', this.getRandom( link.href ) );
                    }
//                }

                //    set last time checked
                link.last = newTime;
}
            setTimeout( function()
            {
                this.reloadFile( links );
            }, 1000 );
        };

        this.getHref = function( f )
        {
            return f.getAttribute( 'href' ).split( '?' )[ 0 ];
        };
        this.getRandom = function( f )
        {
            return f + '?x=' + Math.random();
        };


        var files = document.getElementsByTagName( 'link' ),
            links = [];

        for ( var a = 0, l = files.length; a < l; a++ )
        {            
            var elem = files[ a ],
                rel = elem.rel;
            if ( typeof rel != 'string' || rel.length == 0 || rel == 'stylesheet' )
            {
                links.push({
                    'elem' : elem,
                    'href' : this.getHref( elem ),
                    'last' : false
                });
            }
        }
        this.reloadFile( links );
    };


    cssRefresh();

})();

保存爲js文件，進行引用便可。