Javascript: How to truly reload a site with an anchor tag?

Question

Take this code snippet for example:

window.location.href = 'mysite.htm#images';

Already being on the site mysite.htm and triggering the reload thru location.href won't reload the page but jump to the anchor named within the URL.

I need a mechanism to truly reload the page. Any ideas?

PS: I tried location's other methods but none of them does the trick :(

EDIT
Don't hang on the filetype htm. I'd need it for dynamic sites as well.

So you want to reload the page, AND then jump to the name-anchor? — Pbirkoff, Feb 23 '10 at 14:53

score 57 · Accepted Answer · answered Feb 23 '10 at 14:55

57

After you set the specified URL into location, issue window.location.reload(true). This will force browser to reload the page.

answered Feb 23 '10 at 14:55

alemjerus

8,023
3
32
40

1

I'm finding this causes the page to reload the page's original URL, not the one that was just set. (I agree that it should work as you describe, though.) – Brilliand Apr 28 '20 at 22:24
That will cause browser to do full reload of *everything* with HTTP header `Pragma: no-cache` which causes much more to be downloaded but just the host document (usually HTML page) as expected. – Mikko Rantalainen Nov 16 '20 at 13:30
1

Also note that according to the documentation at https://developer.mozilla.org/en-US/docs/Web/API/Location/reload the `reload()` does not take any arguments. – Mikko Rantalainen Nov 16 '20 at 13:31
Also note that according to spec you *may* get an old copy from the cache or a new copy from the server depending on the user agent: https://html.spec.whatwg.org/multipage/history.html#dom-location-reload - the spec only says that "User agents **may** allow the user to explicitly override any caches when reloading." – Mikko Rantalainen Nov 16 '20 at 13:38
I found this would repeat a `POST` if that was the previous request, whereas I wanted a `GET`. I therefore used `` from here: https://stackoverflow.com/questions/8174282/link-to-reload-current-page#15424546 – SharpC Jan 14 '21 at 09:17

score 10 · Answer 2 · answered Feb 23 '10 at 14:53

10

use the query part of the URL to add a random string:

// Use a timestamp to make sure the page is always reloaded
window.location.href = 'mysite.htm?r='+(+new Date())+'#images';

answered Feb 23 '10 at 14:53

Andy E

338,112
86
474
445

score 6 · Answer 3 · answered Feb 20 '15 at 03:54

While I feel alemjerus's answer is on the good direction, it doesn't work when the new URL points to different page, at least on my Chrome v40.

Example, when the new URL just add an anchor, it works fine:

var redirectToURL = '/questions/2319004/javascript-how-to-truly-reload-a-site-with-an-anchor-tag#answer-28621360';
window.location.href = redirectToURL;
window.location.reload(true);

But when it points to a different page, user will still stay on the current page after reload. (Run the following codes in a batch, no delay between location.href= and location.reload):

var redirectToURL = 'http://stackoverflow.com';
window.location.href = redirectToURL;
window.location.reload(true);

In this case, remove the location.reload works. So my workaround is to check whether new URL is on the same page:

var urlParser = document.createElement('a');
urlParser.href = redirectToURL;
if (urlParser.origin + urlParser.pathname === location.origin + location.pathname) {
    window.location.reload(true);
}

Tested on Chrome and Safari, haven't tried IE. Kindly let me know if it doesn't work on any major browser.

score 3 · Answer 4 · answered Feb 23 '10 at 14:52

3

You could be a cheater and append a randomized query string, redirecting to "mysite.htm?random=289954034#images".

But if this is a static page, as .htm implies, what do you need reloading for? If it's so that your onload Javascript can occur a second time, maybe you just need to change your application's flow.

answered Feb 23 '10 at 14:52

Matchu

83,922
18
153
160

1

Don't let the extension fool you. You can just rewrite urls to make them look like they are html files. – Jage Feb 23 '10 at 14:55
It's true, but only rarely have I seen a rewriter choose `.htm` over `.html`. That's why I chose the word "implies" :) – Matchu Feb 23 '10 at 14:56
It's not about static vs. dynamic pages when AJAX comes into play. Think about it. – aefxx Feb 23 '10 at 14:58
...eh? Then you shouldn't need to refresh the page if you're using AJAX... I should probably just not try to analyze someone else's system without knowing any details at all xD – Matchu Feb 23 '10 at 19:51

SharpC · Answer 5 · 2022-02-06T09:29:20.173

3

I found that the answer by @alemjerus would retrigger a POST if that was the last request:

window.location.reload(true)

What I wanted was to refresh the page from scratch using a GET, so I used this solution:

<a href="javascript:window.location.href=window.location.href">Refresh page</a>

edited Feb 06 '22 at 09:29

answered Jan 14 '21 at 09:20

SharpC

6,974
4
45
40

This is correct answers which refreshes current page wout any extra line of code. Working by just adding script directly inside the attribute. Thanks – sanpat Feb 04 '22 at 18:34

score 1 · Answer 6 · answered Feb 23 '10 at 14:53

1

Try this: window.location.href = 'mysite.htm?';

EDIT: This will only work the first time; after that, the caching takes effect again.

answered Feb 23 '10 at 14:53

Cameron

96,106
25
196
225

score -2 · Answer 7 · answered Aug 02 '15 at 20:02

Works with most of the Mozilla browsers

<a title="Reset this Document" href="javascript:void()" onclick="window.location.href='#'"><font color="red">Reset</font></a>

Code Line:

window.location.href='#'
or window.location.href=''

The last code will not work properly with IE

Javascript: How to truly reload a site with an anchor tag?

7 Answers7

Linked