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

关于自动刷新CSS的更多相关文章

  1. 自动刷新 CSS文件

    自动刷新 CSS文件 使用任何代码工具码 CSS,都是需要保存后再切换到浏览器按 F5 刷新查看效果,一次又一次,不管这个改动仅是一个小小的颜色.使用 CSSrefresh 后,改动 CSS 文件保存 ...

  2. gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  3. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  4. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  5. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  6. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  7. gruntJs篇之connect+watch自动刷新

    grunt很强大,可以帮我我们解决很多繁琐的操作,虽然刚接触不久,但依然感受到其强大之处,这篇记录一下通过grunt.js实现事实刷新页面, 省去了编码 -> 保存 -> F5..F5.. ...

  8. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  9. gulp下livereload和webserver实现本地服务器下文件自动刷新

    一.前言 node从v0.10.26升级(为了匹配autoprefixer)到v5.3.0后出现了gulp插件兼容问题,在nodejs下各种新的插件出现问题,需要重新配置.livereload实现ch ...

随机推荐

  1. java学习之IO装饰设计模式

    装饰设计模式就是对已有的对象的功能进行增强 当想要对已有的对象进行功能增强时,可以定义类,将已有对象传入,基于已有的功能,并提供加强功能.那么自定义的该类称为装饰类. 装饰类通常会通过构造方法接收被装 ...

  2. 开机时进入 grub rescue>的解决方法

    本机是centOS7和win8的双系统 之前在win上把一个空的磁盘空间释放了 可能造成了grub的一些问题 具体还没有研究过 开机后无法正常进入grub引导画面 而是跳出一串英文+ grub res ...

  3. HDU 4720 Naive and Silly Muggles (外切圆心)

    Naive and Silly Muggles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  4. 关于jdbc的一些疑问

    1.为什么强调在使用jdbc时,须要在使用的时候才打开连接(Connection),用完后立刻关闭.假设我的连接(Connection)一開始就打开.在整个程序结束时才关闭,会带来什么后果呢? 2.为 ...

  5. BZOJ 1263: [SCOI2006]整数划分( 高精度 )

    yy一下发现好像越小越好...分解成3*3*3*3……这种形式是最好的...然后就是高精度了 ----------------------------------------------------- ...

  6. hdu 4784 Dinner Coming Soon

    spfa+优先队列.刚开始只用的spfa,结果tle到死.然后听队友说要用到优先队列,想了想,对时间分层的话的确每一个结点都只进队列一次即可,因为只有大时间才能更新出小时间,然后就wa成shi了.按队 ...

  7. ZOJ 3326 An Awful Problem 模拟

    只有在 Month 和 Day 都为素数的时候才能得到糖 那就模拟一遍时间即可. //#pragma comment(linker, "/STACK:16777216") //fo ...

  8. activebar的用法

    效果图: 网站页面上弹出消息提示狂,用来提示重大事件. <script src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"& ...

  9. ASP.NET MVC 5 学习教程:创建连接字符串

    原文 ASP.NET MVC 5 学习教程:创建连接字符串 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...

  10. 用Chart控件绘制动态图表

    进行程序设计时,选用一个合适的ActiveX控件,有时可大大减少编程工作量.ActiveX 控件(又称OCX)基于COM技术,作为独立的软件模块,它可以在任何程序设计语言中插入使用.本文仅以VC++为 ...