Javascript reload the page with hash value

Question

I am trying to refresh the page with this statement in external javascript file after some processes.

window.location.href = window.location.href

It perfectly reload the page but I want to scroll to the specific location after reload. So, I put this on the page.

<a name="uploadImgSection"></a>

And change the javascript to

window.location.href = window.location.href + "#mypara";

This code doesn't reload/refresh the page either

window.location.hash = "#uploadImgSection";
window.location.href = window.location.href;

When I do that, it doesn't reload the page at all. Is there any way I can reload the page with scroll bar position?

No just html page. The purpose is refresh the page after running some javascript functions and scroll it back to that paragraph's position. — Jonas T, May 16 '12 at 05:21
how are you calling `window.location.href`? if you are doing that on page load and you are hitting f5 and you are using firefox (or other browser that scrolls where you were before the f5 on refresh) this _might_ be the problem — ajax333221, May 16 '12 at 05:35

Derek 朕會功夫 · Accepted Answer · 2014-06-18T19:19:49.327

174

window.location.href += "#mypara";
location.reload();

First add the hash, then reload the page. The hash will remain there, and the page gets reloaded.

Tested, works.

ps: If a hash already exist in the URL, you may want to directly change it via location.hash instead of .href.

edited Jun 18 '14 at 19:19

answered May 16 '12 at 05:40

Derek 朕會功夫

92,235
44
185
247

1

One other thing. It did refresh the page but it includes post data after the reload. How can I clean those? Those post data are preventing me to delete the data row. – Jonas T May 16 '12 at 05:50
Please read this. http://stackoverflow.com/questions/2405117/difference-between-window-location-href-window-location-href-and-window-location It does include those POST data which is preventing me to do other postback events. – Jonas T May 16 '12 at 05:53
Well, I don't know much about POST. You can ask a new question about it though, if you want to. – Derek 朕會功夫 May 16 '12 at 06:14
1

Well, I had to use query string at last. "window.location.href = url + "&action=reload";". Check action query string in javascripot on page load event, and do this "window.location.hash = "#uploadImgSection";". It's not the way it should work but I had to this way to make this work for now. – Jonas T May 16 '12 at 06:23
Yup Genius in our midst :) Best solution – Clinton Green Sep 15 '16 at 22:09
Maybe this worked in 2012, but today this forces a full reload rather than using cache. That's only supposed to happen if you call reload(true), but Firefox at least is just doing a full reload, which is definitely not what you want to happen. – Glenn Maynard Jun 27 '18 at 06:08
@GlennMaynard That’s probably because you had you devtools opened. According to the HTML spec it should not do a full reload, but it does depend on the browser vendor. – Derek 朕會功夫 Jun 27 '18 at 12:42
Doesn't work when the content upon the anchor grows on reload - it navigates to the position where the anchor used to be before the reload, not to where it actually is. – Fanky Jul 04 '18 at 12:55
This doesn't work if the hash value is not modified (i.e. you reload expecting the browser to return to the same anchor). It will return to the previous _scroll position_. – developius Mar 16 '20 at 00:16

score 42 · Answer 2 · answered Oct 03 '13 at 23:08

42

I wanted to update this question because I found that using window.location.href += "#mypara" will keep appending the parameter to the url even if it exists. I have found the better way is to use

window.location.hash = "#mypara"
location.reload();

answered Oct 03 '13 at 23:08

ug_

11,267
2
35
52

score 30 · Answer 3 · edited Sep 16 '13 at 18:36

30

This is really an old post, I would still try and answer with right combination of answers.

location.reload() and location.reload(true) works like F5 on browser. This will post all the form data back to the server if previously load had done it.
location.href will not refresh the page until there is a URL change recognized by the browser. change in hash (#paramname) doesn't qualify for URL change and hence just doing location.href+="#paramname" will not work.

So, location.href+="?anything#paramname" should reload the page as a new request as ?anything is change in the URL.

edited Sep 16 '13 at 18:36

pb2q

58,613
19
146
147

answered Sep 16 '13 at 18:16

JayB

301
3
2

Nice answer. Here is a cooked version: window.location='&rand='+((new Date()).getTime()%1000000000)+'#myhash'; – Johan Nov 11 '13 at 15:37
4

Another one: location.href+='&rand='+Math.rand()+'#myhash'; – Johan Nov 11 '13 at 15:40
IMO this answers the question the best compared to the other posts. It requires no change to the underlying code that may have been written as part of a library for example. – thekingoftruth Dec 15 '15 at 20:37
1

Johan, Math.rand() should be changed to Math.random() – tomJO Apr 12 '18 at 13:35
1

The closest answer (maybe the other answers were correct in 2012, but they're all wrong in 2018), but it has the problem of adding entries to the user's address bar history, which isn't good if you were just trying to refresh the same history state... – Glenn Maynard Jun 27 '18 at 06:22
This is a great answer because the key to understanding this behavior of URLs is in it: "... change in hash (#paramname) doesn't qualify for URL change ". Does anybody have a good reference which explains why this is so? – Panu Logic Jul 14 '21 at 14:55
awesome answer, so far the only thing which worked for me – MGLondon May 10 '22 at 23:24

score 1 · Answer 4 · edited Apr 11 '15 at 03:31

1

var loc = location.hash;
location.hash = " ";
location.hash = loc;

edited Apr 11 '15 at 03:31

Ayushi Jha

4,003
3
26
43

answered Apr 11 '15 at 03:02

Pandimanikandan A

19
1

Code-only answers are not very useful. What is this doing? Why does it work? – random_user_name Aug 16 '19 at 16:00

score -1 · Answer 5 · answered May 16 '12 at 05:30

-1

Try this

           var urlString=window.location.href;
           var url=urlString.split("#")[0];
           window.location.href = url + "#mypara";

answered May 16 '12 at 05:30

Hearaman

8,466
13
41
58

4

This doesn't reload the page at all either. – Jonas T May 16 '12 at 05:35
"Try this" code only answers aren't very useful. What's it doing? Why does it work? – random_user_name Aug 16 '19 at 16:00

score -1 · Answer 6 · answered Feb 05 '14 at 07:37

-1

This worked for me:

var tabValue = document.URL;
window.location = tabValue.substring(0, tabValue.lastIndexOf("#"));
window.location.hash = "#tabs-3"; //Whatever is your hash value
location.reload();

answered Feb 05 '14 at 07:37

Amit

1

score -1 · Answer 7 · edited Jan 18 '18 at 11:10

-1

This worked for me

$('body').on('click', '.className', function () {
    var data = $(this).attr('href');
    alert(data);
    window.location.reload();
});

edited Jan 18 '18 at 11:10

Hemant Sankhla

923
12
23

answered Nov 18 '15 at 18:46

Kailash Chandra Panigrahi

1

This seems to basically be a longer way of doing what other answers already do, plus I don't think it includes the #myPara part so won't work like the original poster wants it to, although please edit the answer to clarify that if I'm wrong. – blm Nov 18 '15 at 19:09

score -1 · Answer 8 · answered Jan 31 '17 at 10:20

-1

This work for me

window.location.href = baseUrl + "#/m/team";
 location.reload();

answered Jan 31 '17 at 10:20

MK Shah

1
2

Javascript reload the page with hash value

8 Answers8

Linked

Related