Question

当网址发生变化（向后或向前）时，将触发popState事件。最近我注意到，例如，http://www.example.com/：

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

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

$(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，您可以区分window.location.href中的完整网址更改或仅更改哈希更改。

示例：

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

Answer 3

这都很简单。您要做的就是不要将哈希添加到浏览器地址栏中。

为此，您基本上必须添加click事件处理程序，在其中检查该链接是否是您要避免在哈希更改时触发popstate的链接，如果是，则阻止event.preventDefault()的默认行为

我刚刚写了一个带有代码示例的答案，并对类似的问题here作了详细说明。

如何在特定条件下取消popState

3 个答案: