Preventing Browser Cache

Sometimes it's necessary to prevent a browser from caching a web page.

There can be many reasons. Some are:

1. Keep a log-in page from refilling the form with the username and password.

2. A different image is supposed to load into the web page every hour.

3. The CSS style changes for holidays.

4. JavaScript must be loaded from the server with every page load to publish up-to-the-minute content.

5. For security when asking for an answer to a secret question.

This article presents solutions that can be implemented on any web page. (No PHP required, although the solutions will work on a PHP web page as well as on a non-PHP web page.)

There are two ways to implement cache prevention. Each has its own caveat.

1. Prevent the entire page from caching. This is done with meta tags in the HEAD area of the web page source code.

   Caveat: Web browsers aren't required to honor meta tags. Most do. Just realize they aren't required to do so.

2. Ensure imported elements are loaded fresh. This method can be used to ensure individual images, CSS files, or JavaScript files are loaded anew whenever the web page loads.

   (Notice this isn't actual cache prevention. Instead, it's designed to make the browser load the element fresh regardless what might be in the cache.)

   Caveat: JavaScript is required.

Preventing the Entire Page from Caching

Several meta tags in the header will prevent most browsers from caching the page.

<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 11:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">

The above is designed to be acceptable to all browsers. (The "expires" content="-1", for example, is for IE. The other "expires" content="..." is any valid date in the past for non-IE browsers.)

Ensuring Imported Elements are Loaded Fresh

The trick here is to make the browser think the element (image, CSS, or JavaScript file) is at a different URL.

It's done by appending a "?" and a random number to the URL of the image, CSS, or JavaScript file.
Example: http://example.com/file.js?RandomNumber

(If the URL already has a question mark, substitute an "&" for a "?".
Example:http://example.com/file.js?page=1&RandomNumber)

To implement this, the entire image, style, or script tag is published with JavaScript. That's so JavaScript can use the Math.random() function to generate the random number.

Determine which elements need to load fresh every time the page is loaded into a browser. Generally, not all elements need to be loaded fresh.

Here are examples of code to ensure the elements are loaded fresh, one for each of the mentioned tags.

An image tag:

If this is the original tag –

<img src="//www.willmaster.com/images/wmlogo_icon.gif" alt="Willmaster.com logo" border="0" height="50" width="50">

Then "load fresh every time" is implemented like this.

<script type="text/javascript">
document.write('<img src="//www.willmaster.com/images/wmlogo_icon.gif?'+Math.random()+'" alt="Willmaster.com logo" border="0" height="50" width="50">');
</script>

Immediately following the URL (before the quotation mark after the URL) this is inserted: ?'+Math.random()+'

Math.Random() inserts a random number after the "?" character.

A style tag:

If this is the original tag –

<link href="//www.willmaster.com/12willmaster.css" rel="stylesheet" type="text/css">

Then "load fresh every time" is implemented like this.

<script type="text/javascript">
document.write('<link href="//www.willmaster.com/12willmaster.css?'+Math.random()+'" rel="stylesheet" type="text/css">');
</script>

Like the image tag, the URL is followed by ?'+Math.random()+'

A script tag:

A script tag is a special case. The word "script" can't be in the content the script tag is writing. Some browsers' JavaScript engine would get confused and publish it incorrectly.

Therefore, all cases of the word "script" to be published are broken up in a way that will cause the broken word to be stitched back together and published whole. The word script is published as scr'+'ipt

If this is the original tag –

<script src="//www.willmaster.com/js/entiresite.js" type="text/javascript"></script>

Then "load fresh every time" is implemented like this.

<script type="text/javascript">
document.write('<scr'+'ipt src="//www.willmaster.com/js/entiresite.js?'+Math.random()+'" type="text/javascript"></scr'+'ipt>');
</script>

As in the other tags, the URL is followed by ?'+Math.random()+'

As already mentioned, unlike the other tags, the word script to be published is replaced with scr'+'ipt in both places.

More Information

In each of the above examples, the tag is published using the document.write() function, with the tag between single quotes. Like document.write('______'), where ______ is the tag.

Therefore, if the tag itself contains single quotes, they need to be escaped with a preceding "\" character: \'

Testing

Testing after changes is a given. But givens have a disconcerting way of being forgotten or heedlessly put off until later.

Do test the web page after changes. Ensure everything still works as it should. Brook no delay. When a web page is live, it's likely to have visitors, visitors who obtain their impression of you from your web page.

Will Bontrager