轩枫阁

首页 / Web前端 / CSS / 修改CSS后自动刷新页面查看效果

修改CSS后自动刷新页面查看效果

阅读：11606 评论：1 作者：ivan 分类：CSS、Web前端、互联网

前言

在做web开发的过程经常需要修改CSS文件，而每次修改后都需要手动去刷新浏览器才能看到效果，相当麻烦。

这里推荐一个开源的JS工具，可以帮助我们在修改CSS文件后，自动刷新页面查看效果，提高了开发的效率。

使用

使用方法很简单，只要在页面中引入后面的的cssrefresh.js文件，那么当前页面的css代码修改之后，页面就会自动刷新呈现效果了。需要注意的是，项目必须在服务器下预览，因为使用ajax请求，所以本地项目无法正常工作，并出现XMLHttpRequest cannot load … Cross origin requests are only supported for HTTP错误。

1
2
3
4
<head>  
   <link rel="stylesheet" type="text/css" href="css/site.css" />  
   <script type="text/javascript" src="js/cssrefresh.js"></script>  
</head>

 

cssrefresh.js文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/*    
*    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[ '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 ) );
 
                //    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();
 
})();

263/470
265/470

相关阅读

文章评论

取消回复
  • 锺新鑫

    学习了！谢谢

    2015 年 11 月 4 日 下午 4:55

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间