如何在 javascript 中检测客户端上的后退导航？答案

【问题标题】：How can I detect back navigation on the client in javascript?如何在 javascript 中检测客户端上的后退导航？
【发布时间】：2015-05-21 10:51:33
【问题描述】：

请注意：我并不是要检测返回按钮是否被点击。我不在乎。

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

编辑：

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

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

【问题讨论】：

如果您知道他们点击返回的页面的 URL，您可以检查 document.referer 的值。否则我不知道这是可能的。有一个 window.history 元素，但我认为没有任何方法可以判断当前状态是否是历史上的最后一个状态。
看看window.onpopstate，我认为这与您所描述的行为一样接近
我宁愿有一些与 URL 解耦的东西。
您应该查看 js 历史库，它允许您保存状态并处理前进/后退导航
历史API中是否有前向堆栈？

标签： javascript jquery

【解决方案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>

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

优点：

刷新时不触发警报。
如果稍后再次访问页面，无论是在同一个选项卡中还是在不同的选项卡中，都不会触发警报。

缺点：

无法区分前进导航和后退导航。即，如果用户返回到比此页面更远的位置，然后向前导航到它，它仍然会发出警报，因为使用了一些后退导航来到达这里。但是，我认为即使在这种情况下，您也希望用户刷新。
仅提醒一次。如果用户然后再次前进和后退，它将不会再次发出警报。既然已经通知了用户，也许这并不重要。

【讨论】：

我没有发出任何警报。我将显示一个引导警报。所以这些缺点可能没什么大不了的。我要试试这个。
清除状态对于防止刷新后再次发生警报是必要的。刷新不会更改页面在历史记录中的位置，因此存储的位置仍将小于 history.length。
这是迄今为止最好的答案！

【解决方案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

【讨论】：

这可能会奏效，但我什至不再为那家公司工作，更不用说那个项目了。所以我无法真正测试它。 :)

【解决方案3】：

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

编辑：等等，发现一个问题：刷新时会发出警报。将不得不考虑更多。

【讨论】：

很好的答案 :) 加一！ :)
但是您根本没有检测到页面返回导航。您正在检测完全不同的重访。比如说有人去这个页面，然后离开一段时间，然后在不同的工作单元上回到这个页面。没有发生后退导航，但他们仍会收到此消息。
我不相信有使用本地存储的干脆解决方案。本地存储是错误的范围。
@Jordan，那你有什么建议？

【解决方案4】：

使用以下：

仅在第二页使用：

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

})

【讨论】：

不想知道网址。抱歉，我应该在我的问题中提出这个要求。
你不知道下一页的网址吗？
称为解耦。我想写一些我可以以任何顺序在任何页面上使用的东西。
@Jordan，您现在在我的新编辑解决方案中遇到了什么问题？
本地存储是错误的范围。有人在单独的工作单元中再次点击此页面，它会警告他们。刷新，它会警告他们。本地存储不是太持久的答案。我现在需要一些与此页面相关的内容。以及用户刷新时不会触发的东西。

【解决方案5】：

你需要通过设置响应头来告诉浏览器不要保存这个页面的缓存。
使用 Ruby on Rails：

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.

【讨论】：

您可以参考这个问题了解更多详情stackoverflow.com/questions/19098663/…

【解决方案6】：

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

<meta http-equiv="Cache-Control" content="no-store" />

【讨论】：

离开第一页后history.length不会一直大于0吗？
我正在为移动端写作。我不会做无商店的。