如何替换位置哈希并仅保留最后的历史条目？

Question

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

我已经尝试过 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 支持，该函数将始终替换当前哈希，没有任何副作用。

• 否则，将创建对第一个 location.hash 属性的引用 (hash)，并定义以下函数：

  1. 如果location.hash != hash，那么我们可以确定历史记录的状态至少超过了第一个页面视图。我们可以安全地返回历史记录，而无需卸载页面。 history.back(); // 返回历史记录。
  2. 然后，设置 location.hash 属性。如果我们在上一步中返回历史记录，历史记录条目将被覆盖。

  后备（最后）方法可能并不总是取代历史记录：
  当 location.hash == hash 时，以下任一条件为 true：

  1. 哈希值尚未更改，因此返回上一页没有任何意义。
  2. 用户可能向后导航到原始页面的状态。如果我们使用 history.back();，页面可能会被卸载，这是不可取的。

  因此，为了安全，当哈希值等于保存的原始哈希值时，我们从不卸载页面。

  注意：在哈希更改之前运行此代码非常重要。当哈希值已经改变时，脚本就不再可靠。用户可能已导航到第一个哈希状态，该状态不等于保存的哈希。因此，history.back() 会卸载页面。

Answer 2

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

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

注意，如果有一个有效的元素（按照规范）在文档中，页面将跳转/滚动到它。