How do I refresh a page using JavaScript?

Matthew C.

The Problem

You want a page to refresh. You may want to do this to get new data after a user performs a certain action. How can you do this using JavaScript?

The Solution

There are two Web API methods for refreshing a page: location.reload() and history.go(). These methods are not part of the JavaScript language but are used with JavaScript.

Using location.reload()

The read-only properties window.location and document.location (which is the same as window.document.location) return a Location object, which contains information about the current URL. The Location object has a reload() method that can be used to reload the current page. For example, reload() can be used to refresh a page using a “Refresh page” button:

<button id="btnRefresh" type="button"> Refresh page </button>

The "Refresh page" button element is selected and stored in a variable. You can then add a "click" event to it:

const refreshBtn = document.getElementById("btnRefresh"); function handleClick() { window.location.reload(); } refreshBtn.addEventListener("click", handleClick);

The page is refreshed when the “Refresh page” button is clicked.

Using history.go()

Alternatively, you can refresh a page using the history.go() method to load a specific page from the session history or to go backward or forward through the session history. This method takes in a single argument, delta, that indicates the position in history to move to, relative to the current page. A negative delta value moves backward in the session history, and a positive value moves forward. If you add no argument or set delta to 0, the history.go() method has the same effect as calling location.reload() and the current page will reload.

We can replace window.location.reload() in our previous code example with history.go() like this:

const refreshBtn = document.getElementById("btnRefresh"); function handleClick() { history.go(0); } refreshBtn.addEventListener("click", handleClick);

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.104.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Check our documentation for the latest instructions.

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.