禁用动态创建的Javascript的缓存

Question

I've created a dynamic javascript (test.js) file in PHP with Symfony2 and i do not want this file to be cached by browser. When i insert the script test.js 2 times in one page, the first time it's loading directly from the server but for the second time the script is loaded from browser cache. This problem appear on Chrome and IE, on Firefox everything working fine.

Here a live example : http://goo.gl/sggKks (if you see 3 time same number that mean it's loaded from cache, if 3 different numbers it's loaded from server)

I've tried many different Header() PHP settings it's doesn't change anything.

PS: I can't use random number like test.js?r=923902390 to do the trick i need another solution

Answer 1

If you cannot add a dynamic parameter in the URL (event if I think it's the best way to achieve what you want to do), you can disable the cache with .htaccess like this :

<filesMatch "\.js$">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </ifModule>
</filesMatch>

You need to activate the Apache Header module.

If you cannot use this, you should define your JS file as a route in Symfony, and set these headers in your controller response.

Answer 2

Idea 1 (basic)

Generate the content randomness within javascript on the client side. Make javascript work a little more. This is probably what should be done. It's more reasonable. Unless it's just not possible.

Idea 2 (less reasonable and probably overengineered)

Make the script check its own url and load another (randomized) copy of itself.

// self contained auto cloning facility
(function(){

   // see http://www.2ality.com/2014/05/current-script.html
   var currentScript = document.currentScript || (function() {
      var scripts = document.getElementsByTagName('script');
      return scripts[scripts.length - 1];
   })();

   // get script tag url (self)
   var url = currentScript.getAttribute('src');

   // url doesn't have random part
   if(!url.match(/\?\d+$/)) {

      // create new script tag with random part
      var s = document.createElement('script');
      s.src = url+'?'+Math.round(Math.random()*1000000000);
      document.body.appendChild(s);

      // engage wild brakes
      throw "stop";
   }
})();

// do the actual job below this point