如何防止浏览器缓存

Question

我正在进行 Facebook 应用程序开发。有一件事让我很烦恼，就是在更改 CSS 样式表/添加 JavaScript 函数时，浏览器并没有反映出任何更改。这真的很烦人，因为我永远无法看到我刚刚做出的更改。

例如，我将我的 CSS 样式表更改为将 img1 从 100px 移动到 50px。但在 Firefox/Chrome 中，img 没有移动一点。

我在其中一个脚本中添加了一个名为 a() 的 JavaScript 函数。但浏览器的控制台一直告诉我 a() 未定义。我已经检查了代码 10 次，没有错误。

请问有谁能告诉我可能的问题是什么以及如何解决？

顺便说一下，我正在使用我的 Mac 作为托管服务器。

谢谢！

- Codier

Answer 1

您可以在不希望缓存的文件名中添加时间戳或其他唯一字符串，可以将其作为实际文件名或GET参数：

<link rel="stylesheet" type="text/css" 
      href="http://cdn.sstatic.net/stackoverflow/all.css?v=4fd8a9d8937d">

根据您正在使用的服务器端语言来服务您的页面，您可以尝试以下方法：

PHP（使用filemtime - 返回文件的修改时间）：

<link rel="stylesheet" type="text/css" 
      href="http://cdn.sstatic.net/stackoverflow/your_css_file.css?v=<?php echo filemtime('/your_css_file.css'); ?>">

Ruby（使用File.mtime，该方法返回文件的修改时间）：

<link rel="stylesheet" type="text/css" 
      href="http://cdn.sstatic.net/stackoverflow/your_css_file.css?v=<% print File.new("testfile").mtime.to_time.to_i('/your_css_file.css'); %>">

如果您使用文件的修改时间，只有在文件被修改后，用户才会被迫重新下载该文件。

- Michael Robinson

Answer 2

在包含JS/CSS文件时，作为参数包含时间戳，可以像这样完成：

<link rel="stylesheet" href="css/screen.css?<?php echo time(); ?>" media="all" 
type="text/css" /> 

- Soufiane Hassou