使用 javascript 重新加载 CSS 样式表

Posted 2023-05-09

【中文标题】使用 javascript 重新加载 CSS 样式表

【英文标题】：Reload CSS stylesheets with javascript

【发布时间】：2012-11-23 03:47:21

【问题描述】：

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

我只在开发时才需要这个以反映 css 更改而无需一直刷新页面。

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

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

如何做到这一点？

【问题讨论】：

您可能对此question 答案感兴趣。

***.com/questions/2024486/… 这个话题和你的问题很相关。希望有帮助

尝试一个 ajax 头请求，如果内容已被修改，则加载整个 css。

【参考方案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 树后加载此函数。

【讨论】：

当然！这是 Javascript 一种客户端脚本语言，由您的浏览器执行，因此不会重新加载当前页面。 CSS 页面将被重新加载。

谢谢 Dillen，但我不想更改链接的 href，正如我所指出的：“不更改它的 url”。我希望浏览器根据服务器响应来决定是否需要加载新版本，或者缓存的版本是最新的。

对不起，我看错了你的问题！关键是当您不添加随机 id 或缓存总是加载的东西时。编辑：您可以做一个 Ajax 请求，它返回新的 CSS 内容并与当前的 CSS 内容进行检查。基于此，您可以重新加载或不重新加载 CSS 页面。

由于这被标记为jQuery，您可以使用jQuery 来查找相关的<link> 标记，而不是在href 属性中检查.css 的存在，这不一定是好指标。拥有<link rel="stylesheet" href="my-styles" /> 是完全有效的。另外，您拨打getElmeentsByTagName way 的次数太多了。相反，请使用$('link[rel=stylesheet]').each(...)。

想指出这在"strict mode" 中失败了，您需要像var x 一样声明x

【参考方案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 的示例也适用，但如果您只想针对一个或一组样式表进行微调，则可以使用它。

【讨论】：

可以用当前时间代替Math.random：var restyled = 'style.css?v=' + new Date().getTime();

【参考方案3】：

有更好的方法可以完成：

我只在开发时才需要这个以反映 css 更改而无需一直刷新页面。

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

工作流程是这样的：

保存 css 文档 Grunt watch 看到了变化 live 重新加载页面上的 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/

【讨论】：

这是要走的路！

【参考方案4】：

在 GoogleChrome 浏览器中非常简单。

按 F12，单击右下角的齿轮并选择选项禁用缓存（在 DevTools 处于打开状态时）。

【讨论】：

但这会重新加载样式表吗？

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

@Bergi 此选项禁用缓存，因此样式表和 javascript 文件将被重新加载。我相信FF和IE应该有相同的选择。

【参考方案5】：

Grunt 的另一种选择是使用Prepros。

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

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

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