如何讓瀏覽器看到 CSS 和 Javascript 的變化？

Question

CSS 和 Javascript 文件不會經常更改，所以我希望它們被 Web 瀏覽器緩存。 但我也希望 Web 瀏覽器可以查看對這些文件所做的更改，而無需用戶清除瀏覽器緩存。 還需要一個與版本控制系統（如 Subversion）配合良好的解決方案。

---

我見過的一些解決方案涉及以查詢字符串的形式在文件末尾添加版本號。

可以使用 SVN 修訂號為您自動執行此操作： ASP.NET Display SVN Revision Number

您能指定如何包含另一個文件的Revision變量嗎？ 也就是說，在 HTML 文件中，我可以在 CSS 或 Javascript 文件的 URL 中包含修訂號。

在Subversion 書中，它提到了修訂版：“此關鍵字描述了此文件在存儲庫中更改的最后一個已知修訂版”。

Firefox 還允許按CTRL + R重新加載特定頁面上的所有內容。

為了澄清，我正在尋找不需要用戶做任何事情的解決方案。

Answer 1

我發現如果您將文件的最后修改時間戳附加到URL的末尾，瀏覽器將在修改文件時請求這些文件。 例如在PHP中：

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}

Answer 2

我見過的一些解決方案涉及以查詢字符串的形式在文件末尾添加版本號。

<script type="text/javascript" src="funkycode.js?v1">

您可以使用SVN修訂版號為您自動執行此操作，方法是在上面顯示v1之后的html文件中包含單詞LastChangedRevision 。 您還必須設置存儲庫才能執行此操作。

我希望這進一步澄清我的答案？

Firefox還允許按CTRL + R重新加載特定頁面上的所有內容。

Answer 3

在我看來，最好將版本號作為文件本身的一部分，例如myscript.1.2.3.js 。 您可以將Web服務器設置為永久緩存此文件，並在新版本時添加新的js文件。

Answer 4

當我找到格羅姆的答案時，我也想知道如何做到這一點。 謝謝你的代碼。

我很難理解代碼應該如何使用。 （我不使用版本控制系統。）總之，在調用樣式表時包含時間戳（ts）。 您不打算經常更改樣式表：

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>

Answer 5

當您發布新版本的CSS或JS庫時，會導致以下情況發生：

1. 修改文件名以包含唯一的版本字符串
2. 修改引用庫的HTML文件以指向版本化文件

（對於發布腳本，這通常是一件非常簡單的事情）

現在，您可以將CSS / JS的Expires設置為未來幾年。 每當您更改內容時，如果引用HTML指向新URI，瀏覽器將不再使用舊的緩存副本。

這會導致您需要的緩存行為，而不需要用戶的任何內容。