使用javascript重新加载CSS样式表

Question

我想通过javascript重新加载html页面中的所有CSS样式表,而无需重新加载页面.

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

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

我想以某种方式重新加载样式表,而不更改它的url,浏览器将决定是否需要加载该css的新版本(如果服务器响应a 304 - Not modified).

怎么做到这一点？

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

首先，向样式表链接标签添加一个 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 上面的示例也有效，但是如果您只想针对一个或一组样式表进行细微调整，则可以使用它。