We can take the example of a sports website showing a live score of a sporting event. You can also take the example of a news portal where news updated as soon as they arrive.
Besides these examples, there can be plenty of reasons for you to opt for an automatic refresh for your web page. In some cases, you want to refresh the page as a response to a specific action from the user.
When it comes to reloading the web page automatically for the users, there are plenty of methods to choose from. However, using a simple JavaScript code is highly recommended since there is nothing complicated about it. It is effortless.
Reload page with Meta tag
However, before we see the JavaScript example, we can take a look at the good old HTML meta tag method. Let’s assume that you need to refresh the page every 30 seconds. Let’s take a look at the following example to understand this better. Moreover, it is also referred to as an HTML meta refresh tag.
We have this meta tag inside the head tag of the HTML code, as in the case of every other meta tag. To set the time interval in seconds, we use the content attribute.
<meta http-equiv="refresh" content="30">However, this method brings its problems to the table. Users might find it irritating and inconvenient when the refreshing happens as they are in the middle of reading the content on the page. Moreover, some browsers experience trouble in sorting history when redirects happen like this.
JavaScript reload page explained
Now we will see how to refresh web page using JavaScript. However, when it comes to the JavaScript method, we opt for the reload method. The location object/variable has information on the current location of the browser window. In that case, the location() method works like the refresh button on the browser. You will be opting for location.reload() within the JavaScript code.
This method will refresh the page before loading the page from the web cache. Here, in this case, the method accepts a Boolean parameter. We will be using this to bypass the cache. It will also force an update from the server. Let’s see more of JavaScript refresh page method.
So, here is how we will invoke this method in JavaScript:
window.location.reload()Also, to load from the server again:
window.location.reload(true);The location object comes with an attribute named href. This attribute can take any valid location. Also, when you refresh the page, this location will be loaded. To make refresh happen, you need to set the current location to the href attribute. Take a look at the following code to get an idea:
window.location.href = window.location.href;In some cases, you want the page to be refreshed without any user intervention. Then you need to set a pre-set time interval. As we have already maintained, this is not at all recommended due to several reasons. Whether we look at it from the usability or functionality point of view, this is not a smart idea. However, we understand the compulsion. So let’s see how we can enforce the same using JavaScript.
We are going to call the above mentioned reload method inside a JavaScript function. Moreover, this function can be invoked after a certain time interval from the body tag. Here we will be attaching this method to the onload attribute.
<script>
function pageLoad(time) {
setTimeout('location.reload(true)', time);
}
</script>
<body onload="javascript:pageLoad(20000);">The JavaScript code we have given here is quite simple. So it is supported across all the web browsers. Also, you will be able to use it irrespective of the JS framework that you might be using, whether it is jQuery, Dojo, etc.
Different users have different requirement. In some cases, they want the refresh to be triggered by an action from the users, be its simple click on a button or entering the specific value on a text field soon. Yeah, as we have maintained, different people have different needs. However, we are going to provide a simple solution which can be used by everyone.
You may modify this to suit your needs.
Here we have used jQuery as the framework. As you know already, it is similar to vanilla JS solution.
$("#btn").click(function() {
setTimeout(location.reload(true), time);
});