トップへ(mam-mam.net/)

サーバーやブラウザのキャッシュの影響を受けないように、.cssや.jsの外部ファイルの読み込みと適用

検索:

キャッシュファイルの影響を受けないようにするには毎回異なるクエリ文字列(読み込むファイル名に「?」の文字を付け、その後に付ける任意の文字列)を付与すれば([例]text.html?12345)異なるファイルとみなされキャッシュが使用されなくなります。
以下ソースコードではクエリ文字列にJavascriptでUnix Timeを使うことにより、クエリ文字列を変化させています。
外部CSSファイルを読み込むには、既存headタグ内に、lingタグを作成します。
外部Javascriptファイルを読み込むには、既存headタグ内に、scriptタグを作成します。

<script>
  //外部cssファイルを適用する関数(クエリを付けてキャッシュの影響を受けないようにする)
  function create_link_tag(url){
    let date=new Date();
    let head=document.getElementsByTagName("head")[0];
    let link=document.createElement("link");
    link.setAttribute("rel","stylesheet");
    link.setAttribute("href",url+"?"+date.getTime());
    head.appendChild(link);
  }
  //外部jsファイルを適用する関数(クエリを付けてキャッシュの影響を受けないようにする)
  function create_script_tag(url){
    let date=new Date();
    let head=document.getElementsByTagName("head")[0];
    let script=document.createElement("script");
    script.setAttribute("src",url+"?"+date.getTime());
    head.appendChild(script);
  }

  //キャッシュの影響を受けずに「test.css」ファイルを読み込む
  create_link_tag("./test.css");
  //キャッシュの影響を受けずに「test.js」ファイルを読み込む
  create_script_tag("./test.js");
</script> 

上記の使用例

//キャッシュの影響を受けずに「test.css」ファイルを読み込む
create_link_tag("./test.css");

//キャッシュの影響を受けずに「test.js」ファイルを読み込む
create_script_tag("./test.js");