检测用户是否通过浏览器后退按钮到达当前页面答案

【问题标题】：Detect if the user arrived to the current page via the browser back button检测用户是否通过浏览器后退按钮到达当前页面
【发布时间】：2015-02-27 19:44:39
【问题描述】：

我有一个网站，如果用户导航到某个页面，那么他会根据页面上的某些条件收到对话框通知。用户可以从这个页面导航到其他页面，当然也可以按这些页面上的后退按钮来导航回到这个页面。

我想检测用户是否通过后退按钮到达此页面，因此不会再次显示对话框通知（因为用户已经看到它）。

有没有办法可靠地检测到这一点？

【问题讨论】：

标签： javascript navigation cross-browser back-button

【解决方案1】：

MDN list of window events

你最好的可能是window.onpageshow = function(){};

窗口上的页面显示事件的事件处理程序属性。

window.onpageshow = function(event) {
    if (event.persisted) {
        alert("From back / forward cache.");
    }
};

【讨论】：

有趣。我检查了链接的文档，但由于某种原因，此处没有描述持久性属性及其行为。
找到了这个，但持久化属性的描述非常稀疏：developer.mozilla.org/en-US/docs/Web/Events/pageshow
是的，我和它可能适用于所有浏览器，也可能不适用于所有浏览器。我能找到的最接近的东西。顺便说一句，有几个关于它的 stackoverflow 帖子。

【解决方案2】：

输入技巧不再有效。这是我使用的解决方案：

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

【讨论】：

已弃用。 developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

【解决方案3】：

最好的（虽然不是非常可靠）的方法是使用 Javascript 历史对象。您可以查看 history.previous 页面，看看它是否是该系列的下一个。不是一个很好的解决方案，但也许是解决这个问题的唯一方法。

【讨论】：

我想到的另一个解决方案是，我在页面中包含页面请求时间，并且仅当页面请求后 javascript 代码的运行在某个阈值内时才显示对话框，尽管它也可能不可靠，因为页面加载时间是不可预测的。

【解决方案4】：

我喜欢在输入字段中使用一个值：-

<input type="hidden" id="fromHistory" value="" />

<script type="text/javascript">
if (document.getElementById('fromHistory').value == '') {
    document.getElementById('fromHistory').value = 'fromHistory');
    alert('Arrived here normally');
} else {
    console.log('Arrived here from history, e.g. back or forward button');
}
</script>

这是可行的，因为如果浏览器从历史记录导航回该字段，则会使用 javascript 放入该字段的值重新填充该字段的值 :-)

【讨论】：