javascript location.hash refreshing in IE

aepheus picture aepheus · Apr 8, 2010 · Viewed 40.5k times · Source

I need to modify the hash, remove it after certain processing takes place so that if the user refreshes they do not cause the process to run again.

This works fine in FF, but it seems that IE is reloading every time I try to change the hash. I think it is related to other things that are loading on the page, though I am not certain. I have an iframe that loads (related to the process) as well as some scripts that are still being fetched in the parent window.

I can't seem to figure out a good way to change the hash after all the loading completes. And, at the same time am not even positive that it is related to the loading.

Any ideas on how to solve this?

More odd behavior: The hash is coming from else where in the web app via a redirect. I have found if I simply add the hash by hand, adding #myid to the url, it does not reload. It does not matter if I enter the hash on a page that has already loaded (adding #myid to the already existing url) or by entering the complete url in a new tab.

Answer

Jarne Cook picture Jarne Cook · Jul 20, 2010

This appears to be a bug with Internet Explorer (tested with 7 and 8).

Changing window.location.hash should not result in a reload, and it is a common JavaScript technique to use the hash for maintaining state.

If you manually load a page and change the hash using JavaScript it will work.

The problem is when you are redirected to the page from a different location (ie: using HTTP header "Location"), then modifying the hash will result in a reload.

To get around this bug you could:

1) If you can control the redirect, you could replace the Location header with some HTML.

<html>
<head>
    <meta http-equiv="refresh" content="0; url=__REDIRECT_LOCATION__">
    <script>window.location = "__REDIRECT_LOCATION__";</script>
</head>
</html>

2) if not, you could try reloading the page when it is loaded. To prevent a reload loop you may need to set a cookie.

window.location = window.location; // window.location.reload() didn't work.

In pseudo code: 

// if is Internet Explorer
//      if ( cookie "reloadPerformed" is not set )
//          set cookie "reloadPerformed" = "1"
//          reload page
//      else 
//          clear cookie "reloadPerformed"

The obviously drawback is that loading the page results in two page request & render, so you'll would want the reload to be one of the first things the page does when it loads.