一、如何使用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文件自动刷新的更多相关文章

  1. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

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

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

  3. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  4. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

  7. [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...

  8. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  9. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  10. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

随机推荐

  1. Gym 100531B Buffcraft (贪心+暴力+前缀和)

    题意:给定两个加血的方式,一个是直接加多少,另一种是加百分之几,然后你能够你选 k 种,问你选哪 k 种. 析:首先肯定要选加的多的,所以我们先排序,从大到小,然后用前缀和存储一下,再去枚举从第一种和 ...

  2. ubuntu下7z文件的解压方法（转载）

    转自:http://qtlinux.blog.51cto.com/3052744/569406 打开终端,键入以下命令: apt-get install p7zip-full 控制台会打出以下信息: ...

  3. Swift4 类与继承, 类型转换, 类型判断

    创建: 2018/03/05 完成: 2018/03/07 更新: 2018/03/09 完善标题 [Swift4 类与继承, 类型转换] -> [Swift4 类与继承, 类型转换与判断] 补 ...

  4. bzoj 4820: [Sdoi2017]硬币游戏【kmp+高斯消元】

    有点神,按照1444的做法肯定会挂 注意到它的概率是相同的,所以可以简化状态 详见http://www.cnblogs.com/candy99/p/6701221.html https://www.c ...

  5. bzoj 1027: [JSOI2007]合金【凸包+Floyd】

    参考:https://www.cnblogs.com/zhuohan123/p/3237246.html 因为一c可以由1-a-b得出,所以删掉c,把a,b抽象成二维平面上的点.首先考虑一个客户需求能 ...

  6. 水题不AC，自挂二叉树——Chemist

    学长让我们刷USACO的水题果然是有道理的,做了四道挂了两道...细节处理一定要小心!大概都是NOIP Day1 T1的难度,但是一定要考虑全面否则还是凉凉啊. 一.USACO1.1贪婪的送礼者 题目 ...

  7. DevStack部署OpenStack开发环境 - 问题总结

    建议在使用DevStack搭建OpenStack开发环境前,先安装好开发工具包组.特别是gcc,主要一定是在yum update -y 之前,否则更新完系统后,在安装开发工具包会出现很多依赖包因为版本 ...

  8. Mybatis的全局配置文件标签介绍(mybatis-config.xml)

    全局配置文件中本人只记录了常用的几个  typeHandlers, objectFactory,objectWrapperFactory, reflectorFactory, plugins, dat ...

  9. 项目Alpha版本发布

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业的要求在哪里 https://edu.cnbl ...

  10. 《windows核心编程系列 》六谈谈线程调度、优先级和关联性

    线程调度.优先级和关联性 每个线程都有一个CONTEXT结构,保存在线程内核对象中.大约每隔20ms windows就会查看所有当前存在的线程内核对象.并在可调度的线程内核对象中选择一个,将其保存在C ...