Javascript Reload Page

Question

In order to reload the page without fully reloading everything I'm using:

window.top.location=window.top.location;

However, this doesn't work for some reason when there is anchor text. It appears to do nothing in this case, but more likely it refreshes the anchor.

Any fix for this that will reload the page (as above) without reloading the cached images and scripts?

If there's an anchor then it just scrolls the page to show the first element whose id matches the anchor. — Mike Samuel, Apr 27 '13 at 03:26
N.B. Without going into full details of HTTP/1.1 caching and cache validation, it is sufficient to say the accepted answer only works at the JavaScript level by specifying whether or not "the browser may reload the page from *its* cache." However, `location.reload(false)` does nothing to stop all intermediate servers, which may be between the client and origin server, from returning their cached copies. Submitting a random unused parameter as part of a query string submitted with a request is de facto practice for reloading a specific resource without breaking the cache for other resources. — Joseph Myers, Feb 24 '14 at 19:41
possible duplicate of [How to reload a page using Javascript?](http://stackoverflow.com/questions/3715047/how-to-reload-a-page-using-javascript) — Sam, Jul 14 '15 at 21:31

score 75 · Accepted Answer · answered Apr 27 '13 at 03:25

75

Try using location.reload(false).

As MDN says, the second parameter is a boolean indicating whether to bypass the cache or not. false keeps using the cache, as you wanted.

answered Apr 27 '13 at 03:25

icktoofay

126,289
21
250
231

FYI `window.top.location=window.top.location` is still faster, but I use `location.reload(false)` if there are any anchor tags. – Alasdair May 04 '13 at 13:59
3

This is theoretically a great answer, but does not address the issue that exists with many internet service providers which will cache documents somewhere between the browser and the server. This is legal behavior within the contraints of HTTP/1.1 RFC 2616, but it results in code updates taking a quite long time to propagate to users that are served by the affected internet service providers. The only solution is to disable caching completely with server expiration headers or to use a varying query string which, according to RFC 2616, *forces* the ISP to retrieve a fresh copy from the server. – Joseph Myers Aug 14 '13 at 22:14
2

@Joseph: That's certainly an important detail if you're *trying to* bypass the cache, but the question is asking how to *not* bypass the cache. – icktoofay Aug 15 '13 at 04:51
1

@icktoofay OP said s/he wants to reload that page, but NOT fully reload everything. That means indeed to bypass the cache for the main page, but not the resources used in the page. On the browser side, your answer is perfect for reloading the page only and not the other resources, yet it won't get around ISPs that are still caching the main page when the browser tries to reload it. But by attaching a different query string, the HTTP specification forces the ISP to "invalidate" its cached copy and send the request for the main page all the way through to the server as desired. – Joseph Myers Aug 15 '13 at 05:41
@Joseph: Understood; you're absolutely correct. I guess I had neglected to consider that part. – icktoofay Aug 15 '13 at 05:42
@icktoofay Thanks, I appreciate that. You're answer is still good for the typical situation. I just wanted to add a note for the few outliers who might still be experiencing a mysterious issue with reloading. – Joseph Myers Aug 15 '13 at 05:49

score 6 · Answer 2 · answered Apr 27 '13 at 03:31

icktoofay explains the workaround so I'm just addressing this question:

However, this doesn't work for some reason when there is anchor text. It appears to do nothing in this case, but more likely it refreshes the anchor.

HTML 5 describes the Location interface which covers assignment to document.location.

When the assign(url) method is invoked, the UA must resolve the argument, relative to the entry script's base URL, and if that is successful, must navigate the browsing context to the specified url.

So the navigate operation only sees an absolute URL, so there is no difference assigning just a fragment vs assigning an absolute URL that is the same as the page URL with a fragment.

navigate

8 Fragment identifiers: Apply the URL parser algorithm to the absolute URL of the new resource and the address of the active document of the browsing context being navigated. If all the components of the resulting parsed URLs, ignoring any fragment components, are identical, and the new resource is to be fetched using HTTP GET or equivalent, and the parsed URL of the new resource has a fragment component that is not null (even if it is empty), then navigate to that fragment identifier and abort these steps.

Finally, navigating to a fragment identifier says

When the user agent is required to scroll to the fragment identifier, it must either change the scrolling position of the document using the scroll an element into view algorithm defined in the CSSOM View specification, with the align to top flag set, or perform some other action, such that the indicated part of the document is brought to the user's attention.

Joseph Myers · Answer 3 · 2013-04-27T03:38:00.170

The best way to be completely sure the page itself is reloaded, but the other cached elements are not is to change the location.search query string with a random parameter.

For example,

location.search='?'+Math.random();

The cached is not bypassed, so all elements of the page will be loaded from cache, but the main page itself is forced to reload because HTTP requires another request to the server for each unique query string / location.search value.

If your page is itself an application which uses a query string (like file.cgi?param=xyz&param2=abc...) then you will have to append to the query string rather than replace it completely:

if (location.search.length > 1)
location.search+='&'+Math.random();
else
location.search='?'+Math.random();

This worked perfect since i was trying to refresh a page without re-posting it. — Dr. Aaron Dishno, Mar 16 '16 at 21:35

score 0 · Answer 4 · answered Jul 25 '14 at 14:31

I have been trying all these for the following situation: I have a complicated page with a minicart where the customer can save projects with lists of products. Now I wanted to let the customer open a new page to download a report while keeping the parent page intact with open accordion etc.

Customers with IE8 still running XP would have the parent page garbled after opening the report window. Programming was in ASP.NET with VB code behind. This solution worked for me.

Dim proj As String = "<script language=javascript> location.assign('/Projects.aspx');
window.open('Report.aspx?project=" & projid.Text & "&rpt=bill');</script>"
Session.Add("AddCart", idx.ToString("N0"))
Response.Write(proj)

location.assign is used to refresh the parent page while window.open will open the report in a new window.

A session variable is used to keep track of which accordion row should be opened. This is handled in Page_Load

    If Not Page.IsPostBack Then
        LoadProjects()
        If Session("AddCart") IsNot Nothing Then
            Dim idx As Integer = Session("AddCart")
            ProjAccordion.SelectedIndex = idx
            Session.Remove("AddCart")
        ElseIf Session("CopyProj") IsNot Nothing Then
            Dim idx As Integer = Session("CopyProj")
            ProjAccordion.SelectedIndex = idx
            Session.Remove("CopyProj")
        End If
    End If

score -2 · Answer 5 · answered Apr 27 '13 at 05:27

-2

Using location.href makes the trick http://www.w3schools.com/jsref/prop_loc_href.asp

answered Apr 27 '13 at 05:27

Singagirl

465
1
3
11

No, that doesn't work. Try going to http://www.example.com/#test. Then run `location.href = location.href;`. Observe that when `#test` is there, that code will not reload the page. – icktoofay May 04 '13 at 21:54

Javascript Reload Page

5 Answers5

Related