Force page reload with html anchors (#) - HTML & JS
Solution 1
I would suggest monitoring the anchor in the URL to avoid a reload, that's pretty much the point of using anchors for control-flow. But still here goes. I'd say the easiest way to force a reload using a simple anchor-link would be to use
<a href="?dummy=$random#myanchor2"></a>
where in place of $random
insert a random number (assuming "dummy" is not interpreted server side). I'm sure there's a way to reload the page after setting the anchor, but it's probably more difficult then simply reacting to the anchor being set and do the stuff you need at that point.
Then again, if you reload the page this way, you can just put myanchor2
as a query parameter instead, and render your stuff server side.
Edit
Note that the link above will reload in all circumstances, if you only need to reload if you're not already on the page, you need to have the dummy variable be more predictable, like so
<a href="?dummy=myanchor2#myanchor2"></a>
I would still recommend just monitoring the hash though.
Solution 2
Simple like that
<a href="#hardcore" onclick="location.reload()">#hardcore</a>
Solution 3
Another way to do that is to set the url, and use window.location.reload()
to force the reload.
<a href="/example#myanchor2"
onclick="setTimeout(location.reload.bind(location), 1)">
</a>
Basically, the setTimeout
delays the reload. As there is no return false
in the onclick, the href
is performed. The url is then changed by the href
and only after that is the page reloaded.
No need for jQuery, and it is trivial.
Solution 4
My favorite solution, inspired by another answer is:
<a href="#myanchor2" onclick="location.hash='myanchor2'; location.reload();">myanchor2</a>
href
link will not be followed so you can use your own preference, for example: ""
or "#"
.
Even though I like the accepted answer I find this more elegant as it doesn't introduce a foreign parameter. And both @Qwerty's and @Stilltorik's answers were causing the hash to disappear after reload for me.
Solution 5
What's the point of using client-side JS if you're going to keep reloading the page all the time anyways? It might be a better idea to monitor the hash for changes even when the page is not reloading.
This page has a hash monitor library and a jQuery plugin to go with it.
If you really want to reload the page, why not use a query string (?foo) instead of a hash?
Related videos on Youtube
Yuval Karmi
Updated on March 16, 2020Comments
-
Yuval Karmi about 4 years
Say I'm on a page called
/example#myanchor1
wheremyanchor
is an anchor in the page. I'd like to link to/example#myanchor2
, but force the page to reload while doing so.The reason is that I run js to detect the anchor from the url at the page load. The problem (normally expected behavior) here though, is that the browser just sends me to that specific anchor on the page without reloading the page.
How would I go about doing so? JS is OK.
-
Qwerty over 7 yearsYou could also just re-run the script that reads the url after clicking the link without having to reload the page.
-
-
Yuval Karmi about 14 yearswhat event would I bind to figure out when the hash changes? thanks!
-
Yuval Karmi about 14 yearstrue. found a way around it, but the question mark works (needs to be random to work more than once in a row)
-
Patanjali about 8 yearsThe string doesn't have to be random, but just has to be guaranteed to be different. Therefore, you can just use Date.now(), with resolution down to milliseconds, as in window.location='/example/?x='+Date.now()+'#myanchor2'.
-
Patanjali about 8 yearsI used the above to force the refresh of a server generated list on a page, but adding in a anchor to get back near the list. window.location.reload(true) would only go back to the top of the page, requiring the reader to scroll down to the list again.
-
Qwerty about 8 yearsWhat is the benefit of delaying the reload?
onclick="location.reload()"
works fine. -
Marco over 7 yearsA little late, but if you go this way google may find this a duplicate content. Be sure that you use canonical tags to prevent this, en.wikipedia.org/wiki/Canonical_link_element
-
falstro over 7 years@Marco isn't the point that the content should be different (being the reason for the reload), in which case the extra indexing might actually make sense.
-
damianostre about 5 yearsThat link is dead
-
Positivity almost 5 yearsthanks. In my case it worked only with
setTimeout
. -
Alec Jacobson over 4 yearsI think the
setTimeout
is to give the browser a chance to change the url (to include the anchor hash). Without it, the page reloads but without the new location/url. -
Chris over 2 yearsMine too only worked with setTimeout -- better answer than the one above.
-
Giddy Naya almost 2 yearsYou probably don't want to reload if the current page has no hash and in some cases you want the anchor link applied before the reload. What I did was: onclick="if(location.hash) setTimeout(function(){location.reload(), 100}"