javascript tutorial - [Solved-5 Solutions] Reload cached CSS/JS files - javascript - java script - javascript array



Problem:

How to force browser to reload cached CSS/JS files?

Solution 1:

Update: Rewritten to incorporate suggestions from John Millikin and da5id. This solution is written in PHP, but should be easily adapted to other languages.

2: Incorporating comments from Nick Johnson that the original .htaccess regex can cause problems with files like json-1.3.js. Solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)

Solution 2:

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
  
click below button to copy the code. By JavaScript tutorial team

Now, we write the following PHP function:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

click below button to copy the code. By JavaScript tutorial team

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />
click below button to copy the code. By JavaScript tutorial team

To this:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />
click below button to copy the code. By JavaScript tutorial team

This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.

Solution 3:

This will ensure that everyone gets the new file. It works because the browser looks at the URL of the file to determine whether it has a copy in cache. If your server isn't set up to do anything with the query string, it will be ignored, but the name will look like a new file to the browser.

On the other hand, if you're developing a website, you don't want to change the version number every time you save a change to your development version. That would be tedious.

So while you're developing your site, a good trick would be to automatically generate a query string parameter:

<script src="/myJavascript.js?version=4"></script>
click below button to copy the code. By JavaScript tutorial team
<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 10 0) + '"\><\/script>');</script>
click below button to copy the code. By JavaScript tutorial team

Solution 4:

http://mysite.com/css/[md5_hash_here]/style.css
click below button to copy the code. By JavaScript tutorial team

Solution 5:

All we need to do if get the file's modified timestamp and append it as a querystring to the file

In PHP i would do it as:

  • All we need to do if get the file's modified timestamp and append it as a querystring to the file
  • In PHP i would do it as:
<link rel="stylesheet" href="mycss.css?v=<?php echo filemtime('mycss.css') ?>"/>
click below button to copy the code. By JavaScript tutorial team

Related Searches to javascript tutorial - reload cached CSS/JS