Question

I am designing a JavaScript widget that will display an iframe with random ads created by php.

Every time the page is refreshed, a new set of random ads are created.

When a user clicks on an ad, he is redirected to the website that ad represents.

The problem occurs when the user then uses the back button.

Since the back button just brings up a cached page, the same ads will appear, which I don’t want.

Since the websites the ads will be shown on don’t belong to me, I have no access to the header files.

Even when using the JavaScript reload function, the javascript file is still cached.

Any help would be greatly appreciated.

Answer 1

The problem is that caching of Javascript is a client-side mechanism controlled by the browser. So, one way to do this is using the no-cache header to tell the browser not to cache:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Another option is to make the request seem unique every time by adding random numbers to the end with Javascript:

var img.src = 'www.mysite.com/ads.php'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
   alert('completed!');
});

A final option if you are using jQuery:

$.ajax({
   url: 'test.html',
   cache: false,
   success: function(html){
     $('#results').append(html);
   }
});