如何防止浏览器缓存

Question

我正在做facebook应用程序开发。真正让我恼火的是，当我改变我的CSS样式表/添加一个javascript函数时，这是随机的。浏览器根本不会反映更改。这真的很烦人，因为我永远看不到我刚才所做的更改。

例如。我更改了我的CSS样式表，以便将img1从100px移动到50px。但是在firfox/chrome中，img从来没有移动过。

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

谁能告诉我这里可能存在的问题是什么以及如何解决它？

我使用我的mac作为托管服务器btw

谢谢

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'); %>">

如果您使用文件的修改时间，则仅当文件已被修改时，才会强制用户再次下载该文件。

Answer 2

在包含js/css文件时，请将时间戳作为参数包含在内，如下所示：

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