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

Question

我有一个网站，如果用户浏览到某个页面，则根据该页面上的某些条件，会弹出对话框通知。 用户可以从此页面导航到其他页面，当然也可以在这些页面上按下后退按钮以返回此页面。

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

有可靠的方法来检测这一点吗？

- Tom

Answer 1

MDN窗口事件列表

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

一个用于窗口pageshow事件的事件处理程序属性。

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

- kemicofa ghost

---

有趣。我查看了链接的文档，但是出于某种原因，它没有描述持久属性及其行为。 - Tom

找到这个链接了，但是persisted属性的描述相当简略：https://developer.mozilla.org/en-US/docs/Web/Events/pageshow - Tom

是的，它可能在所有浏览器上都能工作，也可能不行。不过这是我能找到的最接近的东西了。顺便说一下，有几篇stackoverflow的帖子讨论了这个问题。 - kemicofa ghost

2023年与iOS兼容。谢谢！ - Hillcow

Answer 2

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

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

- David TG

---

已经过时。https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/navigation - Dr. DS

Answer 3

我喜欢使用输入框中的值来实现这个：

<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 放入字段中的值来重新填充该字段的值 :-)

- DeanoV6

Answer 4

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

- Ell

---

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

Answer 5

有一个window.performance navigationTiming API可以检测页面是否通过按下返回按钮加载完成。

if (window.performance) {
     var navEntries = window.performance.getEntriesByType('navigation');
     if (navEntries.length > 0 && navEntries[0].type === 'back_forward') {
          console.log('this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("browser doesn't support this API");
}

还有一个已弃用的API，可以检测返回按钮：

if (window.performance) {
     if (window.performance.navigation
      && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
          console.log('this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("browser doesn't support this API");
}

你可以将两者结合起来，以支持较旧的浏览器。

- Debashis Chowdhury