How to prevent Browser from Caching

Question

I am doing facebook app development. Something really annoy me is that randomly, when I change my CSS style sheet/ adding in a javascript function. The browser does not reflect the change at all. This is really annoying because I can never see the changes I just made.

For example. I changed my CSS style sheet so img1 is moved from 100px to 50px. But in firfox/chrome, the img never moved a bit.

I added a javascript function a() to one of my script. But the browser's console keeps telling me a() is not defined. I have checked through the codes 10 times and there is no error.

Can someone tell me what is the possible problem here and how to solve it?

I am using my mac as the hosting server btw

Thanks

Michael Robinson · Accepted Answer · 2011-06-12 02:37:34Z

You can add a timestamp or other unique string to the filename of the files you don't want to be cached, either in the actual filename or as a GET parameter:

<link rel="stylesheet" type="text/css" 
      href="http://cdn.sstatic.net/stackoverflow/all.css?v=4fd8a9d8937d">

Depending on the server-side language you're using to server your pages, you could do something like:

PHP (using filemtime - which returns the modification time of a file):

<link rel="stylesheet" type="text/css" 
      href="http://cdn.sstatic.net/stackoverflow/your_css_file.css?v=<?php echo filemtime('/your_css_file.css'); ?>">

Ruby (using File.mtime which returns the modification time of a file):

<link rel="stylesheet" type="text/css" 
      href="http://cdn.sstatic.net/stackoverflow/your_css_file.css?v=<% print File.new("testfile").mtime.to_time.to_i('/your_css_file.css'); %>">

If you use the file's modification time, your users are only forced to download the file again if it has been modified.

Soufiane Hassou · Accepted Answer · 2011-06-12 01:18:05Z

3

when including your js/css files, include the timestamp as a param, something like this should do it :

<link rel="stylesheet" href="css/screen.css?<?php echo time(); ?>" media="all" 
type="text/css" />

answered Jun 12, 2011 at 1:18

Soufiane Hassou

17.8k2 gold badges42 silver badges76 bronze badges

Collectives™ on Stack Overflow

How to prevent Browser from Caching

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related