如何在不创建页面重新加载的情况下更改 Firefox window.location.hash？ [复制]答案

【问题标题】：How can I change Firefox window.location.hash without creating a page reload? [duplicate]如何在不创建页面重新加载的情况下更改 Firefox window.location.hash？ [复制]
【发布时间】：2011-09-12 20:10:50
【问题描述】：

我在 URL 片段中存储了一些状态信息（散列，不管你怎么称呼它）。当我在 Chrome 和 Safari 中更改 window.location.hash 时，页面不会重新加载 - 这是我想要的行为。当我在 Firefox 中更改 window.location.hash 时，我会重新加载页面。如何防止这种情况发生？

注意：我在 URL 中存储状态的原因是 userA 可以将 url 发送给 userB，而 userB 将能够看到相同的页面（由 AJAX 加载）。

解决方案：无论如何，在 Firefox 中（仅？）如果您完全删除包含“#”字符的哈希，页面将重新加载。我最终只是确保不要删除整个哈希。

【问题讨论】：

使用preventDefault ?
我建议寻找另一种方法来存储/缓存状态信息，而不是使用 window.location 方法，例如 cookie 或 javascript var.
您可能需要提供更多信息和测试页。我从未在 Firefox 中看到过这种行为。例如，使用 FF 转到unicodinator.com 并单击任何字符——您应该会看到哈希更改但没有重新加载页面（至少，这是我测试过的所有机器上发生的情况，使用 FF 4 和 FF 3.6） .这使用 document.location.hash 来更改哈希。
@pixelbobby 见上面帖子中的注释
是的，这是一个很酷的效果。我明白你想做什么；或多或少是bookmark。我检查了 chrome 调试器中的代码。我会在下面发一个帖子。

标签： javascript

【解决方案1】：

在您提到的帖子中，这是设置hash 的代码：

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

这是读取hash的代码（例如，来自另一个 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);
    }
}

【讨论】：

【解决方案2】：

假设这是 Firefox 的行为（即使只更改哈希部分也会重新加载页面）并且它不能被覆盖，也许您可以编写一个自定义解决方案 finds the (x,y) position of the anchor target 并调用 window.scroll(x,y)。

【讨论】：

【解决方案3】：

你可以在这里找到一篇关于 History API 的好文章：http://blog.webspecies.co.uk/2011-05-26/html5-history-api-dynamic-websites-like-never-before.html 这对我帮助很大。

【讨论】：

【解决方案4】：

有一个名为history 的jQuery 插件可以做到这一点。我建议你看一下源代码（我上次检查的时候不是很大）。它也适用于旧版本的 IE，但它真的很讨厌：P

【讨论】：