WEBコーディング中はcssファイルの読み込みにタイムスタンプ識別子を付けるとキャッシュ問題が楽
WEBコーディング中に頻繁にCSSやJSファイルを書き換える場合、ブラウザキャッシュをクリアするのが面倒でバージョン識別子を付けますよね。
それを手動で書くのが大変な場合、HTMLファイルの方でCSSの読み込みにタイムスタンプを識別子に付与するようにしておけば楽ですよ、という話。
それを手動で書くのが大変な場合、HTMLファイルの方でCSSの読み込みにタイムスタンプを識別子に付与するようにしておけば楽ですよ、という話。
スポンサーリンク
<head>〜</head>内でCSSを読み込んでいる部分をJSで書いておけばOK。
head要素内でもJSが実行されて、タイムスタンプ識別子付きでCSSが読み込まれます。
これで秒単位でCSSを書き換えてもキャッシュ問題に悩まされる事無く反映されます。
※このまま公開するとサイトを見ている人のブラウザキャッシュが大変な事になるので、公開する際は元に戻しておくのを忘れずに・・・。
<script>
var d = new Date();
var year = d.getFullYear();
var month = ((d.getMonth()+1) < 10 ) ? '0' + (d.getMonth()+1) : (d.getMonth()+1);
var day = ( d.getDate() < 10 ) ? '0' + d.getDate() : d.getDate();
var hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours();
var min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
var sec = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
document.write(
'<link rel="stylesheet" href="hogehoge.css?var=' + year + month + day + hour + min + sec +'" />'
);
</script>head要素内でもJSが実行されて、タイムスタンプ識別子付きでCSSが読み込まれます。
これで秒単位でCSSを書き換えてもキャッシュ問題に悩まされる事無く反映されます。
※このまま公開するとサイトを見ている人のブラウザキャッシュが大変な事になるので、公開する際は元に戻しておくのを忘れずに・・・。
スポンサーリンク
