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.

using html meta tag

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 redirect occur.

We will not explore very many 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. However we will explicitly look at how to refresh the page using JavaScript.

Using the reload method in JavaScript to refresh the page

The most common way to refresh webpages using JavaScript is to use the reload method. The location variable 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 not 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 using JavaScript from cache, use

window.location.reload()

and to reload from the server without using the cache, 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 in JavaScript, 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.

using a timer in JavaScript to refresh the page

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 is quite plain and simple supported by all web browsers and thus can be used irrespective of the JavaScript framework that you might be using such as Dojo or JQuery etc.

event based reload in JavaScript

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 single specific use-case and that everybody’s requirement can vary widely, I will provide a simple example in JavaScriptthat could be used with an event. 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 JavaScript 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.