Question

是否可以在不调用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历史记录API不是一个选项。

Answer 1

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

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

Answer 2

这样做似乎有效：

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

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

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

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

更改哈希而不更新历史堆栈

2 个答案: