how to reload or refresh a webpage using javascript

When developing websites and webpages, you will come across some 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. You could also rely on the users refreshing the page manually.

One such example of a webpage would be 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. You can 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 is a major usability issue. 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 history when such a redirects occur.

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. This method will refresh and load the page again from the web cache. 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


and to load from the server again, use


The location object has an attribute called href, which 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. 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.

function pageloadEvery(t) {
setTimeout('location.reload(true)', t);

<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 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 framework which you can see is very similar to the vanilla JS solution.

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