Is there a way to reload a page using JavaScript and still clear the cache, ensuring that the refreshed page shows the latest content from the server? It seems that other browsers are not displaying the most up-to-date versions of the content.
Anyone have a solution specifically for IE9?
refresh() allows for a hard reload by passing an argument to bypass the cache:
window.location.reload(true);
Its reliability is uncertain, so further investigation may be necessary.
Note (2021): This parameter was never standardized and has since been phased out in modern browsers. Continuously mentioning this in comments is not helpful.
There are several ways to achieve this. Firstly, you can easily add the following meta tag to your head:
<meta http-equiv="Cache-control" content="no-cache">
If you want to specifically remove a document from the cache, you can use the expires meta tag and set its content attribute to -1 like this:
<meta http-equiv="Expires" content="-1">
For additional information on this topic, please refer to:
In order to ensure that Internet Explorer (IE) displays the latest content for your main page, you can append a dummy parameter at the end of URLs for external documents such as CSS and JavaScript files. This parameter should be the current time in milliseconds to guarantee that IE always serves the most recent version. Here is an example:
<script src="mysite.com/js/myscript.js?12345">
UPDATE 1
Based on feedback received, if you wish to programmatically clear the cache only when necessary, you can create a JavaScript function like:
eraseCache(){
window.location = window.location.href+'?eraseCache=true';
}
You can then implement corresponding logic in PHP as follows:
<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>
Please note that while this code has not been tested, it should effectively serve the purpose. Essentially, when the JS function is triggered, it reloads the page with a GET parameter at the end of the URL. Your backend system would then detect this parameter and include appropriate meta tags and cache variable containing a timestamp for scripts and CSS causing caching problems.
UPDATE 2
It's important to clarify that the meta tag alone will not clear the cache upon page load. To address this, you may need to run the eraseCache function in JavaScript once the page loads and again to ensure the changes take effect. Alternatively, you can handle this server-side by adding HTTP Cache headers like so:
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>
<!-- Begin your page content here... -->
This approach immediately clears the cache before page loading and execution, ensuring that updates are reflected without requiring a page reload.
After encountering this issue, I managed to resolve it by implementing a solution with JavaScript.
location.reload(true);
In addition, another option is:
window.history.forward(1);
This method can prevent the browser's back button from functioning once a user has logged out of the application.
Due to the behavior of asp.net controls, I encountered an issue where reload() was not effective in my case. In order to address this problem, I opted for a workaround solution that involved clearing the location of the window.
self.clear = function () {
//location.reload(true); Doesn't work in IE or Firefox;
//Additionally, hash tags needed to be removed to prevent postback issues.
window.location.href = window.location.href.replace(/#.*$/, '');
};
This javascript script was created by me and placed in the header, loading before anything else on the page. It appears to be functioning correctly. If the page has been loaded for more than an hour or if the situation is undefined, everything will be reloaded from the server. The time interval of one hour, which equals 3600000 milliseconds, can be adjusted within the code snippet below:
Best 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 am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...
Looking for some guidance on creating an HTML form with two input fields. Check out the HTML template code below: <form role="form" action="/cities/" method="get" autocomplete="on"> <label for="#input1"><strong>Country:</strong&g ...
I want to switch up the site's style with just a click on an icon <head> <meta charset="utf-8"> <link rel="stylesheet" href="styled.css" id="styles"> </head> Everytime I try to tackle th ...
I am using a global Modal component: export const ModalProvider = ({ children }: { children: React.ReactNode }) => { const [isModalOpen, setIsModalOpen] = React.useState(false); const [config, setConfig] = React.useState<ModalConfig | nu ...
Having a simple problem here, I am attempting to dynamically populate check-boxes in an HTML form. However, when I try using the checked property of the checkbox in HTML, it doesn't work correctly. The checkbox remains checked whether I use checked=&a ...
I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...
I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...
I have a scenario where I am checking if the browser tab is closed using the code below. It currently works with windows dialog, but I would like to incorporate MatDialog for confirmation instead. @HostListener('window:beforeunload', ['$eve ...
Issue: When using ajax driven pagination to load canvas based portfolio items, script tags are not within the canvas tags. Attempted Solution: Tried placing script tags before canvas tags, but scripts still did not load (seems to be a loading script issue ...
I am attempting to utilize the $resource service with the surveygizmo API. Here is my code: HTML : <div ng-app="Survey"> <body> <div ng-controller="SurveyCtrl"> {{survey.data.title}} </div> </body> </div> My scr ...
This is the webpack configuration for my React project built in TypeScript, module.exports = { mode: 'development', entry: ['./src/main.tsx'], module: { rules: [ { // Rule for ts/tsx files only, no rule for js/js ...
In C#, the following code would be used: double progress = 0; while (progress < 100) { var result = await PerformAsync(); progress = result.Progress; await Task.Delay(); } This concise piece of code spans just 7 lines. Now, how can we ...
I am tasked with displaying different components at specific times by iterating through them. Below is an example of how I have attempted to achieve this. The components I can use are determined by the server. <ngb-tabset [activeId]="1"> ...
Looking to develop a versatile wrapper or JS plug-in that can parse HTML content and locate tables within the files, allowing users to generate visual graphs like pie charts and bar graphs. The challenge lies in the fact that the HTML structure is not fixe ...
Currently, I am utilizing NextJS for server-side rendering and looking to secure certain "admin" pages where CRUD operations on my DB can be performed. After successfully implementing authentication on my website using passport and next-connect based on a ...
After setting up my routes.ts file to store protected routes, I encountered an issue with dynamic URLs not being properly secured. Even though regular routes like '/profile' were restricted for unauthenticated users, the dynamic routes remained a ...
Upon installing Vuetify, I encountered an error in the console. My webpack version is v3.6 Uncaught TypeError: Cannot read property 'extend' of undefined at Module../src/mixins/themeable/index.ts (index.ts:21) at __webpack_require__ (boo ...
I am working on an application that utilizes axios for communication with a node server, which then interacts with a separate java server. Calling the node server from the client: // assuming payload is of type FormData() axios.post(url, payload).then((r ...
I am puzzled by the usage of nextElementSibling in this code. Can someone provide an explanation on what exactly it is and where it should be used? Thank you in advance! Also, my code seems to be malfunctioning as I keep receiving an error message that s ...
There are two radio buttons, each accompanied by an input text field. When a user selects a radio button, they can also enter some corresponding text. My inquiry is: What is the best method to retrieve the entered text for the selected radio button? ...