I want to reload a page using JavaScript but I want to clear cache too, so on page refresh the page has latest versions of everything from server.
Other browsers except IE are not getting latest content.
Any solution for IE9?
This question is related to
javascript
internet-explorer
In my case reload() doesn't work because the asp.net controls behavior. So, to solve this issue I've used this approach, despite seems a work around.
self.clear = function () {
//location.reload(true); Doesn't work to IE neither Firefox;
//also, hash tags must be removed or no postback will occur.
window.location.href = window.location.href.replace(/#.*$/, '');
};
You can do this a few ways. One, simply add this meta tag to your head:
<meta http-equiv="Cache-control" content="no-cache">
If you want to remove the document from cache, expires meta tag should work to delete it by setting its content attribute to -1 like so:
<meta http-equiv="Expires" content="-1">
http://www.metatags.org/meta_http_equiv_cache_control
Also, IE should give you the latest content for the main page. If you are having issues with external documents, like CSS and JS, add a dummy param at the end of your URLs with the current time in milliseconds so that it's never the same. This way IE, and other browsers, will always serve you the latest version. Here is an example:
<script src="mysite.com/js/myscript.js?12345">
UPDATE 1
After reading the comments I realize you wanted to programmatically erase the cache and not every time. What you could do is have a function in JS like:
eraseCache(){
window.location = window.location.href+'?eraseCache=true';
}
Then, in PHP let's say, you do something like this:
<head>
<?php
if (isset($_GET['eraseCache'])) {
echo '<meta http-equiv="Cache-control" content="no-cache">';
echo '<meta http-equiv="Expires" content="-1">';
$cache = '?' . time();
}
?>
<!-- ... other head HTML -->
<script src="mysite.com/js/script.js<?= $cache ?>"
</head>
This isn't tested, but should work. Basically, your JS function, if invoked, will reload the page, but adds a GET param to the end of the URL. Your site would then have some back-end code that looks for this param. If it exists, it adds the meta tags and a cache variable that contains a timestamp and appends it to the scripts and CSS that you are having caching issues with.
UPDATE 2
The meta tag indeed won't erase the cache on page load. So, technically you would need to run the eraseCache function in JS, once the page loads, you would need to load it again for the changes to take place. You should be able to fix this with your server side language. You could run the same eraseCache JS function, but instead of adding the meta tags, you need to add HTTP Cache headers:
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>
<!-- Here you'd start your page... -->
This method works immediately without the need for page reload because it erases the cache before the page loads and also before anything is run.
I wrote this javascript script and included it in the header (before anything loads). It seems to work. If the page was loaded more than one hour ago or the situation is undefined it will reload everything from server. The time of one hour = 3600000 milliseconds can be changed in the following line: if(alter > 3600000)
With regards, Birke
<script type="text/javascript">
//<![CDATA[
function zeit()
{
if(document.cookie)
{
a = document.cookie;
cookiewert = "";
while(a.length > 0)
{
cookiename = a.substring(0,a.indexOf('='));
if(cookiename == "zeitstempel")
{
cookiewert = a.substring(a.indexOf('=')+1,a.indexOf(';'));
break;
}
a = a.substring(a.indexOf(cookiewert)+cookiewert.length+1,a.length);
}
if(cookiewert.length > 0)
{
alter = new Date().getTime() - cookiewert;
if(alter > 3600000)
{
document.cookie = "zeitstempel=" + new Date().getTime() + ";";
location.reload(true);
}
else
{
return;
}
}
else
{
document.cookie = "zeitstempel=" + new Date().getTime() + ";";
location.reload(true);
}
}
else
{
document.cookie = "zeitstempel=" + new Date().getTime() + ";";
location.reload(true);
}
}
zeit();
//]]>
</script>
i had this problem and i solved it using javascript
location.reload(true);
you may also use
window.history.forward(1);
to stop the browser back button after user logs out of the application.
Source: Stackoverflow.com