How to Refresh a Web Page with JavaScript

To Refresh, or to Reload a web page means to load a web page again after it loaded for the first time in the web browser window. Imagine that you visited a website and landed on its homepage. If you refresh the page now, it will be loaded again in the browser window. The difference between a first load and a reload (refresh) is that in the first loading of the page, all resources associated with that page (HTML, images, scripts) are downloaded to the browser cache, whereas in the reload, only the HTML (and any changed resources) is downloaded; the static images and scripts are accessed from the cache.

Refreshing a page programmatically, from the server side or the client (browser) side, has the same effect like hitting the refresh button in your web browser such as Chrome or Firefox. During the refresh, the page and any necessary resources will be re-downloaded and displayed in the window. If there has been any changes to the page content between the first load and the second load, that will be reflected into the new view.

Refreshing the page is something the email services do a lot, for refreshing the Inbox to tell you if you have any new emails awaiting or for changing the displayed ads from time to time.

TIP: Refreshing a web page is not to be confused with clearing the browser history.

The client side programmatic refreshing can be accomplished via JavaScript, which we will see in detail below.

How Does JavaScript Page Refresh Work

A web page can be refreshed using the reload() method of JavaScript like the following:

document.location.reload();

Simply edit the page and insert the above code within <script> tags. You can omit document and simply have:

location.reload();

Both of the above lines will refresh the current web page the script is on. If you want to refresh a different object (e.g. an iframe), replace document with that element.

The reload() method has an optional parameter which can take true or false values. If the value is true, it means the page will be reloaded from the server; if the value is false or empty, it means the page will be reloaded from the browser cache.

// Reload the page from server
location.reload(true);

// Reload the page from browser cache
location.reload(false);

Also keep in mind that after a server reload, the scroll position is not preserved and it is set to the top like a fresh load.

JavaScript Refresh Page Examples

Page refreshing can find its application in many areas such as login pages, product pages, auctions, exams, quizzes, contact pages, data tables that are updated periodically and anything else that comes to your mind that may need a reload in certain situations. You can use one of the refresh methods below for such cases.

1. Refresh a Page Periodically

If you want to refresh a web page periodically, say every 10 seconds, you can use the following code:

setTimeout(function() { location.reload() }, 10 * 1000);

Change the seconds value (10) as you wish.

2. Refresh a Page Only Once, After a Certain Time

The code in the first example will continuously refresh the page. We need to refresh it only once, therefore we need a mechanism to keep track of the refresh. We will use localStorage for this purpose.

if (!localStorage.refreshed) {
  localStorage.refreshed = true;
  setTimeout(function() { location.reload() }, 5 * 1000);
}

The above code will refresh the page only for once, 5 seconds after the first page load. You can name the local storage variable (refreshed) as you wish.

3. Refresh on User Action (e.g. a Click)

If you want to refresh the page on a user action, say a button click, you can use the following code:

document.getElementById("refresh").onclick = function() {
  location.reload();
};

You need to have a button with the id (refresh) on the page.

4. Refresh Button Example

The following button will refresh this page for once if you click on it.

Refresh

You may use page refreshes after email submission or after downloading a file, you may use page refreshes if required form fields are not filled on a web form or if a video embed is not playing correctly. You may use a page refresh based on HTTP status codes. You may also use a page redirect after or instead of a page refresh where applicable.

As you see, JavaScript refresh is a quite useful thing to have in our toolset. However, you should also keep in mind that unexpected or frequent refreshes are considered among bad web design practices; hence, it should be used responsibly.

f t g+ in