关于自动刷新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文件，进行引用即可。