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>
cssrefresh.js-CSS文件自动刷新的更多相关文章
- 为js和css文件自动添加版本号
web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...
- gulp下livereload和webserver实现本地服务器下文件自动刷新
一.前言 node从v0.10.26升级(为了匹配autoprefixer)到v5.3.0后出现了gulp插件兼容问题,在nodejs下各种新的插件出现问题,需要重新配置.livereload实现ch ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- Web性能优化之动态合并JS/CSS文件并缓存客户端
来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- MVC打包压缩JS&CSS文件调试时过滤了一些文件
BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件: 后台跟踪了 ...
- [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法
https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
随机推荐
- MFC project for a non-Unicode character set is deprecated
error MSB8031: Building an MFC project for a non-Unicode character set is deprecated. You must chang ...
- 堆与栈(JAVA)——以String str="abc"的深度含义解释
栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 栈的优势是,存取速度比堆要快,仅次于直接位于CPU中的 ...
- poj1419 求最大独立集
题目链接:http://poj.org/problem?id=1419 题意:求最大独立集 思路: 这里有一个定理: 最大独立集=补图的最大团最大团=补图的最大独立集 所以这里我们只要求给出的图的最大 ...
- 洛谷P4891 序列
传送门 这题纯暴力竟然能过…… //minamoto #include<cstdio> #include<iostream> #define mul(a,b) (1ll*a*b ...
- 打开CAD时出现“acvmtools.arx ARX命令中发生异常
打开CAD时出现“acvmtools.arx ARX命令中发生异常 解决办法1: 试试进入CAD安装的目录,删掉它acvmtools.arx,重新打开cad.(注:acvmtools.arx一 ...
- 51Nod 1315 合法整数集
1315 合法整数集 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 一个整数集合S是合法的,指S的任意子集subS有Fu ...
- TSP+Floyd BestCoder Round #52 (div.2) 1002 Victor and Machine
题目传送门 题意:有中文版的 分析:(出题人的解题报告)我们首先需要预处理出任意两个国家之间的最短距离,因为数据范围很小,所以直接用Floyd就行了.之后,我们用f[S][i]表示访问国家的情况为S, ...
- 【先定一个小目标】Asp.net Core 在IIS上的托管运行
1.安装 .NET Core Framework 下载.net core地址:官网地址 2.Install IIS 在控制面板->程序与功能->Internet Infomation Se ...
- Css 基本的规则写法
样式表的写法: css的语法由一些标志构成,就是一个基本的样式表由选择器,属性和属性值构成.Css有标准的写法规则标准的css写法: h1 { Font-family:黑体;} h1:表示选择符Fon ...
- 给ambari集群里的kafka安装基于web的kafka管理工具Kafka-manager(图文详解)
不多说,直接上干货! 参考博客 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)(默认端口或任意自定义端口 ...