Skip to main content

How to Refresh or Reload Page using JavaScript

Updated on: coderszine team JavaScript, Tutorial

In this tutorial, you will learn how to refresh or reload page using JavaScript.

Sometimes we need to refresh or reload page of a website to load data. As the page refresh or reload is related to client side programming, so we can easily do this using JavaScript. There are methods in JavaScript such as location.reload(), location.href, history.go(0) in JavaScript to load page as per our requirement. We can set timeout or interval to load or refresh page on every given time.

Also, read:

So here we will explain different ways with examples to handle page refresh or reload using JavaScript.

1. Manually Reload Page with JavaScript

In manual page reload, we can implement the page reload functionality when user click a button. In below example code, we have created a button element and called a function reloadPage() on onclick event.

<input type="button" onclick="reloadPage()" value="Reload Page" />

In function reloadPage(), we have called location.reload() method to reload page.

<script>
function reloadPage(){
  location.reload(); 
}
</scirpt>

2. Manually Reload Page with jQuery

We can also implement manual page reload using JavaScript libraray jQuery. In below example, we have created an button element with id page_reload_button. We will call function reloadPage() when button clicked. 

<input id="page_reload_button" type="button" value="Reload Page" />

We will implement jQuery click event and call function reloadPage() when button clicked to reload the page. 

<script>
$(document).ready(function() {
  $('#page_reload_button').click(function () {
    reloadPage(); 
  });
});

function reloadPage(){
  location.reload(); 
}
</scirpt>

3. Automaticaly Load Page with JavaScript

We can refresh or reload the page automatically using timer. We can use the setInterval() function to set the time interval to refresh or reload the page.

<script>
function reloadPage(){
  location.reload(); 
}

setInterval('reloadPage()', 1000);

</scirpt>

We can also use the setTimeout() to time interval for page refresh automatically.

setTimeout(function(){
  reloadPage();
},10000);

4. Automaticaly Refresh or Reload Page with jQuery

We can also implement the auto page refresh or reload using jQuery. We will call the function reloadPage() when page is loaded like below example.

<script>
function reloadPage(){
  location.reload(); 
}

$(document).ready(function() {
  setInterval('reloadPage()', 10000);
});

</scirpt>

We can also implement auto page refresh or reload with jQuery by calling function setTimeout() to load function on time interval.

<script>
$(document).ready(function() {
  setTimeout(function(){
    reloadPage();
  },10000);
});
</scirpt>

5. Auto Refresh or Reload Page using history.go() in JavaScript

We can also handle the page refresh using window.history property. As the JavaScript window object has history property and we can this to refresh the page. The history.go(0) is used for soft page refresh as it loaded page from the browsers cached, stored somewhere in memory. Here we have used history.go(0) to refresh the page.

<script> 
  history.go(0);  
</scirpt>

6. Auto Refresh or Reload Page using window.location.href in JavaScript

The window.location.href can be used to reload the page as it just change the URL of page and page reloaded. But unlike location.reload() which resend POST data if exists (the browser will ask you if you want to reload the page and resend the data), the window.location.href just change the page URL and ignores POST data. 

<script>
  window.location.href = window.location.href;
</scirpt>

You may also like: