javascript - 如何在特定条件下取消popState

Question

popState 事件将在 url 更改(后退或前进)时触发。最近我注意到，例如，在 http://www.example.com/ 中:

<a href="#anchor">Top</a>

还会触发popState，导致页面“重新加载”。
我怎么知道如果它是相同的 url 并且只有 # 部分发生了变化？

$(window).bind("popstate",function(){
    swap(location.href);
})

在示例中，当您单击“Top”链接(见上文)时，页面将转到#anchor，同时也会触发popState 并导致重新加载，这是我不希望的。

Answer 1

我无法从事件中找到任何信息来确定这是否只是 anchor 更改，因此我不得不使用如下代码自行跟踪它:

function getLocation() {
  return location.pathname + location.search;
}

var currentLocation = getLocation();

$(function() {
  $(window).on("popstate", function() {
    var newLocation = getLocation();
    if(newLocation != currentLocation) {
      // DO STUFF
    }
    currentLocation = newLocation;
  });
})

位置的存储没有散列，因此当由于单击带有 anchor 的链接而触发 popstate 时，getLocation 方法将返回与以前相同的结果，并且不会发生交换页面的代码。

为确保您正确跟踪当前位置，您还需要在使用 pushState() 或 replaceState() 更改状态时更新变量