11

I'm using document.location.hash to preserve state on the page, and I'm putting url-encoded key value pairs up there, separated by "&" chars. So far so good.

However I'm running into an annoying problem on Firefox -- Firefox will quietly url-decode the hash value on the way in, so when you get it out later it's been decoded.

I can patch the problem by detecting when I'm running on firefox and calling encodeURIComponent on everything twice on the way in, but obviously that is hideous and I don't really want to do that.

Here's a simple example, where I encode "=" as "%3D", put it in the hash, and when I get it out later it's been turned back into "=" automatically:

// on the way in::
document.location.hash = "foo=" + encodeURIComponent("noisy=input");

//then later.....
// on the way out: 
var hash = document.location.hash;
kvPair = hash.split("=");

if (kvPair.length==2) {
    console.log("that is correct.")
} else if (kvPair.length==3) {
    console.log("oh hai firefox, this is incorrect")
}

I have my fingers crossed that there's maybe some hidden DOM element that firefox creates that represents the actual (un-decoded) hash value?

but bottom line -- has anyone run into this and found a better solution than just doing browser detection and calling encodeURIComponent twice on Firefox?

NOTE: several other questions I think have the same root cause. Most notably this one:

https://stackoverflow.com/questions/4834609/malformed-uri-in-firefox-not-ie-using-encodeuricomponenet-and-setting-hash

Community
  • 1
  • 1
nmealy
  • 161
  • 2
  • 7
  • 5
    I'm afraid there's no good way than a different procedure in firefox until they someday fix the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=483304 . An option may be to extract the hash from window.location using String-functions. – Dr.Molle Apr 27 '11 at 00:19

2 Answers2

1

I would strongly advise against using the hash value to preserve the state. Hash is supposed to point to object's fragment-id, as explained in RFC 1630

This represents a part of, fragment of, or a sub-function within, an object. (...) The fragment-id follows the URL of the whole object from which it is separated by a hash sign (#).

Is there anything stopping you from using cookies to preserve the state? Cookies are simple enough to use in JS, described on Geko DOM Reference pages, and would do the trick quietly, without appending values to the URL which is never pretty.

If you absolutely have to use hash though, you may want to consider replacing '=' with some other character, e.g. ":".

Jacek Ciolek
  • 428
  • 4
  • 5
  • 2
    I have the same problem as author does. Using cookie isn't a solution when you need to propagate the state sharing the url. Any other solution that is cross-browser compatible? Ideally we'd have html5 onpopstate. – Rafael Xavier Dec 05 '12 at 16:31
  • 1
    We have a solution here http://stackoverflow.com/questions/4835784/firefox-automatically-decoding-encoded-parameter-in-url-does-not-happen-in-ie – Rafael Xavier Dec 05 '12 at 16:35
0

What you could do, is change the "=" to something else using

var string = string2.replace("=", "[$equals]")

You may have to run the line above a couple of times, depending on how many "=" there are.

Then same process you had as above.

NB If you require it for further code, you can replace [$equals] back to "=" after splitting the hash into an array.

dp4
  • 11
  • 3