5

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

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? 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
    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
    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. 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
    Mar 27, 2012 at 12:09

1 Answer 1

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] || "";
2
  • I might indeed to a little rewriting and use location.href instead of the replace. I don't really like the ___ in the address bar. The weird thing is, the request that I subsequently built from the hash included the space, that's why it broke my code.
    – Wilgert
    Mar 27, 2012 at 16:06
  • "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" - that's a weird behaviour by Firefox! Thanks, you fixed my problem.
    – andrewb
    Apr 15, 2014 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.