How can I change Firefox window.location.hash without creating a page reload?

Question

I'm storing some state information in the URL fragment (hash, whatever you call it). When I change the window.location.hash in Chrome, and Safari the page doesn't reload - this is the behavior I want. When I change window.location.hash in Firefox, I get a page reload. How do I prevent this?

Note: My reason for storing state in the URL is so that userA can send the url to userB and userB will be able so see the same page (loaded by AJAX).

Resolution: For what it's worth, in Firefox (only?) the page will reload if you completely remove the hash including the "#" character. I ended up just making sure not to delete the entire hash.

I would recommend finding another way to store/cache state information rather than using `window.location` method such as in a _cookie_ or _javascript `var`_. — pixelbobby, Jun 10 '11 at 22:05
You may need to provide more information and a test page. I have never seen this behavior in Firefox. For example, use FF to go to http://unicodinator.com/ and click any character -- you should see the hash change but no page reload (at least, this is what happens on all machines I've tested, with FF 4 and FF 3.6). This uses document.location.hash to change the hash. — jwl, Jun 10 '11 at 22:06
yeah, that is a pretty cool effect. I see what you're trying to do; it's `bookmark` more or less. I checked the code in chrome debugger. I'll put a post below. — pixelbobby, Jun 10 '11 at 22:16

score 1 · Answer 1 · answered Jun 10 '11 at 22:06

1

There is a jQuery plugin called history that does this. I suggest you look at the source code (it's not very big last time I checked). It also works for older versions of IE but it's really nasty :P

answered Jun 10 '11 at 22:06

Halcyon

54,624
10
83
122

score 1 · Answer 2 · answered Jun 10 '11 at 22:10

1

You can find a good article about History API here: http://blog.webspecies.co.uk/2011-05-26/html5-history-api-dynamic-websites-like-never-before.html That helped me a lot.

answered Jun 10 '11 at 22:10

Matthieu Bozec

11
1

score 1 · Answer 3 · answered Jun 10 '11 at 22:15

Assuming this is the behavior of Firefox (to reload the page even when only changing the hash part) and it cannot be overridden, perhaps you could instead write a custom solution which finds the (x,y) position of the anchor target and call window.scroll(x,y).

pixelbobby · Answer 4 · 2011-06-10T22:30:33.657

On the post you mentioned, here's the code that sets the hash:

function (hsh) {
    hsh="#"+hsh;
    this.current.hash=hsh;
    document.location.hash=hsh;
}

And here's the code that reads the hash (e.g. from another URL):

function () {
    if(document.location.hash.split("#").pop()==this.current.hash.split("#").pop()) { return; }//this hash was set by code!
    var bl=-1;//-1 = none; otherwise, it's a block index.
    var cp=-1;
    if(document.location.hash.indexOf(Un.HASH_BLOCK_PREFIX)&gt;-1) {
        var blkhsh=document.location.hash.substring(Un.HASH_BLOCK_PREFIX.length+1);
        var blknum=parseInt(blkhsh,16);
        if(!isNaN(blknum)) {
            for(bi in Un.BLOCKS.blFrom) {
                if(Un.BLOCKS.blFrom[bi]==blkhsh) {
                    bl=bi; break;
                }
            }
        }
        else {
            var blkspc=blkhsh.split(Un.HASH_BLOCK_SPACE).join(" ");
            for(bi in Un.BLOCKS.blName) {
                if(Un.BLOCKS.blName[bi]==blkspc) {
                    bl=bi; break;
                }
            }
        }
    }
    else if(document.location.hash!="") {
        var hexhsh=document.location.hash.split("#").pop().split(Un.HASH_CP_PREFIX).pop().split("x").pop(); //if the cp_prefix is missing, or if prefixed with x, this will still work :)
        if(hexhsh.length==4 && !isNaN(parseInt(hexhsh,16))) {
            cp=hexhsh;
            for(bi in Un.BLOCKS.blFrom) {
                if(Un.BLOCKS.blFrom[bi]&gt;cp) {
                    bl=bi-1;
                    break;
                }
            }
        }
    }
    if(bl&gt;-1) {
        Un.selectBlock(bl,(cp==-1 ? 0 : 1));
    }
    else {
        Un.next(1);
        Un.setMenuButton($("#BlockButton"),0);
    }
    if(cp!=-1) {
        setTimeout("Un.cpOpen('"+cp+"')",100);
    }
}

How can I change Firefox window.location.hash without creating a page reload?

4 Answers4

Linked