CSS と JavaScript の変更をブラウザに表示するにはどうすればよいですか?

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

  •  08-06-2019
  •  | 
  •  

質問

CSS と Javascript ファイルは頻繁には変更されないため、Web ブラウザーによってキャッシュされるようにしたいと考えています。しかし、ユーザーがブラウザのキャッシュをクリアしなくても、Web ブラウザがこれらのファイルに加えられた変更を確認できるようにしたいとも考えています。また、Subversion などのバージョン管理システムとうまく連携するソリューションも必要です。

私が見た解決策の中には、ファイルの末尾にクエリ文字列の形式でバージョン番号を追加するものもあります。

SVN リビジョン番号を使用してこれを自動化できます。 ASP.NET 表示 SVN リビジョン番号

を含める方法を指定できますか? リビジョン 別のファイルの変数ですか？つまり、HTML ファイル内で、CSS または JavaScript ファイルへの URL にリビジョン番号を含めることができます。

の中に 転覆の本 リビジョンについては次のように書かれています。「このキーワードは、リポジトリ内でこのファイルが変更された最後の既知のリビジョンを表します。」

Firefox では押すこともできます CTRL+R 特定のページ上のすべてをリロードします。

明確にするために、私はユーザーが何もする必要のないソリューションを探しています。

役に立ちましたか？

解決

ファイルの最終変更タイムスタンプを 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";
}

他のヒント

私が見た解決策の中には、ファイルの末尾にクエリ文字列の形式でバージョン番号を追加するものもあります。

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

SVN リビジョン番号を使用してこれを自動化できます。 あなたのために という言葉を入れることで 最終変更リビジョン HTML ファイル内で、上記の v1 が表示されている場所の後にあります。これを行うにはリポジトリも設定する必要があります。

これで私の答えがさらに明確になると思いますか？

Firefox では押すこともできます CTRL + R 特定のページ上のすべてをリロードします。

私の意見では、バージョン番号をファイル自体の一部にする方が良いと思います。 myscript.1.2.3.js. 。このファイルを永久にキャッシュするように Web サーバーを設定し、新しいバージョンを入手したときに新しい js ファイルを追加するだけです。

CSS または JS ライブラリの新しいバージョンをリリースすると、次のことが発生します。

  1. ファイル名を変更して一意のバージョン文字列を含めます
  2. バージョン管理されたファイルを指すようにライブラリを参照する HTML ファイルを変更します。

(これは通常、リリース スクリプトにとっては非常に簡単な問題です)

CSS/JS の有効期限を数年後に設定できるようになりました。コンテンツを変更するたびに、参照元の HTML が新しい URI を指している場合、ブラウザーはキャッシュされた古いコピーを使用しなくなります。

これにより、ユーザーに何も要求することなく、必要なキャッシュ動作が行われます。

私も、grom の答えを見つけたとき、これをどのように行うか疑問に思っていました。コードをありがとう。

コードがどのように使用されるべきかを理解するのに苦労しました。(私はバージョン管理システムを使用しません。) 要約すると、スタイルシートを呼び出すときにタイムスタンプ (ts) を含めます。スタイルシートを頻繁に変更する予定はありません。

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top