javascript location.hash refreshing in IE

41,131

Solution 1

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.

Solution 2

@JarneCook seems to be right - it is a bug in IE.

You might be able to just do:

<script type="text/javascript">
  window.location.hash = window.location.hash;
</script>

at the top of your page. In normal circumstances, this should be a no-op, but if the user is using IE and has arrived via a redirect, the page will reload before they even notice it has loaded.

Solution 3

The problem is that "The hash is coming from else where in the web app via a redirect.". If you use javascript to redirect the url in the client like this:

location.href = 'test1.aspx#testhash'

it will be ok !

So this is the IE bug: When a web app via a redirect, the browser may only see the prev url, so when you modify the location.hash, the browser sees a url change, so refreshes the page.

Solution 4

The similar issue existed in my project. But we could not use methods described above, because when IE refreshed a page, preloaded data was reset. So, we used the feature of the browser. When you click for 'a' tag, onClick event happened firstly and after event browser use 'href' attribute for redirecting. When IE use href with hash for redirecting, reloading do not exist. So, you can use onClick event for invoke server-side processing(__doPostBack for asp.net for example) and when the processing will be executed, browser will use 'href' attribute for redirecting. So, new page will not be reloaded. Also you can use window.location = yourNewLocationWithHash invoking after server-side processing. I hope this help =)

Solution 5

Was facing this issue, As suggested in one of the answers, the issue was only when a 302/301 redirection. Hash change does not reload if the page was not a redirect. I was redirecting using PHP and did not want to use a cookie to stop the redirection.

More over this issue was there in some IE9 browsers as well, tried 5 IE9 browsers, 4 reloaded the page.

Here is a fix added this in head section :

<!--[if lt IE 10]>
    <script type="text/javascript">
        if(window.location.hash.replace('#','').length > 0
            && window.location.hash.search('stopredirectioninie') == -1)
        {
            window.location.href = window.location.href+'&stopredirectioninie';
        }
    </script>
<![endif]-->
Share:
41,131
aepheus
Author by

aepheus

I develop web applications primarily using C#, SQL Server, Web Services, XSLT/XML, and jQuery/JavaScript.

Updated on July 18, 2022

Comments

  • aepheus
    aepheus almost 2 years

    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.