在不更新历史堆栈的情况下更改哈希答案

【问题标题】：Change Hash without updating history stack在不更新历史堆栈的情况下更改哈希
【发布时间】：2014-03-13 23:42:23
【问题描述】：

是否可以在不调用 hashchange 事件的情况下更改页面的哈希？

在我的应用中，我想做类似的事情：

$(window).hashchange( function(){

    hash = ...; // here I change the hash to something else

    window.location.hash = hash; // then update it

});

上面代码的一个明显问题是它会导致一个循环，因为window.location.hash会调用hashchange事件，然后以此类推。

但是在我的应用中，我只在一个条件下更改哈希：

$(window).hashchange( function(){

    var hash = window.location.hash;

    var lastChar = hash.substr(-1);

    if(lastChar != '/') {

        // Add trailing slash
        hash = hash.replace(/\/?$/, '/');                   

        // Update the hash
        window.location.hash = hash;

    }

});

所以只有在没有找到尾部斜杠时才会调用它，然后一旦添加它就不会再次进入条件，因此它不会执行上述循环问题。

但它仍然会调用 hashchange 事件！由此产生两个问题：

历史记录被破坏，因为前一页是当前页，浏览器卡在当前页的无限堆栈中。
我在我的应用程序中对 hashchange 进行了 AJAX 请求，因此它会调用两次以添加尾部斜杠。

是否可以在不调用事件的情况下将该斜杠添加到哈希中？

也许在做window.unbind('hashchange')。那行得通吗？并且还需要在 HTML4 浏览器中工作，因此 HTML5 History API 不是这里的选项。

【问题讨论】：

标签： javascript jquery hash

【解决方案1】：

在 HTML5 浏览器中，您可以使用 window.history.replaceState() 更新哈希值，而不会创建新的历史记录条目。

根据MDN docs，.pushState() 或.replaceState() 都不会触发hashchange 事件。

【讨论】：

我能为 HTML4 浏览器做什么？抱歉，我知道我没有具体说明。谢谢。
pushState 仍会创建一个历史记录条目，但 replaceState 可以正常工作...除了它只是 HTML5 :)
@Cameron 对于 HTML4 浏览器，您可能只需要保留一些额外的额外状态来指示当前的 hashchange 事件是否是由您自己故意更改散列引起的，并缩短 AJAX 调用如果是这样的话。它不能解决“额外的历史条目”问题，但它可能会有所帮助。

【解决方案2】：

这样做似乎有效：

// Unbind hashchange
$(window).unbind( 'hashchange');

// Update the hash
window.location.hash = hash;

// Rebind hashchange                            
$(window).bind( 'hashchange');

对此有什么想法吗？比如我可能遇到的未知问题等。

【讨论】：