单击链接时页面刷新

Question

We're having a page where we're serving images from amazon S3 that are getting cached. However, they've might been changed on a second page. The issue now is that when I click on a link with the url to the previous pages, the images are not reloaded.

However, doing a refresh in the browser on the page afterwards correctly loads the new images. I am curious why is that because the image cache headers are correct (as can be seen from manual refresh) and what do to to handle this properly aka reload the new images when going to the previous page with a simple url link?

Answer 1

You can add a random dummy variable to your link. You don't use the value of the variable but the link is different, thus, the brwoser will reload the page without cache.

For example:

<a href="www.yourweb.com/photos/page.php?rand=4w385fg959">Link</a>

If you have an access to the .htaccess file you can add this

<filesMatch "\.(jpg|jpeg|png|bmp)$">
 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>

to prevent chaching images.

Answer 2

Try This.

 function myFunction() { location.reload(); 

 <button onclick="myFunction()">Reload page</button> 

Reference : Here