由于最近系统调整大量的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文件，进行引用即可。