Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript location.hash refreshing in IE

Tags:

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.

like image 430
aepheus Avatar asked Apr 08 '10 17:04

aepheus


People also ask

What does Window Location hash return?

The hash property of the Location interface returns a string containing a '#' followed by the fragment identifier of the URL — the ID on the page that the URL is trying to target.

What does Location hash do?

The Location Hash property in HTML is used to return the anchor part of a URL. It can also be used to set the anchor part of the URL. It returns the string which represents the anchor part of a URL including the hash '#' sign.

How do I remove a hash from a link?

To remove the hash URL, you can use the replaceState method on the history API to remove the hash location. Example: HTML.

What is a Window hash?

The window. location. hash returns a string that contains a # along with the fragment identifier of the URL. The fragment identifier of the URL starts with a # followed by an identifier that uniquely identifies a section in an HTML document.


3 Answers

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.

like image 82
Jarne Cook Avatar answered Mar 13 '23 04:03

Jarne Cook


@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.

like image 33
rjmunro Avatar answered Mar 13 '23 04:03

rjmunro


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.

like image 38
张小生 Avatar answered Mar 13 '23 05:03

张小生