如何在javascript中检测客户端上的返回导航？

Question

请注意:我没有尝试检测到后退按钮被点击了.我不在乎.

我只是想知道他们的页面是在后面导航中加载的.我想在我的应用程序的某个位置向用户显示警告,如果他们单击后退按钮建议他们刷新.

编辑:

1)我希望我的页面缓存.我们现在生活在一个移动世界.不缓存是一种不好的做法.

2)我希望此功能与URL无关.解耦是一种很好的做法.

Answer 1

<script>
if (history.state !== null  &&  +history.state < history.length)
{
    alert("refresh needed");
    history.replaceState(null, "", window.location.href);
}
else
{
    history.replaceState(history.length, "", window.location.href);
}
</script>

页面第一次加载时，这会将历史的当前长度（也是页面在历史中的位置）存储到历史本身中，而不会更改浏览器的位置或以其他方式修改历史。重新访问时，它会检查该位置是否在历史记录的末尾 - 如果不是，则进行了一些反向导航。然后它会发出警报并清除存储的位置。

优点：

• 刷新时不触发警报。

• 如果稍后在同一选项卡或不同选项卡中再次访问页面，则不会触发警报。

缺点：

• 无法区分正向导航和反向导航。即，如果用户返回到比此页面更远的地方，然后向前导航到它，它仍然会发出警报，因为使用了一些向后导航来到达这里。但是，我认为即使在这种情况下，您也会希望用户刷新。

• 只提醒一次。如果用户然后再次前进和后退，则不会再次发出警报。由于已经通知了用户，这也许并不重要。

Answer 2

这是一个简单的方法。不过，它会检测到页面是从后退和前进导航加载的。

if(window.performance.navigation.type === 2) {
   // the page was navigated to via the forward or back button
   // refresh
}

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation