使用JavaScript重新加载CSS样式表

Question

使用JavaScript重新加载CSS样式表

javascriptjqueryhtmlcssdom

17

我想通过JavaScript重新加载HTML页面中的所有CSS样式表，而不需要重新加载页面。

我只需要在开发过程中使用此功能，以反映CSS更改，而无需一直刷新页面。

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

我希望以某种方式重新加载样式表，而不更改其URL，浏览器将决定是否需要加载该CSS的新版本（如果服务器响应为304-未修改）。

如何实现这一点？

- Tamás Pap

你可能会对这个问题的回答感兴趣。 - Eric

这个话题与你的问题非常相关，希望能对你有所帮助。 - wandarkaf

尝试使用Ajax头请求，如果内容已被修改则加载整个CSS。 - Christoph

5个回答

6

首先，将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上面的例子也可以使用，但如果您只想针对一个或一组样式表进行轻微调整，则可以使用此方法。

- ChongFury

你可以使用当前时间而不是Math.random： var restyled = 'style.css?v=' + new Date().getTime(); - bogdan.mustiata

3

有更好的方法来实现：

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

一种方法是使用Grunt.js来监视文件更改，然后livereload页面。

工作流程如下：

保存CSS文档
Grunt监视更改
重新加载页面上的CSS

这可以与其他Grunt功能链接，例如{sass|less|stylus} 预处理器编译，以创建以下工作流程：

保存Sass文件
监视到变化
Sass被编译并缩小到CDN位置
新的CSS被加载到页面上

其他前端自动化资源：

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

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

http://aboutcode.net/vogue/

- Michael Jasper

这是正确的方式！ - Jonathan Gruber

0

在GoogleChrome浏览器中非常简单。

按F12，在右下角点击齿轮图标，选择“禁用缓存”选项（当DevTools打开时）。

enter image description here

- Warlock

但是那样会重新加载样式表吗？ - Bergi

是的。这个选项告诉浏览器在打开DevTools面板时重新加载样式表。 - Warlock

@Bergi 这个选项禁用了缓存，所以样式表和JavaScript文件将会重新加载。我认为FF和IE应该有同样的选项。 - Warlock

0

Grunt的替代品可以使用Prepros。

它也会在您的项目文件夹上使用文件监视器，但是会针对您的所有文件（js、css、php）并在每次更改时重新加载页面。 (+ 如果这是小的视觉更改，如css，它不会刷新页面，而会进行平滑的过渡。（适用于颜色、定位等）)

与Grunt一样，它编译和压缩您的文件，并允许您在指定的URL上进行实时预览（不仅仅是本地主机）。 （还有很多其他功能）

使用特殊端口，它甚至可以同步事件，如单击、鼠标滚轮、输入等。

- Humbertda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dillen Meijboom · Accepted Answer

使用纯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树加载后再载入此函数。