jQueryのgetScriptで、常に最新の外部css・JavaScriptを読み込む

コーディングしてるときに、JavaScriptやcssが、キャッシュされて最新のjsが表示されない場合対策。

外部css・JavaScriptを読み込む

html

<script type="text/javascript" src="./jquery-1.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/normalize.css" />

手動で最新の外部css・JavaScriptを読み込む

html

<script type="text/javascript" src="./jquery-1.6.min.js?date=now"></script>
<link rel="stylesheet" type="text/css" href="./css/normalize.css?date=1" />

クエリパラメータを渡せば、違うファイルとして認識されるので、最新のファイルを取りに行きます。
「normalize.css?date=1123456789123546」とかソースを手動で変更すれば再度読み込みます。

クエリパラメータを自動で生成し、$.getScriptで最新のJavaScriptを読み込む

JavaScript

$(function(){
    var randam = Math.random()*10;
    $.getScript("./jquery-1.6.min.js?d="+randam, function(){});
});

var randam = Math.random()*10;で乱数を作って、$.getScriptのクエリパラメータ部分につけることで、常に最新の外部css・JavaScriptを読み込むことができます。

このやり方だとChromeの開発者ツールでファイルのソースが見れないので見たい場合はscriptタグで読み込むようにしてます。