Categories
javascript jquery refresh reload

How do I refresh a page using JavaScript?

2673

How do I refresh a page using JavaScript?

4

  • 33

    Since jQuery is a javascript framework for easy DOM-manipulation and event-binding, I would recommend you to ask for javascript instead of jQuery.

    – ˈvɔlə

    Aug 4, 2014 at 13:56

  • 22

    You don’t need jQuery for this.

    – Stardust

    Jan 1, 2016 at 17:59

  • 21

    More relevant than ever: needsmorejquery.com

    Aug 11, 2017 at 3:55

  • 2

    @Stardust You don’t need jQuery for anything which you do with jQuery because of everything possible with JavaScript if you can do it jQuery.

    Jul 19, 2019 at 4:42

4102

+50

Use location.reload().

For example, to reload whenever an element with id="something" is clicked:

$('#something').click(function() {
    location.reload();
});

The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false, so by default the page may reload from the browser’s cache.

5

  • 33

    This didn’t work for me. This worked though: window.location.href=window.location.href;

    – Yster

    Dec 8, 2015 at 9:20

  • 6

    This didn’t work for me. window.location.href=window.location.href; and location.href=location.href; worked.

    – twharmon

    Oct 6, 2016 at 6:40

  • 26

    window.location.reload(true); will hard refresh, otherwise by default it’s false

    Apr 25, 2017 at 6:39

  • Just run window.location.reload()!

    – user9258013

    Jan 26, 2019 at 15:00

  • 4

    @FaridAbbas location.reload(); is standard javascript. You don’t need jQuery for it.

    Jan 2, 2020 at 17:06

500

+400

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

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

5

  • 11

    +1 for the list and jsfiddle. I have a question, in jsfiddle 1 and 6 make the generated page to disappear for a moment as it being reloaded, and 2-5 make page reload being “unnoticeable”. In dev tool in chrome I can see the page being regenerated, but could you explain the redrawing process being defferent? please. Thank you in advance.

    – Cԃաԃ

    Jun 25, 2013 at 7:21

  • @Cԃաԃ I see no difference… Maybe the cache is the issue? I will take a look soon.

    Jul 9, 2013 at 15:22

  • 2

    1 and 6 (reload()/(false)) are slower. hmmm. interesting. 🙂 and 1 and 6 are the same as reload()‘s default parameter is false.

    – Cԃաԃ

    Jul 19, 2013 at 0:32


  • 1

    location.href = location.href is what I usually use, but thanks for the others. Very useful! +1

    Dec 25, 2013 at 16:10

  • 1

    @Cԃաԃ Finally I can reproduce what you see and I asked here.

    Dec 31, 2013 at 13:49

474

This works on all browsers:

location.reload();

1

  • If you’re wondering how well supported this is exactly, here’s the Can I use?

    – A Friend

    Oct 1, 2020 at 16:53