Como posso fazer o navegador ver CSS e JavaScript mudanças?

votos
40

arquivos CSS e JavaScript não mudam muito frequentemente, então eu quero que eles sejam armazenados em cache pelo navegador da web. Mas eu também quero o navegador para ver as alterações feitas a esses arquivos sem que o usuário para limpar seu cache do navegador. Também quero uma solução que funciona bem com um sistema de controle de versão como o Subversion.


Algumas soluções que tenho visto envolver a adição de um número de versão ao final do arquivo na forma de uma cadeia de consulta.

Poderia usar o número de revisão do SVN para automatizar isso para você: ASP.NET exibição SVN Número de Revisão

Você pode especificar como você incluir a Revisão variável de outro arquivo? Que está no arquivo HTML que pode incluir o número de revisão na URL para o CSS ou arquivo Javascript.

No livro do Subversion que diz sobre Revisão: Esta palavra-chave descreve a última revisão conhecida em que este arquivo alterado no repositório.

Firefox também permite pressionando CTRL+ Rpara recarregar tudo em uma página particular.

Para esclarecer Estou à procura de soluções que não exigem que o usuário faça qualquer coisa da sua parte.

Publicado 06/08/2008 em 10:38
fonte usuário
Em outras línguas...                            


5 respostas

votos
20

Descobri que se você acrescentar o último timestamp modificada do arquivo para o final da URL o navegador irá solicitar os arquivos quando ele é modificado. Por exemplo, em 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";
}
Respondeu 06/08/2008 em 10:41
fonte usuário

votos
9

Algumas soluções que tenho visto envolver a adição de um número de versão ao final do arquivo na forma de uma cadeia de consulta.

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

Você poderia usar o número de revisão do SVN para automatizar esse para você , incluindo a palavra LastChangedRevision em seu arquivo html depois de onde v1 aparece acima. Você também deve configurar o seu repositório de fazer isso.

Espero que isso ajuda a clarificar a minha resposta?

Firefox também permite pressionando CTRL+ Rpara recarregar tudo em uma página particular.

Respondeu 06/08/2008 em 10:52
fonte usuário

votos
6

Na minha opinião, é melhor fazer a parte número da versão do arquivo em si, por exemplo myscript.1.2.3.js. Você pode configurar seu servidor web para armazenar em cache este arquivo para sempre, e apenas adicionar um novo arquivo js quando você tem uma nova versão.

Respondeu 06/08/2008 em 22:33
fonte usuário

votos
5

Eu também queria saber como fazer isso, quando eu encontrei a resposta de grom. Graças para o código.

Lutei com a compreensão de como o código deveria ser usado. (Eu não usar um sistema de controle de versão.) Em resumo, você incluir o timestamp (TS) quando você chamar a folha de estilo. Você não está pensando em mudar o estilo muitas vezes:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
Respondeu 13/09/2008 em 17:54
fonte usuário

votos
5

Quando você lançar uma nova versão do seu CSS ou bibliotecas JS, causar o seguinte para ocorrer:

  1. modificar o nome do arquivo para incluir uma cadeia de versão única
  2. modificar os arquivos HTML que fazem referência a biblioteca para apontar para o arquivo de controle de versão

(Esta é geralmente uma questão bastante simples para um script release)

Agora você pode definir o Expira para o CSS / JS estar anos no futuro. Sempre que você alterar o conteúdo, se os pontos de referência HTML para um novo URI, navegadores deixarão de usar a cópia antiga em cache.

Isso faz com que o comportamento de cache você quiser, sem exigir nada do usuário.

Respondeu 09/08/2008 em 15:37
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more