When Javascript first started to be used on webpages, it had a very big advantage to it: It allowed the webpage to load information from the server asynchronously. These days you can make your webpage reload even without asking for the user’s permission, or by adding other features that improve the performance of your web app such as timing the reload etc. Let’s see below how we can do that!
1. Definition and Syntax
Javascript has a built-in method that reloads the current page from the cache, which is reload(). However, you can add more features to this method, such as making it load the content directly from the server by sidestepping the cache, automatically reloading after a fixed period of time, or performing the reload when the user clicks something such as a button, link or image. It’s syntax would go like below:
syntax.js
location.reload(forceGet);
As you see, this method take only one parameter, that being forceGet. This parameter’s format is a boolean value, which means it can be either TRUE or FALSE and is used to determine whether you want the reloading to happen from the cache or from the server. We mentioned before that by default the reload() method refreshes the document from the cache, which is only a temporary storing space where your browser stores data that are accessed often in order to speed up your searching. That would be the case if you give the FALSE value as an argument to the method, or even if you just don’t pass it an argument at all, since forceGet is optional. However, if you set it to TRUE, the browser will be forced to load the page directly from the server.
2. Refreshing when a button is clicked
The most basic way to refresh your page is by clicking a button, link or even image, if you want to make things fancy. We’ll show you the way to do it by clicking a button. Except for the button we are also putting an image in our document so that it is more visible when the refreshing has happened. The HTML code would go like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reload / Refresh</title>
<script src="index.js" rel="javascript"></script>
</head>
<body>
<button onclick="reloadMe()">Reload Page</button>
<img src="img/refresh.jpg" alt="JS-logo">
</body>
</html>
As you can see, except for the button and image, we have added a few more things. Those being having scripted an index.js file, which is where the Javascript part of the code will be, and also we have added an onclick attribute to our button. The value of said attribute is reloadMe(), which is the name of our custom function, as you can see for yourself below:
index.js
function reloadMe(){
location.reload();
}
This is how simply you can reload a document! But let’s add some more features.
3. Automatically refreshing
As we mentioned we can automatically refresh a document by adding a little bit of code into our Javascript file. The HTML code will be essentially the same, except for the button, which is now unnecessary and will be discarded. See for yourself:
autorefresh.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reload / Refresh</title>
<script src="autorefresh.js" rel="javascript"></script>
</head>
<body>
<img src="img/refresh.jpg" alt="JS-logo">
</body>
</html>
However, there will be changes in our Javascript. Let’s take a look at the code and then discuss it:
autorefresh.js
function autoReloadMe(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
window.onload = autoReloadMe(5000);
As you see we have created custom function named autoReloadMe() which takes an integer for an argument. This integer will be the time after which our page will be reloaded in milliseconds, which is why the parameter is called timeoutPeriod.
What our function does, in essence is just invoking another function which is built-in Javascript: setTimeout(). This function performs a certain action after a set period of time. It takes two arguments, the first being the Javascript code for the action that is to be performed, and the timeout period.
After defining our custom function, you see that we have used window.onload() to fire it, as we want the window to be loaded automatically and this way is easier than having to click anything. However, automatically loading a page can be at times very annoying or even downright inconvenient. How can we solve this?
4. Refreshing after confirmation
Say you want to automatically want to refresh your page after a set period of time. But what if the page the user is on is an editor, and if you refresh it right then, what your user wrote will be lost? How can you solve that? In order to not have your user want to murder you for ruining what was written, but also not giving up the benefits of reloading, you can first ask them and then, reload if you get their confirmation. The code for the HTML would be the same as in the first example, only changing the function that is executed when you click the button to confirmRefresh(). You just have to add a conditional in the Javascript file. The code would go like below:
autorefresh.js
function confirmRefresh() {
var acknowledgement = confirm("Do you want to refresh the page? Any unsaved changes may be lost!");
if (acknowledgement)
{
setTimeout("location.reload(true);",5000);
}
}
Firstly, we ask the user for confirmation on whether he wants us to reload the page he’s working on by using another built-in function for that such as confirm(). If that answer is Yes, we go on with the automatic reload after 5 seconds (or you can change the timeout period). Otherwise, we don’t do anything and just leave them to work in peace.
5. Download the source code
This was an example of Refresh / Reload in Javascript.
