◇js,cssのキャッシュ抑止

 js,cssのキャッシュをさせたくない

固定的なhtmlからダイナミックに変更される外部jsや外部cssを参照したいことは良くあります。

残念ながら多くの場合外部js,cssはブラウザにキャッシュされてしまい、変更が反映されません。

htmlをダイナミックに生成する場合は例えば

<link rel="Stylesheet" href="../tool/my_style.css?20180201" type="text/css">
<script type="text/javascript" src="../js/myIndex.js?20180201" charset="UTF-8">

といった形で疑似的なquery文字列を毎回違う値で付加することによりキャッシュを無効にすることができます。

しかし、固定的なhtmlでこれを行うことは極めて大変です。

 js,cssを読み込むためだけのjsファイルを作り参照する

本ブログでは次のようなjsファイルを作りこれをhtmlから参照するようにしました。

//  myEnv.js
function readEnvironment(){
   var link  = document.createElement('link');
   link.href = '../tool/my_style.css?' + (new Date/1000);
   link.rel  = 'stylesheet';
   link.type = 'text/css';
   document.getElementsByTagName('head')[0].appendChild(link);
   document.write('<script src="../js/myTools.js?' + (new Date/1000) + '"><\/script>');
   document.write('<script src="../js/myIndex.js?' + (new Date/1000) + '"><\/script>');
   }
readEnvironment();

各htmlの先頭に次のような固定的記述を置き参照しています。

<!-- saved from url=(0014)about:internet -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../js/myEnv.js" charset="UTF-8"></script>
<p class=c id="navi_bar" num="783"></p>

赤の行がjs参照行です。他の行は気にしないでください。

 全てのキャッシュを取りやめる

次の記述をhtmlに置くことによりキャッシュを完全に抑止できることになっています。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

しかし、これはブラウザ毎に有効であったり無効であったりするので、現実的ではありません。

 そもそもwebブラウザのキャッシュは謎すぎます

普通にキャッシュといえば、「実データの日付を見て、実データがキャッシュデータより新しければ置き換える」 というのが当然だと思いますがwebブラウザはそういう、当たり前の動作をしません。

基本プロトコルのhttpに情報更新時刻の取得機能が確かなかったと思うのですが、入れればいいだけじゃないでしょうか？

どういう発想で作ったのか全く理解不能です。