如何在特定条件下取消popState

Question

popState当网址发生变化(向后或向前)时,将触发该事件.最近我注意到,例如,在http://www.example.com/:

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

也将触发popState,导致页面"重新加载".
我怎么知道如果它是相同的URL并且只有#部分发生了变化？

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

在该示例中,当您单击"顶部"链接(见上文)时,页面将转到#anchor,但它也会触发popState并导致重新加载,这是我不期望的.

Answer 1

我从事件中找不到任何东西来确定这是否只是一个锚点更改，因此我必须自己使用以下代码跟踪它：

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;
  });
})

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

为了确保正确跟踪当前位置，每当您使用pushState（）或replaceState（）更改状态时，还需要更新变量。

Answer 2

您可以检查添加了window.location.hash哪种类型的锚点并采取适当的操作。#

此外，通过检查，window.onhashchange您可以区分完整 URL 更改window.location.href或只是哈希更改。

例子：

window.onhashchange = function()
{
    console.log('Hash change:' + window.location.hash);
}