Difference between window.location.href=window.location.href and window.location.reload()

Question

What is the difference between JavaScript's

window.location.href = window.location.href

and

window.location.reload()

functions?

score 283 · Accepted Answer · edited Jun 04 '14 at 07:41

283

If I remember correctly, window.location.reload() reloads the current page with POST data, while window.location.href=window.location.href does not include the POST data.

As noted by @W3Max in the comments below, window.location.href=window.location.href will not reload the page if there's an anchor (#) in the URL - You must use window.location.reload() in this case.

Also, as noted by @Mic below, window.location.reload() takes an additional argument skipCache so that with using window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite, and load the page from cache if possible.

edited Jun 04 '14 at 07:41

Willem Mulder

12,974
3
37
62

answered Mar 08 '10 at 22:14

David Johnstone

24,300
14
68
71

12

note that when you use window.location.reload() on a POST the browser will ask you if you want resend the data to reload the page – wimh May 01 '10 at 15:27
3

@Wimmel, is there a way to disable this message ? – TheBoubou Oct 04 '10 at 11:39
43

window.location.href=window.location.href will not reload the page if there's an anchor (#) in the URL - You must use window.location.reload() in this case. – W3Max May 24 '12 at 15:34
6

Also note that location.reload() will also force reload all static content (much like a ctrl+f5 style hard refresh) whereas setting location.href back to href (or pathname or URL) does not, which could be a significant (and unnecessary) difference in load time on some pages. – Rob Van Dam Jan 24 '13 at 02:51
2

@Wimmel Chrome: reloads the page with a GET Firefox: re-executes the previous request, meaning if it was a POST, you'll get the nice popup asking you about whether to resend the data or not – Juri Feb 12 '13 at 15:59
If you need to modify the url without reloading and without a '#' you could use window.history.pushState(state, title, URL); – joseantgv Jul 18 '15 at 09:11
1

You can use `location.href=location.search` and it will work even with `#` in URL. – Nux Sep 05 '17 at 21:18

score 55 · Answer 2 · edited Jan 18 '18 at 07:54

55

If you say window.location.reload(true) the browser will skip the cache and reload the page from the server. window.location.reload(false) will do the opposite.

Note: default value for window.location.reload() is false

edited Jan 18 '18 at 07:54

Pradeep Kumar

4,065
2
33
40

answered Mar 08 '10 at 22:10

Mic

24,812
9
57
70

6

@Ismail - The default is false. – Trevor Mar 01 '11 at 18:42
2

Google Chrome 32, while using webRTC the true/false did not worked for me. I had a iframe with webRTC and only using `window.location.href = window.location.href` did the trick. – Feb 03 '14 at 07:37
If you have made changes to a form on the page, the changes _may_ disappear (revert to cached values) depending on the browser when using `location.reload()` or `location.reload(false)`. To do a complete refresh of the page, use `location.reload(true)`. – Suncat2000 Sep 15 '17 at 12:39
Note that the `forceGet` parameter for `location.reload()` is [only available in Firefox](https://developer.mozilla.org/en-US/docs/Web/API/Location/reload#location.reload_has_no_parameter)! – Venryx Feb 02 '22 at 14:04

score 33 · Answer 3 · answered Feb 23 '11 at 13:36

33

The difference is that

window.location = document.URL;

will not reload the page if there is a hash (#) in the URL (with or without something after it), whereas

window.location.reload();

will reload the page.

answered Feb 23 '11 at 13:36

Fabien Ménager

140,109
3
41
60

2

Not all browsers have this issue with ending hases. If ending hashes are a concern for you, try: window.location = document.URL.replace(/#$/, ''); – Walter Stabosz Aug 14 '12 at 20:21
1

At least Chrome is concerned. I used to take `location.href = location.href` for granted, but I just noticed that exact behavior and came to SO to spread the word. Just use `location.reload()` instead. – aaaaaa Oct 11 '12 at 10:22
1

You can also use window.location.pathname instead of writing such regular expression. For example: `window.location.replace(window.location.pathname);` – Arseny Nov 06 '12 at 17:19

mplungjan · Answer 4 · 2012-12-19T22:30:37.677

20

If you add the boolean true to the reload window.location.reload(true) it will load from server.

It is not clear how supported this boolean is, W3Org mentions that NS used to support it

There MIGHT be a difference between the content of window.location.href and document.URL - there at least used to be a difference between location.href and the non-standard and deprecated document.location that had to do with redirection, but that is really last millennium.

For documentation purposes I would use window.location.reload() because that is what you want to do.

edited Dec 19 '12 at 22:30

answered Feb 23 '11 at 13:24

mplungjan

169,008
28
173
236

Look at http://stackoverflow.com/a/5091619/429972 since this explains the difference. – jontro Aug 07 '12 at 12:37

score 15 · Answer 5 · edited Feb 18 '15 at 09:43

15

As said, modifying the href when there is a hash (#) in the url would not reload the page. Thus, I use this to reload it instead of regular expressions:

if (!window.location.hash) {
    window.location.href = window.location.href;
} else {
    window.location.reload();
}

edited Feb 18 '15 at 09:43

hitesh upadhyay

264
1
9

answered Jun 13 '13 at 08:48

minterior

381
3
6

score 6 · Answer 6 · answered May 16 '12 at 06:49

6

A difference in Firefox (12.0) is that on a page rendered from a POST, reload() will pop up a warning and do a re-post, while a URL assignment will do a GET.

Google Chrome does a GET for both.

answered May 16 '12 at 06:49

mrj

65
1
3

1

Chrome 38 now seems to use POST for .reload(). – Glen Little Sep 19 '14 at 22:42

score 6 · Answer 7 · answered Sep 19 '11 at 22:12

Came across this question researching some aberrant behavior in IE, specifically IE9, didn't check older versions. It seems

window.location.reload();

results in a refresh that blanks out the entire screen for a second, where as

 window.location = document.URL;

refreshes the page much more quickly, almost imperceptibly.

Doing a bit more research, and some experimentation with fiddler, it seems that window.location.reload() will bypass the cache and reload from the server regardless if you pass the boolean with it or not, this includes getting all of your assets (images, scripts, style sheets, etc) again. So if you just want the page to refresh the HTML, the window.location = document.URL will return much quicker and with less traffic.

A difference in behavior between browsers is that when IE9 uses the reload method it clears the visible page and seemingly rebuilds it from scratch, where FF and chrome wait till they get the new assets and rebuild them if they are different.

window.location = document.URL reloads the page just like window.location.reload(). Is there a state of the art for refreshing without scrolling back to the top, or imperceptibly as you said? — bigmugcup, Nov 04 '18 at 15:24

score 3 · Answer 8 · edited May 23 '17 at 10:31

Using JSF, I'm now having the issue with refresh after session is expired: PrimeFaces ViewExpiredException after page reload and with some investigation I have found one difference in FireFox:

Calling window.location.reload() works like clicking refresh icon on FF, it adds the line

Cache-Control max-age=0

while setting window.location.href works like pressing ENTER in URL line, it does not send that line.

Though both are sent as GET, the first (reload) is restoring the previous data and the application is in inconsistent state.

score 1 · Answer 9 · answered Feb 23 '11 at 13:23

1

No, there shouldn't be. However, it's possible there is differences in some browsers, so either (or neither) may not work in some case.

answered Feb 23 '11 at 13:23

Olli

1,231
15
31

score 1 · Answer 10 · answered Feb 23 '11 at 13:24

from my experience of about 3 years, i could not find any difference...

edit : yes, as one of them here has said, only passing a boolean parameter to window.location.reload() is the difference. if you pass true, then the browser loads a fresh page, but if false, then the cache version is loaded...

Metro Polisue · Answer 11 · 2019-10-13T10:22:30.633

In our case we just want to reload the page in webview and for some reasons we couldn't find out why! We try almost every solution that has been on the web, but stuck with no reloading using location.reload() or alternative solutions like window.location.reload(), location.reload(true), ...!

Here is our simple solution :

Just use a < a > tag with the empty "href" attribution value like this :

< a href="" ...>Click Me</a>

(in some cases you have to use "return true" on click of the target to trigger reload)

For more information check out this question : Is an empty href valid?

score -4 · Answer 12 · answered Apr 27 '18 at 13:36

-4

window.location.href, this as saved my life in webview from Android 5.1. The page don't reload with location.reload() in this version from Android.

answered Apr 27 '18 at 13:36

Rony Silva

3
2

Difference between window.location.href=window.location.href and window.location.reload()

12 Answers12

Linked

Related