使用javascript重新加载CSS样式表

Question

我想通过javascript在html页面中重新加载所有CSS样式表，而无需重新加载页面。

我只需在开发时反映css更改，而不是一直刷新页面。

一种可能的解决方案是使用javascript为css href添加?id=randomnumber后缀，但我不想这样做。

我想以某种方式重新加载样式表，而不更改它的url，浏览器将决定是否需要加载该css的新版本（如果服务器以{{ 1}}）。

如何做到这一点？

Answer 1

简单的Javascript：

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

在jQuery中：

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

确保在加载DOM树后加载此函数。

Answer 2

有更好的方法可以实现：

  

我只需在开发时反映css更改，而不是一直刷新页面。

一种方法是使用Grunt.js至watch进行文件更改，然后使用livereload页面。

工作流程如下：

• 保存CSS文档
• Grunt watch看到了变化
• 直播重新加载页面上的css

这可以与其他Grunt函数链接，例如{sass | less | stylus}预处理器编译，以创建这样的工作流：

• 保存Sass文件
• 观看变化
• sass被编译并缩小为cdn location
• 将新的css加载到页面上

其他前端自动化资源：

来自Google员工的视频：http://www.youtube.com/watch?v=bntNYzCrzvE

http://sixrevisions.com/javascript/grunt-tutorial-01/

http://aboutcode.net/vogue/

Answer 3

首先，在样式表链接标记中添加一个id（如果不存在），如下所示：

<link id="mainStyle" rel="stylesheet" href="style.css" />

接下来，在Javascript（也使用jQuery）中添加以下功能：

function freshStyle(stylesheet){
   $('#mainStyle').attr('href',stylesheet);
}

最后，触发所需事件的功能：

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

通过更新链接样式表的值，即使它具有相同的值，也会强制客户端再次查看;当它发生时，它会看到并（重新）加载最新的文件。

如果您遇到缓存问题，请尝试在文件名中附加一个随机（伪）版本号，如下所示：

var restyled = 'style.css?v='+Math.random(0,10000);

希望这会有所帮助。 Dillen上面的示例也可以使用，但是如果您只想针对一个或一组样式表进行微调，就可以使用它。

Answer 4

GoogleChrome浏览器非常简单。

按F12，单击右下角的齿轮，然后选择禁用缓存选项（当DevTools打开时）。

Answer 5

Grunt的替代方案是使用Prepros。

它还在项目文件夹中使用文件监视器，但是对于所有文件。 （js，css，php）并在每次更改时重新加载页面。 （+如果这是一个小的视觉变化，如 css ，它不会刷新页面，它将平滑过渡。（适用于颜色，定位等））

与Grunt一样，它可以编译和缩小文件，并允许您在指定的URL（不仅是localhost）上进行实时预览。 （还有更多功能）

使用特殊端口，甚至同步事件，例如clic，鼠标滚轮，输入等。