How do I refresh a page using JavaScript?

523

There are ~~multiple~~ unlimited ways to refresh a page with JavaScript:

location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)

If we needed to pull the document from the web-server again (such as where the document contents change dynamically) we would pass the argument as true.

You can continue the list being creative:

window.location = window.location
window.self.window.self.window.window.location = window.location
...and other 534 ways

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}

button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}

answered 2013-06-23T09:47:34.190

124

If you're using jQuery and you want to refresh the contents of a page asynchronously, then you can do the following:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

The approach here that I used was Ajax jQuery. I tested it on Chrome 13. Then I put the code in the handler that will trigger the reload. The URL is "", which means this page.

Note that this may not be what the asker meant by "refresh". Generally, in common usage, that term refers to reloading the page in the way that the browser would do if the user clicked the "Refresh/reload" button provided in the browser's user interface. However, this is not the only possible meaning of "refresh", and it may be preferred in a specific circumstance.

What this code does is get new and updated content to the page. It does this by making an asynchronous HTTP request for the new content, and then replacing the page's current content with the new asynchronously-loaded content. It has the result of refreshing the contents of the page, even though it works slightly differently.

You'll have to choose which one you actually want, and which works best for your specific use-case.

EDIT: The question has been changed to "using javascript" so this answer might not be the most accurate considering the current exact wording of the question.

answered 2011-09-30T11:00:30.473

How do I refresh a page using JavaScript?

2 Answers

Your Answer