如何在javascript中检测客户端上的反向导航

How can I detect back navigation on the client in javascript?

本文关键字：导航 客户端 检测 javascript      更新时间：2023-09-26

请注意：我没有试图检测到单击了后退按钮。我不在乎。

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

编辑：

1） 我确实想缓存我的页面。我们现在生活在一个移动的世界里。不缓存是一种糟糕的做法。

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

<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>

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

优点：

  • 刷新时不触发警报。

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

缺点：

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

  • 只发出一次警报。如果用户再次前进和后退，它将不会再次发出警报。由于已经通知了用户，所以这可能并不重要。

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

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

@jQuery.PHP.Magento.com击败了我，但您可以使用localStorage而无需跟踪特定的URL：

<script>
window.onbeforeunload = function()
{
    localStorage.setItem("beenHere", true);
}
if (localStorage.getItem("beenHere"))
{
    alert("Please refresh");
    localStorage.removeItem("beenHere");
}
</script>

对于不同的页面，"beenHere"需要是不同的字符串，但可以是符号，而不是精确的URL。

编辑：等待，注意到一个问题：刷新时会发出警报。我得多想想。

使用以下内容：

仅在第二页使用：

localStorage.setItem（"urlnow"，document.URL）；

在第一页检查

if(localStorage.getItem("urlnow") == Your_URL_OF_Next_Page)){
 window.location.reload()
}

没有这样的方法来检查下一页url。你可以有document.referrer，这在你的情况下没有用，所以你需要硬编码下一页url，以检查是否设置了localstorage变量。意味着用户进入了该页面。您也可以根据自己的要求销毁本地存储。

编辑：更好的方式

在第二页使用：

$(document).ready(function(){
    localStorage.setItem("nextPageHit",1));
})

在第一页

$(document).ready(function(){
    if(localStorage.getItem("nextPageHit")){
         window.location.reload();//Forcible reload.
        localStorage.setItem("nextPageHit",0);
    }
})

您需要告诉浏览器不要通过设置响应标头来保存此页面的缓存
使用RubyonRails：

response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' # HTTP 1.1.  
response.headers['Pragma'] = 'no-cache' # HTTP 1.0.  
response.headers['Expires'] = '0' # Proxies.

最好不要缓存页面，这样用户就不需要刷新了。在中添加以下标记将禁用页面的缓存。

<meta http-equiv="Cache-Control" content="no-store" />
相关文章：