How to Reload the Page in JavaScript

Reloading a page constantly using JavaScript is a simple task for web developers.

Whether you want to refresh content, update data, or trigger specific actions, JavaScript offers multiple methods to obtain this functionality.

In this article, we will discuss the different methods to reload a page in JavaScript, along with examples and best practices.

By the end, you will have a solid understanding of how to reload page in JavaScript and it will able to apply this knowledge to increase your web applications.

Understanding the Window Object

The window object is a global object in JavaScript that show the browser window or tab.

It provides different properties and methods to connect with the browser’s environment.

Understanding the window object is important when working with page reloading functions in JavaScript.

Methods on How to Reload the Page in JavaScript

Here are the following methods to reload the page in JavaScript:

Method 1: Reloading the Page Using location.reload()

The location.reload() method is a simple way to reload the current page. It refreshes the whole document, including all its resources.

Here’s an example code of how you can use it:

location.reload();

Using this method without any arguments will reload the page using the browser cache.

However, you can also force a full reload by passing true as an argument:

For example:

location.reload(true);

This is useful when you want to bypass the cache and get the latest version of the page.

Method 2: Reloading the Page Using location.href

The location.href property offer another method to reload the page. By assigning the present URL to itself, and the page reloads:

Here’s an example:

location.href = location.href;

Although this method obtained the proper result, it is not the recommended way for page reloading.

There are more effective and precise alternatives available.

Method 3: Reloading the Page Using location.assign()

The location.assign() method is the same to location.href and can be used to reload the page:

For example:

location.assign(location.href);

While this method works, it is less typically used for reloading pages and is better compatible for navigation purposes.

Method 4: Reloading the Page Using location.replace()

The location.replace() method enables you to reload the page while replacing the present entry in the browser’s history:

Here’s an example code on how to use the location.replace():

location.replace(location.href);

This method is useful when you want to reload the page yet it will avoid the user from navigating back to the previous state using the browser’s back button.

Method 5: Reloading the Page Using history.go()

The history.go() method enables you to navigate through the browsing history.

By passing a positive or negative integer as an argument, you can go forward or backward in history, appropriately:

// Go back one page
history.go(-1); 


// Go forward one page
history.go(1);

This method can be used to reload the page by going back and forth within the history stack.

However, it is not especially designed for page reloading.

Method 6: Reloading the Page Using setTimeout() and location.reload()

Combining the setTimeout() function with location.reload() enables you to schedule a page reload after a defined time interval:

For example:

setTimeout(function() {
  location.reload();
}, 3000);

This useful is useful when you want to provide a delayed page reload, such as displaying a message before refreshing the page.

Method 7: Reloading the Page Using Meta Refresh

The Meta Refresh HTML tag offers an automatic function to reload a page.

By revealing a time interval and the target URL, the page can be refreshed automatically.

Here’s the example code that uses the meta refresh:

<meta http-equiv="refresh" content="5;url=https://itsourcecode.com">

In this example code, the page will reload after 5 seconds and handle to “https://itsourcecode.com“.

However, it is important to remember that this method is considered outdated and has certain deficiency.

It is recommended to use JavaScript-based methods for better control and compatibility.

Method 8: Reloading the Page Using Form Submission

Reloading a page after submitting a form is a simple requirement.

You can obtain this by connecting an event listener to the form’s submit event and calling the submit() method on the form element:

Example code:

document.getElementById("mySampleForm").addEventListener("submit", function(event) {
  event.preventDefault(); 
  this.submit(); 
});

This method take the form submission event, restrain the default form submission action, and reloads the page using the submit() method.

Method 9: Reloading the Page Using AJAX

AJAX (Asynchronous JavaScript and XML) allows dynamic communication with the server without compelling a page reload.

However, you can use AJAX to reload a page by applying the XMLHttpRequest object:

Here’s an example code:

var data = new XMLHttpRequest();
data.open("GET", location.href, true);
data.onreadystatechange = function() {
  if (data.readyState === 4 && data.status === 200) {
    location.reload(); // Reload the page
  }
};
data.send();

In the above example, an AJAX GET request is built to the current page’s URL (location.href).

When the response is successfully received (readyState === 4 and status === 200), the page is reloaded using location.reload().

How to Reload a Page Without Losing Form Data?

Reloading a page while retaining form data can be obtained by using the sessionStorage or localStorage API.

Here’s an example code of how you can store and get a form data during page reloads:

var sampleForm = document.getElementById("mySampleForm");
form.addEventListener("change", function() {
  sessionStorage.setItem("formData", JSON.stringify(Object.fromEntries(new FormData(sampleForm)))));
});

document.addEventListener("DOMContentLoaded", function() {
  var formData = JSON.parse(sessionStorage.getItem("formData"));
  if (formData) {
    Object.entries(formData).forEach(function([name, value]) {
      document.getElementsByName(name)[0].value = value;
    });
  }
});

In this example code, the form data is stored in the sessionStorage object whenever a change appears.

During a page load, the stored form data is redeemed and populated back into the corresponding form fields.

How to Trigger a Reload on Button Click?

Triggering a page reload on a button click event is a simple requirement.

You can carry out this by attaching an event listener to the button’s click event and calling the proper reload method:

Here’s an example code:

document.getElementById("reloadButton").addEventListener("click", function() {
  location.reload(); 
});

This method listens for the button’s click event and reloads the page when the button is clicked.

How to Auto-Reload a Page Periodically?

Automatically reloading a page at regular intervals can be useful for demonstrating real-time data or updating content.

You can solve this using the setInterval() function combined with the complete reload method:

setInterval(function() {


// Reload the page
  location.reload(); 

// It will reload every 60 seconds
}, 60000);

In this example code, the page will be reloaded every 60 seconds (60000 milliseconds).

How to Detect Page Reload in JavaScript?

Detecting a page reload event can be valuable for executing explicit actions only when the page is reloaded.

You can achieved this by checking the performance.navigation API:

if (performance.navigation.type === 1) {
  console.log("Page reloaded");
}

The performance.navigation.type property returns 1 if the page is reloaded.

You can use this condition to perform several tasks that should only execute on page reload.

How to Reload the Parent Page from an iFrame?

If you have an iFrame inserted in your web page and want to reload the parent page from within the iFrame, you can use the window.top property:

Here’s an example code:

window.top.location.reload();

This method enables you to reload the parent page from any nested iFrame within your web application.

How to Reload a Specific Frame?

In cases where your web page consists of multiple frames or iframes, you may need to reload a specific frame without affecting others.

You can obtained this by accessing the proper frame’s contentWindow property and calling the reload method:

var sampleFrame = document.getElementById("mySampleFrame");
sampleFrame.contentWindow.location.reload();

In this example code, the frame with the ID “mySampleFrame” is reloaded using its contentWindow.location.reload() method.

How to Prevent Page Reload on Form Submission?

Preventing a page reload on form submission can be useful when you want to manage the form data without refreshing the page.

You can obtained this by attaching an event listener to the form’s submit event and calling the preventDefault() method:

document.getElementById("mySampleForm").addEventListener("submit", function(event) {
  event.preventDefault(); 

});

This methods prevents the default form submission action, enabling you to handle the form data or perform other actions without reloading the page.

How to Reload a Page on Back Button Click?

Reloading a page when the user clicks the back button can be essential in exact cases.

You can obtained this by listening for the popstate event and calling the proper reload method:

window.addEventListener("popstate", function() {
  location.reload(); 
});

This methods detects the back button click event and triggers a page reload.

How to Reload a Page on Forward Button Click?

Similar to the back button click, you may want to reload a page when the user clicks the forward button.

Example code that uses popstate event:

window.addEventListener("popstate", function() {
  if (history.state !== null) {
    location.reload(); // Reload the page on forward button click
  }
});

This methods detects the forward button click event and reloads the page only if there is a history state.

Common Mistakes and Troubleshooting Tips

When implementing page reloading in JavaScript, it’s necessary to be aware of common mistakes and troubleshooting tips.

Here are the several tips to help you to resolve the possible issues:

• Ensure that you are using the proper reload method for your specific use case.
• Be watchful with caching structure to ensure the latest version of the page is loaded.
• Test your page reloading functionality in various browsers to ensure cross-browser compatibility.
• Double-check any event listeners or conditions that may prevent with the proper reload action.
• Use proper error handling and consider edge cases to avoid unexpected action.

FAQs

Conclusion

In conclusion, reloading a page in JavaScript is a simple task in web development.

In this article, we have discussed the different methods How to Reload the Page in JavaScript.

From simple methods like location.reload() to more advanced methods like AJAX and form submission, we covered a wide range of options.

Additional Resources

Here are the following articles that can help you to understand and learn more about JavaScript:

• How to Remove an Item from Cart in JavaScript
• How to call JavaScript function in html without button
• How to take user input in JavaScript without prompt