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

CSS和Javascript文件不會經常更改，所以我希望它們可以通過Web瀏覽器進行緩存。但我也希望Web瀏覽器能夠查看對這些文件所做的更改，而不需要用戶清除瀏覽器緩存。還需要一個與Subversion等版本控制系統配合使用的解決方案。如何讓瀏覽器看到CSS和Javascript的變化？

我已經看到了一些解決方案包括增加一個版本號的查詢字符串的形式在文件的結尾。

可以使用SVN版本號爲您自動完成：ASP.NET Display SVN Revision Number

您可以指定如何包含另一個文件的Revision變量？這是在HTML文件中，我可以在URL或CSS文件中包含版本號。

在Subversion book它說關於Revision：「這個關鍵字描述了這個文件在存儲庫中更改的最後一個已知版本」。

火狐還可以按下CTRL +[R重新加載特定頁面上的所有內容。

爲了闡明我正在尋找的解決方案，不需要用戶做他們的任何事情。

來源

2008-08-06 grom

我發現如果您將文件的上次修改時間戳添加到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"; 
}

來源

2008-08-06 09:41:02 grom

嗨格羅姆，我試過這種方法。然而，我發現，一旦我包含參數瀏覽器沒有緩存的CSS文件。它每次重新訪問頁面時都會加載css文件而不緩存它。我通過繼續在css文件中進行更改來檢測此問題，以查看瀏覽器是否緩存css文件。我正在使用chrome。我可以知道如何讓瀏覽器緩存css文件並只在參數發生變化時才加載？謝謝。 – davidlee 2010-07-25 13:32:42

@benmsia，你有沒有看過請求CSS文件時返回的HTTP頭？ – grom 2010-07-26 23:38:55

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

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

你可以使用SVN版本號由包括在V1以上後出現HTML文件的話LastChangedRevision這個for you自動化。您還必須設置您的存儲庫來執行此操作。

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

火狐還可以按下CTRL +[R重新加載特定頁面上的所有內容。

來源

2008-08-06 09:52:01 GateKiller

在我看來，最好是讓文件本身的版本號部分例如myscript.1.2.3.js。您可以將您的網絡服務器設置爲永久緩存該文件，只需添加新的js文件即可。

來源

2008-08-06 21:33:14

當你釋放你的CSS或JS庫的新版本，會導致以下發生：

修改文件名，包括獨特的版本字符串
修改引用該庫的HTML文件點的版本文件

（這通常是一個釋放腳本一個非常簡單的事）

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

這會導致您需要的緩存行爲而不需要任何用戶。

來源

2008-08-09 14:37:46

我還想知道如何做到這一點，當我發現格羅姆的答案。感謝代碼。

我在理解代碼應該如何使用方面掙扎不已。（我沒有使用版本控制系統。）總之，在調用樣式表時包含時間戳（ts）。你不打算經常改變樣式表：

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

來源

2008-09-13 16:54:51 Michelle

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

回答

相關問題