The goal: Correctly put a string from a data attribute into the window.location.hash.

The code:

map = {path: $(this).attr('data-path'), rev: $(this).attr('data-rev')};
window.location.hash = getMapParams(map);

function getMapParams(map) {
  s="";
  for(key in map) {
    value=eval("map."+key);
    if (s.length > 0) {
      s+="&";
    }
    s+=encodeURIComponent(key)+"="+encodeURIComponent(value);
  }
  return s;
}

The problem: As soon as the data-path attribute contains a space Firefox fails to put the hash correctly. The space will appear unencoded whereas in other browsers it's correctly encoded as %20.

The weird quirks: If I debug the code the string is listed with the encoded space.

The research done: I have found plenty solutions for correctly reading the hash in firefox. In one way or another this is working fine with my code.

The question: How do I stop Firefox from urldecoding the space(s) in a string I put in window.location.hash

The goal: Correctly put a string from a data attribute into the window.location.hash.

The code:

map = {path: $(this).attr('data-path'), rev: $(this).attr('data-rev')};
window.location.hash = getMapParams(map);

function getMapParams(map) {
  s="";
  for(key in map) {
    value=eval("map."+key);
    if (s.length > 0) {
      s+="&";
    }
    s+=encodeURIComponent(key)+"="+encodeURIComponent(value);
  }
  return s;
}

The problem: As soon as the data-path attribute contains a space Firefox fails to put the hash correctly. The space will appear unencoded whereas in other browsers it's correctly encoded as %20.

The weird quirks: If I debug the code the string is listed with the encoded space.

The research done: I have found plenty solutions for correctly reading the hash in firefox. In one way or another this is working fine with my code.

The question: How do I stop Firefox from urldecoding the space(s) in a string I put in window.location.hash

• javascript
• jquery
• firefox
• hashchange

Share Improve this question Follow edited Mar 27, 2012 at 11:41 Wilgert asked Mar 27, 2012 at 11:15 WilgertWilgert 70611 gold badge66 silver badges2424 bronze badges 5

• 1 In theory it's quite logical that firefox doesn't handle spaces in the hash, since it's supposed to refer to an id="" and scroll the page for you. Can't you use _ or something instead? – Robin Castlin Commented Mar 27, 2012 at 11:22
• May be not the answer, just try using value=map[key]; and return encodeURIComponent(s) only once all together at last. – The Alpha Commented Mar 27, 2012 at 11:37
• I could replace all the spaces with another character but it's a frontend using the Dropbox api to fetch folders and files. I would have to change a lot of code. And on top of that in other browsers it's working fine. The thing is, it is not a space. It is an urlencoded space. Other urlencoded characters like / (%2F) are left as is.. – Wilgert Commented Mar 27, 2012 at 11:38
• The simple solution I guess is then through jQuery determine if the client is Firefox and decode/encode/replace space to correctly. – Robin Castlin Commented Mar 27, 2012 at 11:46
• I went with Robin Castlin's solution above. But only replaced characters in my javascript code so I did not have to go into my PHP backend. It works as expected now. – Wilgert Commented Mar 27, 2012 at 12:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I usually try to avoid window.location.hash because of it's not uniform across browsers.

Thus rather than doing following

window.location.hash = "some hash value";

I would do

window.location.href = window.location.href.split("#")[0] + "#" + encodeURIComponent("some hash value");

Furthermore, although Firefox shows decoded hash in address bar (i.e. ' ' instead of %20), if you try to copy the address it is actually encoded. Thus what is getting shown is not what is in the URI.

As an aside, I always access hash using following code

var hash_val = window.location.href.split("#")[1] || "";