Question

我正在使用jQuery BBQ plug-in来跟踪用户在整个页面中的进度。但是，我只想在用户的历史记录中创建一个附加条目，而不是每次更改哈希值。

我尝试了jQuery.bbq.pushState和merge_mode方法，但没有成功：仍然添加了新的历史记录条目：

jQuery.bbq.pushState({ sort: encodeURIComponent(sort) });

我也尝试了location.replace()，但这对Safari 5.1.2不起作用。

location.replace('#' + encodeURIComponent(sort))

什么是修改哈希的跨浏览器解决方案，而不会在历史记录中添加太多条目？

Answer 1

首先，我展示了函数replaceHash的定义，它只接受一个参数：新的位置哈希。有关逻辑的详细说明可以在答案的底部找到。

代码：

// Should be executed BEFORE any hash change has occurred.
(function(namespace) { // Closure to protect local variable "var hash"
    if ('replaceState' in history) { // Yay, supported!
        namespace.replaceHash = function(newhash) {
            if ((''+newhash).charAt(0) !== '#') newhash = '#' + newhash;
            history.replaceState('', '', newhash);
        }
    } else {
        var hash = location.hash;
        namespace.replaceHash = function(newhash) {
            if (location.hash !== hash) history.back();
            location.hash = newhash;
        };
    }
})(window);
// This function can be namespaced. In this example, we define it on window:
window.replaceHash('Newhashvariable');

功能逻辑

当支持history.replaceState时，该函数将始终替换当前哈希值，没有任何副作用。
否则，将创建第一个hash属性的引用（location.hash），并定义以下函数：
1. 如果location.hash != hash，那么我们肯定知道历史记录的状态至少超过了第一页面视图。我们可以安全地返回历史记录，而无需卸载页面。的 history.back(); // Go back in the history 即可。
2. 然后，设置location.hash属性。如果我们回到上一步的历史记录中，则会覆盖历史记录条目。

Answer 2

您可以使用replace中的window.location - 方法，而不使用第二个newSubStr - 参数。这适用于所有已知的浏览器，甚至是oldIE：

function replaceHash(hash) {
  return window.location.replace(
    '#' + hash.replace(/^#/, '')
  );
}

注意，如果文档中有一个有效元素（as per spec），页面将跳转/滚动到它。

如何替换位置哈希并仅保留上一个历史记录条目？

2 个答案:

代码：

功能逻辑