cssrefresh.js-CSS文件自动刷新
一、如何使用cssrefresh.js
使用很简单，类似下面的代码：
<head> <link rel="stylesheet" type="text/css" href="css/site.css" /> <script type="text/javascript" src="js/cssrefresh.js"></script> </head>
就OK了。此时，只要site.css做了一点修改，页面就会即时反应出该修改。
注意：只有在cssrefresh.js之前包含的CSS文件才会自动刷新！
cssrefresh.js
<script>
/*
* CSSrefresh v1.0.1
*
* Copyright (c) 2012 Fred Heusschen
*
*
* Dual licensed under the MIT and GPL licenses.
*
*/
(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[ 'Last-Modified' ] && Date.parse( headers[ 'Last-Modified' ] ) / 1000 ) || 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 ) );
console.log("http://localhost:63342/spa-routers-master/route/"+link.href);
// has been checked before
if ( link.last )
{
// has been changed
if ( link.last != newTime )
{
// reload
link.elem.setAttribute( 'href', this.getRandom( this.getHref( link.elem ) ) );
}
}
// 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();
})();
</script>
