17

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

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

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

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

如何做到这一点？

4

5 回答 5

12

在纯 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 树后加载此函数。

于 2012-12-05T10:37:27.737 回答
5

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

于 2014-01-30T05:12:50.447 回答
3

有更好的方法来完成：

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

一种方法是使用Grunt.js监视文件更改，然后重新加载页面。

工作流程是这样的：

  • 保存 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/

于 2013-09-11T17:27:40.657 回答
0

在 GoogleChrome 浏览器中非常简单。

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

在此处输入图像描述

在此处输入图像描述

于 2013-09-11T17:54:32.730 回答
0

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

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

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

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

于 2015-10-03T12:27:15.523 回答