how to reload or refresh a webpage using javascript

When developing webpages for a website, you will often come across pages that updates much more frequently than others. One of the easiest way to ensure that the viewers get the latest content is to refresh the page automatically.

Although you could also rely on the users refreshing the page manually, it is sometimes desirable to reload the page automatically when there is new content.

One such example of a webpage would be the web scorecard of a live sporting event. Another would be a constantly updating news site. There could be plenty of other reasons why you would want to refresh the webpage, without relying on the user input to do so. In other scenarios, you might want to refresh the page in response to some user event.

There are several different ways to reload or refresh a webpage depending on the technology used to develop the webpage. For example, a meta tag in the header could be used to update the page. You can also use some simple JavaScript code to do that, which is probably one of the easiest way to do it.

First we will start with maybe even a simpler way to do it, using the HTTP meta tag. Lets’ say that we already know that the page needs to be refreshed constantly every 30 seconds, then we could use the meta tag as below. It is also referred to as the HTML meta refresh tag.

This meta tag goes inside the head tag of the HTML page source, as with all meta tags. The content attribute is used to set the time interval in seconds.

<meta http-equiv="refresh" content="30">

Obviously, this type of auto-refreshing has some major usability issues. The page get refreshed when the user does not want to, for example while in the middle of reading the content which can be quite annoying. Some web browsers also tend to get confused with the page history when such a redirects occur.

We will not explore other techniques because it is very much dependent on how you are coding the webpage. You could be using JSP or Java Servlet or PHP or any number of other technologies. We will explicitly look at how to refresh the page using JavaScript.

Using the javascript reload method to refresh the page

The most common way to refresh webpages using JavaScript is to use the reload method. The location variable or object on the page holds the current document location loaded on the window. So, calling the location() method will reload the page the same way the refresh button on the browser does.

You just need to call location.reload() from within your script code. However this method will refresh and load the page again from the web cache by default. That means it might have the latest information you want to display. But this method takes a boolean parameter that can be used to bypass the cache and force an update from the server.

So, in order refresh a webpage from cache, use

window.location.reload()

and to reload from the server again, use

window.location.reload(true);

Another way to do the same thing is to set an attribute of the location object called href. This attribute can be set to any valid location and that will force a reload of the window to the new location. You can however set this attribute to the same location as the current location, which will then trigger a refresh.

window.location.href = window.location.href;

Sometimes, you want to refresh the page without any user intervention, according to a pre-set time interval. The same way the meta tag that we explained previously works. This is probably ill-advised from a functionality and usability point of view, but let’s see how it can be done.

You can call the reload method (shown above) from with in a JavaScript function. That function is then invoked after a set time interval from the body tag of the page, by hooking onto the onload attribute.

<script>
function pageloadEvery(t) {
setTimeout('location.reload(true)', t);
}
</script>

<body onload="javascript:pageloadEvery(30000);">

This JavaScript code quite plain and simple supported by all web browsers and thus can be used irrespective of the JS framework that you might be using such as Dojo or JQuery etc.

Another more obvious use-case is to probably do a refresh based on some user event, like clicking a button or entering value into a form field etc. As there is no one specific use-case and that everybody’s requirement can vary widly, I will provide a simple example that could be used. However, you will need to modify it to suit your cause.

This example uses JQuery as the JavaScript framework which you can see is very similar to the vanilla JS solution.

$("#refreshButton").click(function() {
setTimeout(location.reload(true), t);
});

If you want to refresh just a part of the page and not the entire page, then you can use any of the Ajax techniques. The Javascript framework that you are using will have specific ways to do that as well. That is beyond the scope of this post and fodder for another post.