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

Question

我正在使用jQuery BBQ插件来跟踪用户在页面中的进度.但是,我只想在用户的历史记录中创建一个额外的条目,而不是每个哈希变化都创建一个条目.

我已经尝试了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属性的reference(),并定义以下函数:

  1. 如果location.hash != hash,那么我们肯定知道历史的状态至少超过了第一页的视图.我们可以安全地返回历史记录,而无需卸载页面.history.back(); // Go back in the history.
  2. 然后,设置location.hash属性.如果我们回到上一步的历史记录中,则会覆盖历史记录条目.

  
  后备(最后)方法可能并不总是替换历史记录:
  何时location.hash == hash,满足以下任一条件:

  1. 哈希还没有改变,所以回到上一页是没有意义的.
  2. 用户可能会向后导航到原始页面的状态.如果我们使用history.back();,页面可能会被卸载,这是不可取的.
     

  
  因此,为了安全起见,当哈希值等于保存的原始哈希值时,我们永远不会卸载页面.
  

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

Answer 2

您可以使用replace-method from window.location,而不使用第二个newSubStr参数.这适用于所有已知的浏览器,甚至是oldIE:

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

请注意,如果文档中存在有效元素(根据规范),页面将跳转/滚动到该页面.