Question

我正在尝试让styles.css不缓存，因为服务器在缓存时遇到css问题。

<script>
var numBAH = Math.floor(Math.random()*100);
</script>

<link href="styles.css+ numBAH +" rel="stylesheet" type="text/css" />

Answer 1

如果您可以访问服务器端语言，那么使用查询字符串呈现链接标记会更加简洁，该查询字符串是文件整个内容的哈希值。这样，只有当文件内容实际发生了变化时，缓存无效器ey才会改变。

在看过后面的讨论之后，关于你从不想要使用缓存的方式，因为加载太快，我想改变我的答案。不是new Date()，而是：修复您的网页，以便快速加载是理想的结果。如果您遇到特定问题，请创建一个针对这些问题的问题，不要直接针对糟糕的解决方法。

Answer 2

您可以在文档的头部执行此操作：

<script>
document.write('<link href="styles.css?r='+ Math.floor(Math.random()*100) +'" rel="stylesheet" type="text/css" />');
</script>

但是：

你很有可能找到相同数字的两倍
一般不应该避免缓存

我建议的解决方案：

1）使用(new Date()).getTime()而不是随机数

2）只需在版本更改时更改数字：styles.css?v=3（不使用javascript）

Answer 3

缓存清除可以在没有服务器端渲染的情况下工作。我在移动设备和桌面设备上测试了最新版本的firefox，chrome和safari，这段代码很有用。（我不确定IE，但是..）

<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    var numBAH = Math.floor(Math.random()*10000);

    document.write('<LI' + 'NK HREF="./path/to/style.css?cacheBusting='+numBAH+'" rel="stylesheet">');
    </SCRIPT>
</HEAD>

将随机数添加到.css，以便它不会缓存

3 个答案: