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?
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.
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.
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);