Como posso fazer para que o browser CSS e Javascript alterações?

StackOverflow https://stackoverflow.com/questions/3224

  •  08-06-2019
  •  | 
  •  

Pergunta

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 browser para ver as alterações feitas para esses arquivos sem a necessidade de que o usuário limpe o seu cache do navegador.Também quer uma solução que funciona bem com um sistema de controle de versão como o Subversion.

Algumas soluções de eu ter visto envolver a adição de um número de versão para o final do arquivo na forma de uma seqüência de caracteres de consulta.

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

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

No Livro do Subversion ele diz sobre a Revisão:"Esta palavra-chave descreve a última revisão, em que este ficheiro alterado no repositório".

O Firefox também permite pressionando CTRL+R para recarregar tudo em uma página específica.

Para esclarecer estou procurando por soluções que não requerem que o usuário faça qualquer coisa da sua parte.

Foi útil?

Solução

Descobri que se você acrescentar o carimbo de data / hora da última modificação de um arquivo no final do 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";
}

Outras dicas

Algumas soluções de eu ter visto envolver a adição de um número de versão para o final do arquivo na forma de uma seqüência de caracteres de consulta.

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

Você pode 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 para fazer isso.

Eu espero que isso esclarece a minha resposta?

O Firefox também permite pressionando CTRL + R para recarregar tudo em uma página específica.

Na minha opinião, é melhor fazer o número de versão de parte do próprio arquivo de exemplo: myscript.1.2.3.js.Você pode configurar seu servidor de web cache este arquivo para sempre, e apenas adicionar um novo arquivo js quando você tem uma nova versão.

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

  1. modificar o nome do arquivo para incluir uma versão única cadeia de caracteres
  2. modificar os arquivos HTML que faz referência à biblioteca para apontar para o ficheiro com a versão

(isso é normalmente muito simples questão para uma versão de script)

Agora você pode definir a Expirar para a CSS/JS anos no futuro.Sempre que você alterar o conteúdo, se a referência de HTML aponta para um novo URI, navegadores não vai mais usar o antigo cópia em cache.

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

Eu também queria saber como fazer isso, quando eu encontrei grom resposta.Obrigado por código.

Eu lutei com a compreensão de como o código que era para ser usado.(Eu não uso um sistema de controle de versão.) Em resumo, você incluir o carimbo de data / hora (ts) quando você chamar a folha de estilos.Você não está planejando alterar a folha de 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');
?>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top